August 2023

Mockup Store

Visit ProjectView Code

E-commerce store

ABOUT

This is a fully responsive e-commerce store template, using phone and laptop mockups as product data. Built using the Next.Js 13 app router it includes many of its features such as server side rendering and api routes. It incorporates many additional tools and libraries such as react-query and Zustand state management.

KEY features:

  • Dark and light modes with system preference

  • Greyscale mode for viewing products

  • Responsive design for mobile and desktop screens

  • Checkout with Stripe & discount system for authenticated users.

  • Individual product page

  • Product pagnation and search features

  • Persistant state management with Zustand for the cart and checkout

  • modern and minimalistic design

  • Session & cookie authentication with node.js, express.js MySQL database

  • Product suggestion feature and email subscription features using MySQL database

Build

  • Front-end React, Typescript , Next.Js (Framework) Tailwind, Zustand (State Management), Stripe (Checkout)
  • Back-end Node.Js,Typescript,Express.Js,MySQL
  • Deployment-stack Vercel render(backend) planetscale (MySQL database)
  • Testing React Testing Library, Jest,Supertest

You have reached the end of this project. Thank you for reading!


View all