- 117
- 13 783
Dev Complete
United Kingdom
เข้าร่วมเมื่อ 14 มี.ค. 2024
Welcome to Dev Complete, your ultimate destination for comprehensive frontend development tutorials, with a focus on JavaScript mastery!
Subscribe now and embark on a transformative learning experience with Dev Complete. Let's code, create, and conquer the frontend together!
github.com/devcomplete09
Subscribe now and embark on a transformative learning experience with Dev Complete. Let's code, create, and conquer the frontend together!
github.com/devcomplete09
Can I Recreate GitHub’s Profile? A Next.js 15 & Tailwind & React.js Clone
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 - github.com/devcomplete09
Subscribe here: youtube.com/@devcomplete?sub_confirmation=1
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 - github.com/devcomplete09
Subscribe here: youtube.com/@devcomplete?sub_confirmation=1
มุมมอง: 6
วีดีโอ
React.js Code Mistakes You're Making RIGHT NOW!
มุมมอง 14014 วันที่ผ่านมา
React.js Code Mistakes You're Making RIGHT NOW! Are you guilty of these React sins? 😱 In this video, we’re diving into the most painful mistakes developers make in their React.js code-and how to fix them like a pro! 🚀 From skipping key props to totally misusing useEffect, we’ll help you level up your React skills and avoid the "oh no" moments. Don’t let these mistakes haunt your codebase! 💻🔥 Ti...
React Query: Managing state in your Next.js 15 app
มุมมอง 15514 วันที่ผ่านมา
#reactquery #reactjs #nextjs How To Integrate React Query In Your Latest Next.js App. React Query: Managing state in your Next.js 15 app. Looking to level up your Next.js app? Learn how to integrate React Query, the missing piece in your Next.js app, in this tutorial. Stay up to date with the latest Next.js features and boost your app's performance with React Query! Github - github.com/devcompl...
FAST REST API with Node.js | Express.js | MongoDB
มุมมอง 43621 วันที่ผ่านมา
#mongodb #nodejs #expressjs Build a REST API with Node.js | Express.js | MongoDB Find the Github repo with all the code here: github.com/devcomplete09/restapi-nodejs-express-mongodb In this step-by-step tutorial, I’ll show you just how easy it is to build a REST API using Node.js, Express, and MongoDB! 🚀 We’ll cover everything from setting up the project to creating simple CRUD (Create, Read, U...
AWS CloudFront + S3 Bucket: The Ultimate Configuration Guide!
มุมมอง 4921 วันที่ผ่านมา
#aws #awss3 #cloudfront A few reasons for why you should use AWS Cloudfront: - Low Latency and High Speed - Static Content Caching - Works with AWS services like S3, EC2, AWS WAF - SSL/TLS Encryption, AWS WAF - Pay-as-you-go pricing with no upfront costs - Provides analytics through Amazon CloudWatch AWS S3 Bucket policy permissions: docs.aws.amazon.com/AmazonS3/latest/userguide/WebsiteAccessPe...
Next.js + React + AWS Amplify = Deployment Made Simple!🚀
มุมมอง 9128 วันที่ผ่านมา
Next.js React AWS Amplify = Deployment Made Simple!🚀
Get Found on Google: Best Free Directories for SEO Backlinks!
มุมมอง 125หลายเดือนก่อน
Get Found on Google: Best Free Directories for SEO Backlinks!
Is React 19 REALLY Better Than React 18 For Forms?
มุมมอง 1928 หลายเดือนก่อน
Is React 19 REALLY Better Than React 18 For Forms?
Master JavaScript DOM with this Beginner-Friendly Tutorial
มุมมอง 1528 หลายเดือนก่อน
Master JavaScript DOM with this Beginner-Friendly Tutorial
JavaScript Operators Explained For Beginners
มุมมอง 338 หลายเดือนก่อน
JavaScript Operators Explained For Beginners
JavaScript String Methods Explained for Beginners
มุมมอง 299 หลายเดือนก่อน
JavaScript String Methods Explained for Beginners
How EASY JavaScript Data Types Can Be | For Beginners
มุมมอง 389 หลายเดือนก่อน
How EASY JavaScript Data Types Can Be | For Beginners
Web Scraping Google Search Results with Puppeteer and Node.js
มุมมอง 5039 หลายเดือนก่อน
Web Scraping Google Search Results with Puppeteer and Node.js
Bring Your Images to Life with This React.js Magnifier Component!
มุมมอง 6659 หลายเดือนก่อน
Bring Your Images to Life with This React.js Magnifier Component!
3 Rarely Used HTML Elements in React.js
มุมมอง 229 หลายเดือนก่อน
3 Rarely Used HTML Elements in React.js
Enhancing React User Experience with Image Previews for your Images
มุมมอง 249 หลายเดือนก่อน
Enhancing React User Experience with Image Previews for your Images
Creating a Modal using the dialog HTML element in React.js
มุมมอง 649 หลายเดือนก่อน
Creating a Modal using the dialog HTML element in React.js
Real-Time Magic: Mastering MongoDB Streams in Node.js
มุมมอง 109 หลายเดือนก่อน
Real-Time Magic: Mastering MongoDB Streams in Node.js
Best Way to Deploy Your Next.js App on Render in 2025 Revealed!
มุมมอง 5899 หลายเดือนก่อน
Best Way to Deploy Your Next.js App on Render in 2025 Revealed!
How to Pick the Perfect Font in Next.js
มุมมอง 189 หลายเดือนก่อน
How to Pick the Perfect Font in Next.js
The Next.js Script Tag: A Comprehensive Guide
มุมมอง 859 หลายเดือนก่อน
The Next.js Script Tag: A Comprehensive Guide
React & Next.js + GraphQL: A Love Story for Developers
มุมมอง 12410 หลายเดือนก่อน
React & Next.js GraphQL: A Love Story for Developers
Dynamic form fields in React.js | Form validation
มุมมอง 6410 หลายเดือนก่อน
Dynamic form fields in React.js | Form validation
Create a simple custom fetch hook in React.js | useFetch()
มุมมอง 3410 หลายเดือนก่อน
Create a simple custom fetch hook in React.js | useFetch()
Beginner-Friendly App Building: Next.js, MongoDB, Tailwind, and Rest API
มุมมอง 2110 หลายเดือนก่อน
Beginner-Friendly App Building: Next.js, MongoDB, Tailwind, and Rest API
MongoDB & Node.js - CRUD operations for beginners
มุมมอง 2810 หลายเดือนก่อน
MongoDB & Node.js - CRUD operations for beginners
Enjoyed the video? Don't forget to subscribe for more! 🎉 Drop a comment with your thoughts, feedback, or suggestions-I’d love to hear from you! 👇🔥
Please Subscribe to this channel and Like and Share this video if you enjoyed it. Thank you! ❤
Nice 🎉
Thanks 🤗
Please subscribe to this channel and like this video! Thank you!🙏 ❤
Please subscribe to this channel and like this video! Thank you!🙏 ❤
Please like this short if you enjoyed it and don’t forget to subscribe.
Multa bafta 🎉
Why not a br tag
Br tag does not create a space inline between your text and your link, it creates a new line as block.
Please like this video if you enjoyed it and subscribe to this channel for more content like this!
Please subscribe and leave a comment if you have any suggestions/improvements/feedback. Thank you!
Please subscribe and leave a comment if you have any suggestions/improvements/feedback. Thank you!
Please subscribe and leave a comment if you have any suggestions/improvements/feedback. Thank you!
Please Subscribe to this channel and Like and Share this video if you enjoyed it. Thank you! ❤
Please subscribe and leave a comment if you have any suggestions/improvements/feedback. Thank you!
Please subscribe and leave a comment if you have any suggestions/improvements/feedback. Thank you!
Please Subscribe to this channel and Like and Share this video if you enjoyed it. Thank you! ❤
Please Subscribe to this channel and Like and Share this video if you enjoyed it. Thank you! ❤
amazing, just what i needed!
Thank you!
Please Subscribe to this channel and Like and Share this video if you enjoyed it. Thank you! ❤
amazing, thank you !
Thanks for watching!
Please Subscribe to this channel and Like and Share this video if you enjoyed it. Thank you! ❤
Please Subscribe to this channel and Like and Share this video if you enjoyed it. Thank you! ❤
Appreciate the video! It’s super helpful 😊
Thank you!❤️
Thank you for your video, warm regards from Netherlands!
Thanks for watching!
Thankyou so much
Really Really helpful thank you.
and Babel will put it all back into your bundled code 🙂 // original let result = { test: { test2: "Complete"}} let done = result ?.test?.test2 // bundle var _result$test; let result = { test: { test2: "Complete" } }; let done = result === null || result === void 0 || (_result$test = result.test) === null || _result$test === void 0 ? void 0 : _result$test.test2;
Yep! One of those things, rotten apple inside.
Not bad..
Keep on posting!
Interesting quiz 👏
Glad you think so!
Please subscribe and leave a comment if you have any suggestions/improvements/feedback. Thank you!
Please subscribe and leave a comment if you have any suggestions/improvements/feedback. Thank you!
th-cam.com/video/hMBld-K_tBk/w-d-xo.htmlsi=MwZpcrg6L7yCorWG
Please subscribe and leave a comment if you have any suggestions/improvements/feedback. Thank you!
Please subscribe and leave a comment if you have any suggestions/improvements/feedback. Thank you!
Please subscribe and leave a comment if you have any suggestions/improvements/feedback. Thank you!
Please subscribe and leave a comment if you have any suggestions/improvements/feedback. Thank you! ♥
bhai sound bhi dal deta toh it will be better
Please subscribe and leave a comment if you have any suggestions/improvements/feedback. Thank you!
Please subscribe and leave a comment if you have any suggestions/improvements/feedback. Thank you!
Please subscribe and leave a comment if you have any suggestions/improvements/feedback. Thank you!
Please subscribe and leave a comment if you have any suggestions/improvements/feedback. Thank you!
Please subscribe and leave a comment if you have any suggestions/improvements/feedback. Thank you!
Please subscribe and leave a comment if you have any suggestions/improvements/feedback. Thank you!
informative video so useful, Thanks sir , can you explain more about scrolling to next page and instdead of using html parsing scraping method use Reverse Engineering a Private API in the targeted website ( ecom store ) and get the data directly from their private Api and how to scroll down to get more data 🙏
You can scroll on the same page using puppeteer and get the next page of results provided by google. Maybe in another video I will go over that too. Thank you for your comment! 🙏
Please subscribe and leave a comment if you have any suggestions/improvements/feedback. Thank you!
Please subscribe and leave a comment if you have any suggestions/improvements/feedback. Thank you!
'promosm'
Please subscribe and leave a comment if you have any suggestions/improvements/feedback. Thank you!
Please subscribe and leave a comment if you have any suggestions/improvements/feedback. Thank you!