Add a timeline component to create a user's timeline.

[mrinal4]

Details will be given when someone is assigned.

[AshutoshDash1999]

@garimasingh128 I want to work on this issue

[garimasingh128]

@AshutoshDash1999 Just ping me up on slack and we'll discuss how to proceed.

[AshutoshDash1999]

Will it work?

[garimasingh128]

Looks kind of empty on the side and colors are also not in sync with the theme of the app. Can you research more and try for better templates.

[AshutoshDash1999]

Edited the color with the color palate you provided, and adjusted the alignment.

Shall I look for other templates?

[garimasingh128]

Refer to this: codepen.io/tutsplus/pen/QNeJgR

I want the same with alternate cards and animation when we scroll down. You just need to change the color palette like use the exact color code of purple used in the resume or some other color used in the app. The pink looks odd so keep it neutral maybe. Then you can fetch the data with the api once the design is finalized.

[AshutoshDash1999]

how is it?

[garimasingh128]

Looks perfect. Just change the color palette and move ahead with setting up the content.
You need to show the date of creating of the repo, no of stars, no of forks, description of the repo in the cards. Add if I missed something.

[AshutoshDash1999]

I have picked up the color from the resume. For showing the details from the repo I guess you will be using APIs but I'm not familiar with using API and JS. I guess you have to create another issue for that. For now can I submit a PR?

[garimasingh128]

The issue belongs to the hard category so the assigned person has to create both the front end and backend. I already shared the resources in the README. Please go through it if you have any doubts. Also, FYI the code for API fetching of the repos is already present in one of the components it's just commented. You can refer to that for help. For setting data you just have to put {repositories.name} something like this in h1, p, etc tags in jsx.

Let me know if you can get started with it.
PS: Keep the background the same for this component as the main page. You don't even need to add a background as I think I have already set it in index.html so its same for all components. The card color is good.

[AshutoshDash1999]

okay, I want to give it a shot, but I can't promise anything if I could do it succesfully!

[garimasingh128]

No issue. Ping any of the mentors on slack or me if you face any error or doubt.

[AshutoshDash1999]

Hey, I could not find the code for API fetching that you were talking about.

I guess it would be better if you can assign someone better. I need to give some more time in learning, till then I would love to took up an issue wich requires only Front-End.

[garimasingh128]

For anyone taking this issue, repos are coming as a parmeter in displaycard.js. You have to fetch them in the same way in Timeline.js component and just set the title, date of creating of the repo, no of stars, no of forks, description of the repo in the cards. Add if I missed something.

For ex: use the url : https://api.github.com/users/garimasingh128/repos to get my repos. In the same way replace garimasingh128 with the searched username.

[garimasingh128]

@AshutoshDash1999 create a PR for the frontend of the timeline.. Name it Timeline.js

[AshutoshDash1999]

@AshutoshDash1999 create a PR for the frontend of the timeline.. Name it Timeline.js

@garimasingh128 Shall I not include the html and css files?

[garimasingh128]

Didn'y you create a JS file? The project is based on react not html css. You can still create it you just need to convert it to jsx. Let me know if you can do so in a week or so or Leave the issue for other.

[AshutoshDash1999]

I'm leaving this issue for others. :)

[Akshi149]

@garimasingh128 how much time will be given to complete this issue?

[garimasingh128]

You can do it as per your convenience at max 2.5 weeks but report in slack or in comments in every 4-5 days with the progress.

[Akshi149]

I m not familiar with API and js but will try hard to learn it as soon as possible 😅

[Akshi149]

Please assign me this issue😃

[garimasingh128]

Yup. There are plenty of youtube videos that fetch repo info based on usernames. Take help from them. For the frontend of timeline there is already a link in the roadmap. You just have to convert it to jsx in react.