Can I Create an Epic GitHub Profile? A Next.js 15, Tailwind & React.js Challenge!
Can I Recreate GitHub's Profile? A Next.js 15 & Tailwind & React.js Clone
Timestamps
0:00 - Intro
2:16 - Creating a new app using Next.js
6:05 - Adding colors in the Tailwind config file
12:40 - Using Next.js searchParams to get the username from the URL
17:56 - Creating a reusable function to fetch data from Github
21:05 - Creating another function to get the GitHub URL based on the type
23:18 - Started creating the Header component
33:11 - Creating the links list from the Header component
41:32 - Adding Sign up, Sign in and Search input in the Header
50:15 - Started creating the Tabs component (Overview, Repositories, Projects, Packages, Stars)
1:11:15 - Copying the SVG icons for the tabs
1:17:35 - Creating a component to get the icons based on an 'id'
1:29:17 - Structuring the code for adding the User details component and the middle section
1:32:18 - Started creating the left hand section regarding User details
1:34:19 - Already hit the rate limiting that GitHub has for non-authenticated requests on it's APIs
1:44:14 - Instead of relying on the GitHub endpoint to not hit the rate limiting I mocked my user, copied the user data and used it, should have done the same the whole video
2:0057 - Started creating the Repositories component which is on the Overview tab
2:04:57 - Creating a component for a single repository tile and using dummy data for it
2:23:21 - Picked up a random user from GitHub to use that profile as an example with more data than my GitHub user
2:28:02 - Adding Location, Blog (website) and Twitter username in the User details component
2:47:28 - Using a fetchRepos function to get all the repositories data for my user, mocking it
2:58:24 - Finishing off the Repositories section
3:03:01 - Started having a look at the contribution section and planning out how to do it
3:06:11 - Using react-github-calendar package to display the contributions
3:22:59 - Using useSearchParams() to get the tab on which I am
3:26:43 - Making the Repositories tab work before creating the component for displaying the repositories
3:45:13 - Realising that I can re-use the same component for displaying Stars as well
3:50:15 - Trying to get the data based on the type (repos, stars, main page overview) and also move the calls on the client side + separate out the components
3:58:27 - Realising that there are still loads of things to do for this and improve as well
4:02:34 - Randomly found @maximilian-schwarzmueller 's profile page on GitHub
After many struggles with rating limit from GitHub on their APIs and other parts of the code that I've might have done wrongly I was able to create a similar page with whatever Github has for profile pages which works dynamically based on Github username. It's not completely done as there are loads of things over there to consider and Github's APIs are not exposing all of the data needed as well (they might do but you need an Authorisation too). I hope you enjoyed this video and that you've learned something along the way, please leave a comment if you have any suggestions/feedback and don't forget to Subscribe to this channel.
Github - https://github.com/devcomplete09
Subscribe here: / @devcomplete