☰
GreenHarvest Full-stack Web Project
Year: 2024
Frontend and backend development for an ecommerce website specializing in organic produce sales. The goal is to implement distinct functionalities for regular users, VIP users, and administrators, along with creating a database. The tech stack includes JavaScript, React for the frontend, Node.js for the backend, PostgreSQL for the database, and Git for version control.
Process Overview
The project spanned a month and involved collaborative work within a team of four members. Drawing on my experience in UI/UX, I crafted personas, developed user flows, and created wireframes. Additionally, I actively contributed to both front-end and back-end coding tasks, working on CSS styling throughout the process. The main focus was on implementing a set of functionalities to ensure customers have a user-friendly shopping experience.
Project Goals
- see that a product has an image, a price, and a description
- see the total amount in their cart and orders
- increment and decrement items in their cart
- delete a product when decrementing a quantity to zero
- see an error message if their credentials are not correct
- create a new account and edit their profile settings
- add a shipping address to an order
- see and create reviews for products
- search for products
- add and remove products from a wish list
- add products in a wish list to cart
A user should be able to:
- see their status as a vip user
- see vip products that regular users don't have access to
- add to cart and purchase vip products
A VIP user should be able to:
- add and edit products
- add and edit images of products
- see all users and the status of each user
An administrator should be able to:
Functional Map
Wireframes
Typography & Color
#51B196
#3B3B3B
Final Layout
Products Page For Users
Single Product Page
Cart
Products Page For Non-Users
Sign Up Page
