SUPERCRIMP is an existing, small, local business that sells 3D-printed crimp holds for rock-climbing enthusiasts.
At the time of starting this project, the business hadn’t been able to find an appropriate website to host its online store, with some e-commerce platforms falling short of features and others being too complicated or expensive for a simple business.
Thus, the goal of this project was to build a customised online store that meets the needs of SUPERCRIMP’s stakeholders:
For customers
- It must be convenient to browse and make purchases.
- They must be able to pay securely online.
For the business owner
- It must be easy to view order details and mark them as complete.
- It must be easy to add, update and delete product listings.
Note: This is the frontend repo. The backend repo can be viewed here.
Coming soon
-
On the home page, customers can see the list of available products.
A scrolling banner gives information about the company and products.
Available products are listed below the banner.
-
Customers can click on each item to view more details on the ℹ️ Product page.
Ways to navigate to the Product Listing page. Customers can click on the Image, Product Name or View Details button on the Product cards.
This is what the Product Listing page looks like.
-
Customers can choose to 🛒 Add to cart from either view.
There is snackbar feedback for user actions (bottom left corner).
-
Customers can confirm their chosen products (including colour and quantity) on the 🛒 Cart page. They can click Continue shopping, which brings them back to the product catalogue, or Proceed to checkout.
They can also edit the items in their cart.
Clicking "Proceed to Checkout" will bring them to the 💳 Checkout page.
-
At the 💳 Checkout page, customers have to enter their name, email, mobile number, and shipping address. At the bottom, they will see a summary of their order. Clicking "Proceed to Payment Gateway" redirects them to Stripe to make payment.
Customers need to fill out all details before proceeding to make payment via Stripe.
-
Upon successful payment, customers are brought back to the SUPERCRIMP website, and an email with their order details is sent to their email address.
Customers have to provide Stripe with their email address and credit card details. A summary of items in their order is shown on the left of the screen.
Customers are sent an order confirmation email.
- Upon successful payment for a new order, Admin receives an email notification with the order details.
- On successful login to the Admin Dashboard, the admin sees an overview of Orders (Pending and Completed).
- They can see the details of each order, including:
- Items (Product, Quantity of product, Colour)
- Total amount
- Customer's name
- Customer's email
- Customer's mobile number
- Shipping address
- The admin can mark an order as complete once the items have been sent out.
Walkthrough of viewing orders and marking them as complete
Products refer to the different 3D-printed designs. Colours refer to the 3D-printing material.
- There are overview pages for Products and Colours, where the Admin can view all Products / Colours, as well as delete any unwanted ones.
- Admin is able to add a new product, or edit an existing one, with the following details:
- Product name
- Product description
- Colours
- Usual price
- Current price (for discounts)
- Availability
- Admin is able to add and edit colours with the following details:
- Colour name
- Colour hex code
- Availability
Walkthrough of adding, editing and deleting Products
Walkthrough of adding, editing and deleting Colours
| Tech | Purpose | |
|---|---|---|
| Frontend | React | User interface |
| React Router | Component routing | |
| Material UI | Component library | |
| Backend | Node.js | Server |
| Express | Server | |
| PostgreSQL | Database | |
| Sequelize | Database | |
| Functionality | Stripe | Payment |
| JWT | Authentication | |
| Twilio SendGrid | Email updates |