Tech Stack

Website (images below in case website is down or expired)

Website: https://commerce-app-fe.onrender.com/

Frontend

Language: Typescript
Library + Framework: Vite
Styling: HTML + CSS + Tailwind + DaisyUI
Router: React Router v7
Context: Tanstack Query
Notifications: Toastify
Linter: ESLint + Prettier
Deployed On: Render

Backend

Language: Ruby, Ruby on Rails
Database: PostgreSQL
Deployed On: Self-Deployed w/ Docker + Ngrok

Customer-Facing Frontend Images

Main Page

Popular Categories

Newest Products

Social Programs

Footer w/ CTA

Sign Up

Login

View Profile

Edit Profile

Men's Category

Products per Men's Category

View Product w/ Cart Modal

View Product Details

Searchbar Filter

First Checkout Page

Second Checkout Page w/ Selectable Existing Address

Change Address Modal on Checkout Page

Add New Address on Checkout Page

After-Purchase Page

Receipts Page showing Delivery Progress in Storage

Receipts Page showing Delivery Progress In-Transit

Receipts Page showing Delivery Progress finally delivered

Other Pages at Night Mode

Near-Complete Entity Relationship Diagram of our Project

Test Layouts in Figma