GitHub User Search App – Day 3

 

What I Worked On

Today I continued working on the GitHub User Search App and successfully completed the entire project! 🎉
This includes designing the layout, integrating the API, and even implementing the dark mode toggle.

Tasks Completed:

  • Connected the GitHub Users API using fetch() in JavaScript

  • Displayed real-time user data including:

    • Profile picture, username, join date, bio

    • Repo count, followers, following

    • Location, blog, Twitter, and company info

  • Styled the layout using CSS for a clean and responsive UI

  • Implemented dark mode toggle with a smooth switch

  • Handled invalid usernames with a “User not found” message

  • Polished the UI for desktop and mobile views

What I Learned

  • How to fetch data from APIs and display it dynamically on the page

  • How to update the DOM with user-provided input

  • Improved my CSS styling and layout structuring using Flexbox

  • Gained clarity on how to handle different data cases from APIs

  • Understood better error handling and conditional rendering in JS

 Challenges Faced

  • Faced some confusion while extracting and displaying all fields from the API response.

  • Referred to ChatGPT and MDN Docs to overcome blocks

 Gracias

Grateful for this mini project! It helped me connect all the dots — from HTML structure, CSS design, to JavaScript logic.

~Sanya


Comments

Post a Comment

Popular posts from this blog

Project Completed - Tailwind + API Integration & Functional Components (Day-8)

Project Started – Tailwind, API & Functional Components Today was super productive! I completed the remaining part of the React video tutorial and started working on the project provided in the course. It’s exciting to put into action everything I’ve learned over the last few days!  Tutorial Wrap-Up: ✅ Finished the remaining modules from the React video series ✅ Understood how the overall structure ties together before diving into the project  What I Did in the Project: ✅ Set up the project using Tailwind CSS ✅ Created the Header component ✅ Integrated the MovieDB API ✅ Developed the Card component to display movie info ✅ Implemented Search functionality ✅ Worked on essential features like API requests and rendering data dynamically  What I Learned: Tailwind makes styling fast and scalable — utility-first is a game changer Breaking UI into reusable components keeps the code organized and modular Using APIs in React with...
Read more

JavaScript Deep Dive + React Review (Day-5)

 JavaScript & React – Interview Prep Mode Today was all about preparing for frontend interviews , and I focused heavily on reviewing core JavaScript and React concepts from the shared 150+ question set. What I Covered: JavaScript Topics: Completed all JS questions from the set Focused particularly on: Promises & Callback functions Closures and how they work under the hood Async/Await and handling asynchronous logic These topics were a bit tricky at times, but revisiting them helped me gain more confidence and clarity. React Topics (Partially Covered): Reviewed around 90 questions Focused on core concepts: useState , useEffect , useMemo Type-related questions and common hook usage I still need to complete the remaining React questions, but the progress so far has been good i learnt more about these topics than i knew before.  What I Learned: Revisited how closures work and why they’re important in functional JS. Understood as...
Read more

Progress of Project– Backend Continuation(Day-17)

  Continuing the Backend Flow – Small Steps Forward Today, I continued building and polishing the backend part of the Codeforces Tracker project.I focused on improving what I built yesterday and began adding functionality incrementally.  What I Worked On Today: Continued refining the student API endpoints (GET, POST, PUT) Improved response messages for better frontend readability Added validation and checks in a few endpoints ( POST , PATCH ) Started thinking about integrating a test Codeforces handle for dummy data testing Added placeholder logic for email reminder toggle  Observations & Learning: Even after the main endpoints are written, it takes time to refactor , add proper checks, and ensure clean data structure Small decisions like default values, error handling, or field naming really impact long-term maintainability  Gracias: I’m grateful to have some breathing room to go slower and refine my logic. Not every day has t...
Read more