ecommerce-demo-nextjs
This e-commerce platform is built with Next.js, MongoDB, and TypeScript, featuring a cart system, coupon management, and secure authentication. Tailwind CSS ensures responsive design, and React Query handles data fetching. Components are documented and tested with Storybook and Vitest.
Demo Link
- Main App : https://ecommerce-demo-nextjs-22.vercel.app
- Storybook : https://ecommerce-demo-nextjs-storybook.vercel.app
Overview
This project is an e-commerce platform I've built with Next.js and MongoDB, designed to offer a seamless shopping experience. Key features include a robust cart system and dynamic coupon management.
I've integrated Storybook to document and visually test components, ensuring a consistent UI. Each component is thoroughly tested with Vitest and React testing Library, guaranteeing reliability across the application. The project is built with TypeScript to provide strong type safety and prevent runtime errors.
The API layer is crafted using Next.js API routes with MongoDB as the database, offering efficient and scalable data management. I've implemented NextAuth for secure authentication, allowing for flexible user management.
Styling is managed with Tailwind CSS, following best practices to maintain a clean and responsive design. For data fetching, I've utilized React Query to ensure efficient and reactive data handling across the application.
Tech Stack
Client: React, Typescript, Next Js, React-Query,
Styling: Tailwind CSS, Storybook,
HTTP Client: axios
Code Formatter: Prettier, Husky, Eslint
Testing: Vitest, React-testing-library
Other useful scripts
-
pnpm buildto build a project -
pnpm devto run (dev) a project -
pnpm buildto build a project -
pnpm previewto run preview a project -
pnpm lintto lint a project -
pnpm lint:fixto lint:fix a project -
pnpm formatto format a project -
pnpm storybookto start storybook dev server -
pnpm build-storybookto build storybook