This is a solution to the GitHub user search app challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Note: Delete this note and update the table of contents based on what sections you keep.
Users should be able to:
- View the optimal layout for the app depending on their device's screen size
- See hover states for all interactive elements on the page
- Search for GitHub users by their username
- See relevant user information based on their search
- Switch between light and dark themes
- Bonus: Have the correct color scheme chosen for them based on their computer preferences. Hint: Research
prefers-color-schemein CSS.
- Solution URL: https://github.com/cganzon/devfinder-react
- Live Site URL: https://devfinder-cg.netlify.app/
- React - JS library
- GitHub Users API
- Local storage
- Mobile-first workflow
- Flexbox
- CSS custom properties
This was my first React project that I've completed, so I definitely learned a lot. I got a lot of practice with components, props, state, event listeners, and how forms work. I look forward to learning more complex React concepts and applying them to future projects.
I would like to learn more about the different React hooks in the future. I was able to incorporate the useEffect() hook in this project, but even then I am still a little confused on its actual purpose and true potential.
- FCC React Beginner Course - I essentially used everything I learned in this video to build this app, so I recommend checking it out if you're looking to take your first dive into React!
- Create a Persisting Dark Mode with React - I used this blog post to help me implement the persisting light/dark mode functionality.
- Website - My GitHub account
- Frontend Mentor - @cganzon