Sharifah Food is a food processing company that specialises in the ready meals market. Over the years, Sharifah Food had to manually take orders from its customer through WhatsApp and record the sales data in Excel sheets. Nevertheless, it was discovered that it became difficult to keep track of all sales, orders, and inventory as the company grew. Therefore, this project aims to implement a responsive e-commerce platform to integrate with the computerised inventory management system to further streamline the company's business.
Sharifah Food applies Multi-level Marketing (MLM) system to sell its products. The customers can apply as agents or dropshippers to promote and sell the company's products by purchasing the products at discounts. For instance, an agent and a dropshipper can receive 30 percent and 20 percent discounts, respectively, if they order a large quantity of products.
NOTE: This project is only for demonstration purposes. Please do not enter any sensitive information on the website.
https://fyp-shrf-ecommerce.herokuapp.com/
-
Register as Customer
Although users can use the system without registering, they can register as customers to enjoy all available features. -
Register as Agent or Dropshipper
The users can register as agents or dropshipper by filling the registration form on the website. However, users who have submitted the registration form are not compulsory becoming as agents or dropshippers. The decision lies with the stockist (admin). -
Login
The users who have registered can log in to the system using their emails and passwords. -
Promotional Packages Management
The admin can manage the promotions by adding new promotional packages as well as modifying and deleting the existing promotional packages. -
Profile Management
The registered users can manage their profiles by changing their current password, email, gender, adding and saving addresses for future orders, etc. -
Browse Items
The users can view all the products and promotions sold by the company through the website and mobile application. -
View Item
The users can view the details of the item by selecting the item while browsing. All the information about the item will be displayed to the user. -
Add item to Shopping Cart
The users can add the items to their shopping carts. The shopping cart can contain as many items as the user wants, but it cannot store out-of-stock items. Also, the cart can only be kept for unregistered users until the cache of their devices is cleared. -
Search Item
The users can search for items by entering the keywords of the items. -
Order History
The users can search for the order by entering their email and order number, which can be found in the order confirmation email. In case of the registered users, They can view the list of their order history on the order history page. -
Checkout Order
The users can check out the items in their shopping cart. Users can also confirm their delivery address, order summary and payment methods before paying their orders. Unregistered or registered users without shipment details will have to enter the shipment details. -
Payment
The users can pay for their orders during the checkout process. Two methods of payment are available: Credit or debit card and FPX online banking. The payment process is integrated with Stripe as a payment gateway. -
Notification
The system automatically notifies the users of the order updates via email.
- Django (Python)
- React TypeScript
- PostgreSQL (with Heroku)
- Redis (with Heroku)
- Stripe
- Cloudinary
- Gmail SMTP
- Ant Design
- LESS
- Heroku
- Progressive Web Application (PWA)
- SQL Database
- Cloudinary Account
- Stripe Account
- SMTP Account
- Redis
- Python 3.10.2
- Yarn
- Install the frontend packages using yarn.
yarn install
- Install the backend packages using pip from requirements.txt.
pip install -r requirements.txt
- Create .env to configure environment variables as follows:
ALLOWED_HOSTS=<any hosts seperated by ","> ('127.0.0.1,localhost') CORS_ORIGIN_WHITELIST=<any origin seperated by ","> ('http://localhost:3000,http://127.0.0.1:3000') CSRF_TRUSTED_ORIGINS=<any origin seperated by ","> CLOUDINARY_NAME=<your cloudinary name> CLOUDINARY_API_KEY=<your cloudinary api key> CLOUDINARY_API_SECRET=<your cloudinary api secret> DATABASE_NAME=<your database name> DATABASE_USER=<your database user> DATABASE_PASSWORD=<your database password> DATABASE_HOST=<your database host> DATABASE_PORT=<your database port>' DEBUG=True EMAIL_HOST_USER=<your email to send notification> EMAIL_HOST_PASSWORD=<your email SMTP password> REDIS_TLS_URL=<your Redis TLS url> REDIS_URL=<your Redis url> SECRET_KEY=<django app secret key> STRIPE_PUBLISHABLE_KEY=<your Stripe publisable key> STRIPE_SECRET_KEY=<your Stripe secret key> STRIPE_WEBHOOK_SECRET=<your Stripe webhook secret key>
- Migrate your database.
python manage.py migrate
- Build the React App using yarn.
yarn build
- Run the server.
python manage.py runserver
- Register as Customer
- Register as Agent or Dropshipper
- Login
- Browse Items
- View Item
- Shopping Cart
- Address Book
- Checkout Order
- Order History
- Search Order
- Order Details
- Profile Management
- PWA Installation
https://tinyurl.com/YJFYPPOSTER
Thanks goes to these wonderful people (emoji key):
Tan Yuan Jie οΈοΈοΈοΈβΏοΈ π¬ π π» π£ π¨ π π‘ π€ π π§ π§βπ« π¦ π π π¬ π π‘οΈ π’ |
This project follows the all-contributors specification. Contributions of any kind welcome!