Snapcat

Code sample app built using Next.js, React, TypeScript, Sass, ESLint, Prettier, Jest and Testing Library.

Try it out

https://snapcat-next.vercel.app

On your first visit you'll be assigned a random user ID, shown in the footer. This will allow you to save favourites and vote on images.

Points of interest

• Next.js App Router - The app uses Next.js's modern and recommended router, enabling the latest features and optimisations.
• Server Components - The majority of components are Server Components, allowing them to be server-side rendered. This improves performance and SEO, and reduces the client bundle size.
• Server Actions - Used for handling image uploads, votes and favourites. This simplifies the client-side code and allows direct interaction with the API without exposing the API key.
• Optimistic updates - Giving instant UI feedback and making the app feel more responsive.
• Middleware - Used to generate a random user ID on the first visit and store it in a cookie. This is the used to fetch user-specific data during server-side rendering, rather than making API calls in the browser.
• Caching - The app leverages Next.js's caching mechanisms to minimise network requests and maximise performance.
• Accessibility and SEO - 100% Lighthouse and axe scores across the app.

Running locally

Clone the repo:

git clone https://github.com/petewritescode/snapcat-next.git

Rename .env.template to .env.local and replace API_KEY with your own, obtained from The Cat API.

Run the project:

npm run dev

Run tests:

npm run test

Get in touch

I'd love to hear what you think!

Email: [email protected]
LinkedIn: https://www.linkedin.com/in/pete-williams

Planned improvements

• Testing - get React Canary features working in Jest, add Cypress tests.
• Linting - configure rules, add Stylelint.
• API calls - handle 100 item limit.