F.E.C. is an E-Commerce web application built with React and Express. This project was designed to grow our abilities to work in teams while building, maintaining, and optimizing a fully functioning webpage using React JS. Each team member was responsible for a single component that interacts with and manipulates the application as a whole. This allowed each of us to utilize new technologies while strengthening our understanding of front-end development.
Theme Toggle: Light & Dark Themes
Main Product Overview & Cart Menu
Product Overview displays a primary product with product information:
- A gallery of product images
- An assortment of styles to select for each product
- Product descriptions, slogans, features, and pricing
- Size and quantity available
Ratings and Reviews
Ratings and Reviews displays dynamically rendered user reviews for the selected product:
- Average Rating represented by number and stars
- Filterable rating breakdown section
- Product breakdown section
- Sort review options by relevant, helpful, or newest
- User can mark helpful or report a review
Write New Review
User can add new review for the selected product:
- Dynamic form subcomponents rendering based on selected product
- Client-side form Input validations
- Upload Image Options
To download a copy of this project to your local machine:
$ git clone https://github.com/RFE2202-FEC-Zion-Narrows/FEC-Project.git
Acquire a github personal access token to acquire access to the API. Insert token into example.config.js and rename file to config.js
Runs the app in the development mode.
$ npm install
$ npm run dev:react
$ npm run startOpen http://localhost:3000 to view it in the browser.
- Sabrina Gortz - Product Overview
- Hailee Lu - Related Products, Questions and Answers
- Katy Feng - Ratings and Reviews, Navigation bar, Shopping Cart Sidebar
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent