A full-stack online store (ecommerce + dashboard and CMS) where you can buy and sell products. Both store and admin websites were made from scratch meaning no third-party CMS is used! This website is a demo, made for educational purposes only therefore it does not sell real products.
Visit the websites from here:
This project is inspired by this video ❤️
To test payment, use Fawaterk test cards.
- Admin dashboard
- Log into your account using GitHub or Google.
- Create your custom shops.
- Customize your shop by changing their info (name, images, etc.), billboard, and adding properties.
- Add products to your shops.
- Customize your products by changing their info (name, images, price, etc.) or adding associated properties.
- Pagination when browsing products.
- Search easily for products, orders, and properties.
- Make discounts on your products.
- Track orders made by your customers.
- Concise summary of sales performance and trends with charts.
- Store
- Featured shops and products page.
- New products page where the latest products are displayed.
- Pagination when browsing products.
- Ability to filter products by properties added to the shop.
- Product information page where specific product information is displayed.
- Add products to the cart.
- Checkout with billing details.
- Payment gateway using Fawaterk.
- About & Contact Us pages.
- Admin dashboard
- Refer to the admin website and login using either GitHub or Google. Once done, you will be redirected to a page with a dropdown in the center where you can click and create a new shop.
- Create a new shop with any name you want, then it will navigate to shop homepage.
- Navigate to properties page using the navbar above. Then create new properties like "Size" for the name and FixedValues for the type then for the values: XS, S, M, etc.
- Navigate to products page and create a new product. Now you can add the property you recently added to your shop in your product.
- Navigate to settings page and obtain the shop's url. This is your shop page that will be displayed to your customers. Your product you recently added should be visible there.
- React.
- Next.js 13.
- Tailwind.
- PostgreSQL.
- Prisma.
- Cloudinary.
Clone the repo and navigate to it:
git clone https://github.com/devkarim/ecommerce-fake.gitcd ecommerce-fake
Use one of the following commands to install the packages:
npm iyarnpnpm i
Use one of the following commands to start the development server:
npm run devyarn devpnpm dev
This project is made by @devkarim.
This project is licensed under the MIT License - feel free to explore, modify, and share.