Full Stack E-Commerce + Dashboard & CMS: Next.js 13 App Router, React, Tailwind, Prisma, Postgress.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

Overview

The challenge

Users should be able to:

• Control mulitple vendors / stores through this single CMS! (For example you can have a "Shoe store" and a "Laptop store" and a "Suit store", and our CMS will generate API routes for all of those individually!)
• Create, update and delete categories!
• Create, update and delete products!
• Upload multiple images for products, and change them whenever you want!
• Create, update and delete filters such as "Color" and "Size", and then match them in the "Product" creation form.
• Create, update and delete "Billboards" which are these big texts on top of the page. You will be able to attach them to a single category, or use them standalone (Our Admin generates API for all of those cases!)
• Search through all categories, products, sizes, colors, billboards with included pagination!
• Control which products are "featured" so they show on the homepage!
• See your orders, sales, etc.
• See graphs of your revenue etc.
• Create Orders
• Checkout using stripe

Screenshot

Links

• Solution URL: Github
• Live Site URL: Live

https://github.com/mcwachira/ecommerce-admin-2.0

MAKE SURE YOU HAVE ADMIN SETUP FIRST!

For DEMO, use Stripe Testing Cards

Key Features:

Prerequisites

Node version 14.x

Cloning the repository

git clone https://github.com/mcwachira/ecommerce-store.git

Install packages

npm i

Setup .env file

NEXT_PUBLIC_API_URL=

Start the app

npm run dev

Available commands

Running commands with npm npm run [command]

command	description
dev	Starts a development instance of the app

Built with

• Nextjs 13

• Tailwind css

• Shadcn ui

• Postgress + Prisma

• Mobile-first workflow

• Next.js - React framework

• Tailwind css- For styling

• Shadcn Ui - For Components

• Cloudinary - Store Images

What I learned

• Learnt How to build a Ecommerce app from teh ground app to production
• Learnt How to use Nextjs 13 App router to build the App
• Learnt How to use Postgress to store my data
• Learn How to use Cloudinary to store Images

Author

• Website - mcwachira.com
• Twitter - @mc_wachira