krebeDev - API Gallery React Router App
This is a solution to the API Gallery React Router App challenge from krebeDev. Frontend challenges help you improve your coding skills by building realistic projects.
Table of contents
Overview
The Challenge/User Stories
- User should be able to view a gallery of images fetched from an API.
- User should see a loading state while the images are being fetched.
- User should be able to click on an image in the gallery to view it in a larger size or in a modal.
- User should have the ability to search for images in the gallery based on keywords or tags.
- User should be able to bookmark or favorite specific images in the gallery for easy access later.
Screenshot
Links
- Solution URL: https://github.com/traez/calisthenics-gallery
- Live Site URL: https://calisthenics-gallery-traez.vercel.app
My process
Built with
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
- React - JS library
- Next.js - React framework
What I learned
- This project ended up being a mash up of 2 previous React Router projects. Both functionalities were combined aside fetch API call, and implemented via Next.js App router.
- Different difficult bugs popped up along project life cycle, that they were all satisfactorily resolved. Practice will always make perfect and I look forward to doing similar projects in an advanced manner.
Continued development
- More Next.js Apps, GraphQL, Technical Writing, Contributing to Open Source
Useful resources
Stackoverflow
YouTube
Google
ChatGPT
Author
- Website - Trae Zeeofor
- Twitter - @trae_z
Acknowledgments
To the earlier versions of myself in the last one year. thanks for pushing!