https://github.com/fredvuni/ecommerce-platform-nextjs
This project demonstrates how to build and deploy a full-stack integrated e-commerce website with an admin dashboard
https://github.com/fredvuni/ecommerce-platform-nextjs
clerkauth cloudinary-api formidable mongodb mongoose nextjs react shadcn-ui tailwindcss typescript
Last synced: 12 months ago
JSON representation
This project demonstrates how to build and deploy a full-stack integrated e-commerce website with an admin dashboard
- Host: GitHub
- URL: https://github.com/fredvuni/ecommerce-platform-nextjs
- Owner: FREDVUNI
- Created: 2024-07-05T09:53:49.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-01-27T09:09:56.000Z (about 1 year ago)
- Last Synced: 2025-01-27T10:23:31.662Z (about 1 year ago)
- Topics: clerkauth, cloudinary-api, formidable, mongodb, mongoose, nextjs, react, shadcn-ui, tailwindcss, typescript
- Language: TypeScript
- Homepage:
- Size: 20.7 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Full Stack Integrated E-Commerce Website with Admin Dashboard
This project demonstrates how to build and deploy a full-stack integrated e-commerce website with an admin dashboard using the following technologies:
- **Next.js 14**: A React framework for server-rendered applications.
- **Stripe**: A payment processing platform.
- **TypeScript**: A strongly typed programming language that builds on JavaScript.
- **MongoDB**: A NoSQL database for all database management.
- **Clerk**: A service for authentication and user management.
- **React-Hook-Form**: A library for form validation.
- **Zod:** A schema validation library used to define and validate the shape of data in TypeScript
- **Tailwind CSS & Shadcn UI**: Utility-first CSS framework and UI components for responsive UI design.
- **Next Cloudinary**: A service for image upload and storage.
## Features
- E-commerce functionalities including product listing, shopping cart, and checkout.
- Admin dashboard for managing products, orders, and users.
- Secure payment processing with Stripe.
- User authentication and management with Clerk.
- Form validation with React-Hook-Form.
- Responsive UI design with Tailwind CSS and Shadcn UI.
- Image upload and storage with Next Cloudinary.
## Getting Started
### Prerequisites
- Node.js and npm installed on your machine.
- A MongoDB database.
- Stripe account for payment processing.
- Clerk account for authentication.
- Cloudinary account for image storage.
### Installation
1. **Clone the repository:**
```bash
git clone https://github.com/FREDVUNI/ecommerce-platform-nextjs
cd fullstack-ecommerce-platform
```
2. **Install dependencies:**
```bash
npm install
```
3. **Set up environment variables:**
Create a `.env.local` file in the root of your project and add the following variables:
```env
MONGO_DB_NAME=your-mongo-db-name
MONGODB_URI=your-mongodb-uri
STRIPE_SECRET_KEY=your-stripe-secret-key
CLERK_FRONTEND_API=your-clerk-frontend-api
CLERK_API_KEY=your-clerk-api-key
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
CLOUDINARY_CLOUD_NAME=your-cloudinary-cloud-name
CLOUDINARY_API_KEY=your-cloudinary-api-key
NEXT_PUBLIC_CLOUDINARY_UPLOAD_PRESET=your-cloudinary-upload-preset
CLOUDINARY_API_SECRET=your-cloudinary-api-secret
MONGO_URI=your-mongo-db-uri
```
### Running the Application
1. **Start the development server:**
```bash
npm run dev
```
2. Open your browser and navigate to `http://localhost:3000` to see the application in action.
### Building for Production
1. **Build the application:**
```bash
npm run build
```
2. **Start the production server:**
```bash
npm start
```
### Deployment
Deploy your application using a platform of your choice, such as Vercel, Heroku, or AWS. Make sure to configure the environment variables on your deployment platform.
## Project Structure
- **/components**: React components for the UI.
- **/pages**: Next.js pages.
- **/lib**: Library functions and utilities.
- **/styles**: CSS and styling files.
- **/public**: Static files.
- **/api**: API routes.
## Learn More
To learn more about the technologies used in this project, check out the following resources:
- [Next.js Documentation](https://nextjs.org/docs)
- [Stripe Documentation](https://stripe.com/docs)
- [TypeScript Documentation](https://www.typescriptlang.org/docs/)
- [MongoDB Documentation](https://docs.mongodb.com/)
- [Clerk Documentation](https://docs.clerk.dev/)
- [React-Hook-Form Documentation](https://react-hook-form.com/get-started)
- [Tailwind CSS Documentation](https://tailwindcss.com/docs)
- [Shadcn UI Documentation](https://shadcn.dev/docs)
- [Next Cloudinary Documentation](https://cloudinary.com/documentation/next_integration)
## Acknowledgements
- Special thanks to [Code With Phuc](https://www.youtube.com/watch?v=SR4dFgdKUyI&t=661s) and contributors of the libraries and services used in this project.