Full Stack E-Commerce platform with admin panel and online store within a single project. Stripe is employed for secure and reliable payment transactions, while modern technologies such as Next.js, React, TypeScript, MongoDB, AWS S3, ShadCN, and Tailwind CSS for user experience, and administrative experience.
- Sales Overview Graph:
- Monitor sales growth and trends through interactive graphs.
- Add, Edit, and Delete Products:
- Efficiently add, update, and remove products from the admin panel.
- Category Management:
- Add, edit, or delete product categories.
- Size Management:
- Add, edit, or delete available product sizes.
- Billboard Management:
- Create, customize, or delete billboards for featured products.
- Add New Users:
- Enhance user experience by adding new users.
- Assign Administrator Privileges:
- Assign administrator privileges to users from the Admin Panel.
- Top Categories Display:
- Explore top categories right on the home page for easy navigation.
- Featured Products Showcase:
- Discover highlighted and featured products for an engaging shopping experience.
- Search Functionality:
- Quickly find products using the search bar.
- Product Listing:
- View all available products in one place.
- Category Filters:
- Narrow down your search using category filters.
- Price Range Filters:
- Set a specific price range for more targeted results.
- Sorting Options:
- Sort products by price (ascending/descending) and view the latest arrivals.
- Product Details:
- View detailed information, including images and available sizes.
- Add to Cart:
- Easily add products to your shopping cart for a seamless checkout process.
- Review and Edit Cart:
- View and modify items in your shopping cart.
- Proceed to Checkout:
- Move seamlessly from the cart to the checkout process.
- Next.js
- React
- TypeScript
- MongoDB
- AWS S3
- ShadCN
- Tailwind CSS
- Material-UI
Admin Panel
Store
This is a Next.js project bootstrapped with create-next-app.
First, run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun devOpen http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.
This project uses next/font to automatically optimize and load Inter, a custom Google Font.
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.