Photosnap heavily using Grids. Built with React, Tailwind, Next.js 13
Design comparison
Solution retrospective
My favorite project so far!! 😁 It required a lot of thought and attention to detail. I plan on continuing to improve it over time.
The project uses specific arrays and objects to serve all the content, which simulates what a server might return. This means that adding more items is as simple as adding them to the desired array, without the need to change the code.
To make the code cleaner, I used the Context API instead of passing props everywhere. The core of the website is based on three components: <NewStory>, <ReadStory>, and <ViewFeatures>.
This was my first time using React-Aria, specifically the Button component. I believe that the website is fully responsive and should work well on most devices.
Also, my preference is to use Grid instead of Flexbox so I'm heavily using it everywhere.
Lastly, I used the /app directory from Next.js 13 (actually running a canary version of it cuz of some Nextjs bug that appeared during the coding 🚀)
My next goal: ♿ - enhance the accessibility by adding more React-Aria components.
First time doing a project of this magnitude! 🎉🥳
Do you have any suggestions? Please, be my guest and suggest improvements!
Community feedback
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord