Full Stack E-Commerce
Full-stack e-commerce application designed to provide a seamless shopping experience. It features user authentication, product listings, and a shopping cart, all built with a robust and scalable tech stack.
Features
- User Authentication (Sign Up, Sign In with OAuth, Sign Out)
- Product Listings with detailed views
- Shopping Cart functionality (With guest Cart).
- Responsive design.
- Payment Gateway (razorpay)
- Admin Panel (CRUD operations for products and Users).
- Dynamic Search, Sort, and Filter product/users/orders.
- Pagination for products/users/orders.
Screenshots
User Journey
|
| Secure User Authentication with Email & Google Sign-In |
|
| Product Showcase with Categories and Featured Items |
|
| Detailed Product Information with Images and Specifications |
|
| User-Friendly Cart with Quantity Controls and Price Breakdown |
|
| Simple Address Collection for Shipping |
|
| Multiple Payment Options for Customer Convenience |
|
| Order Summary Before Final Confirmation |
|
| Secure Payment Processing with Razorpay |
|
| Order Confirmation with Success Message |
|
| Complete Order Information and Tracking |
Admin Dashboard
|
| Comprehensive Admin Dashboard with Sales Analytics |
|
| Complete Product Management with CRUD Operations |
|
| User Management with Role-Based Access Control |
Search Functionality
|
| Dynamic Search with Filters and Sorting Options |
Tech Stack
Frontend
- Next.js: A React framework for server-side rendering and generating static websites.
- React: A JavaScript library for building user interfaces.
- Tailwind CSS: A utility-first CSS framework for rapid UI development.
- ShadCn UI: A set of accessible, unstyled UI components for building high-quality design systems and web apps.
- Lucide Icons: A collection of simple and consistent icons.
Backend
- Auth.js: Authentication for Next.js applications.
- Prisma: An ORM for Node.js and TypeScript.
- Neon: A serverless PostgreSQL database.
- uploadthingy: A file uploader for Node.js.
- TypeScript: A strongly typed programming language that builds on JavaScript.
- ESLint: A tool for identifying and fixing problems in JavaScript code.
- PostCSS: A tool for transforming CSS with JavaScript plugins.
- Zod: A TypeScript-first schema declaration and validation library.
Getting Started
Prerequisites
- Node.js
- npm
- PostgreSQL database (Vercel neon)
Installation
Clone the repository:
git clone https://github.com/ankitrajxd/e-commerce.git
Install dependencies:
npm install or npm install --legacy-peer-deps
Create a .env file in the root directory and add the following environment variables:
NEXT_PUBLIC_APP_NAME = 'Ecommerce'
NEXT_PUBLIC_APP_DESCRIPTION = 'Modern Ecommerce store'
NEXT_PUBLIC_SERVER_URL= 'http://localhost:3000'
DATABASE_URL='db url'
# auth
AUTH_SECRET="random generated string"
NEXTAUTH_URL="http://localhost:3000"
NEXTAUTH_URL_INTERNAL="http://localhost:3000"
PAYMENT_METHODS="Online,CashOnDelivery"
DEFAULT_PAYMENT_METHOD="Online"
# razorpay
RZR_KEY_ID=''
NEXT_PUBLIC_KEY_ID=''
RZR_KEY_SECRET=''
# google oauth - https://console.cloud.google.com/ - for authjs
AUTH_GOOGLE_ID=''
AUTH_GOOGLE_SECRET=''
# uploadthing - for uploading files
UPLOADTHING_TOKEN=''
UPLOADTHING_SECRET=''
UPLOADTHING_APP_ID='' # get for the url
Run database migrations:
npx prisma migrate dev
Seed the db (Make sure the code is uncommented. It is commented to avoid seeding the db every time the server starts):
npx tsx ./db/seed
Start the development server:
npm run dev
Contributing
Contributions are welcome! Please open an issue or submit a pull request for any changes.
License
This project is licensed under the MIT License.
