Synth App

The goal of this app is to recreate the functionalty in Pexels where you scroll through a list of images, preview and download them.

See the state machine diagram here

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Built With

• Next.js as the framework
• Zag.js for modeling the gallery
• Panda CSS for styling

Improvement Ideas

Given more time, I would like to:

• Test the application on mobile and tablet devices, fixing any issues
• Consider using Context API for gallery.tsx instead of prop drilling
• Write a end-to-end test using Playwright
• Improve keyboard accessibility, masonry grids are notorious for being difficult to navigate with a keyboard.