This is a solution to the Photosnap Website challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Users should be able to:
- View the optimal layout for each page depending on their device's screen size
- See hover states for all interactive elements throughout the site
My focus for this project was to learn page routes in Next.js and to reinforce my understanding of building react components with Tailwind CSS styles. There were also limitations with next/images that I had to work around. This project helped me get really deep into the Next.js docs to understand how images are rendered and optimized.
I plan to learn more about grid-area and pulling data from a local JSON file, so there are some other projects I'm thinking of completing next. I've been getting really comfortable creating components and putting components together to build a webpage, and I want to build more complex features with a lot of moving parts (Maybe with React Redux).
Ian Wu