Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Photosnap heavily using Grids. Built with React, Tailwind, Next.js 13

Pablo 550

@ackDeckard

Desktop design screenshot for the Photosnap multi-page website coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
4advanced
View challenge

Design comparison


SolutionDesign

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 GitHub
Discord logo

Join 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