FSHN - an E-Commerce Platform for apparel 👗💻
Project 1 for [CS-1202] Advanced Programming. This is a MERN stack e-commerce (clothing store) website. This project was built by Ruthu Rooparaghunath, Soham De, and Tanvi Roy.
Quick Start
Open up a CLI, and execute the following commands:
$ git clone https://github.com/tanviroy/fshn.git
$ cd fshn
$ npm install
$ npm start
$ cd frontend
$ npm install
$ npm start
This should get your server to run at localhost:5000 and frontend to run at localhost:3000
Project Details
This project was built using the MERN stack of technologies.
Major Technologies Used
| Area | Technology |
|---|---|
| Front-End | React, React-Bootstrap, CSS3 |
| Authentication | Passport.js, bcrypt.js |
| Back-End | Node.js, Express, Mongoose |
| Cookie/Database Management | CookieParser, MongoDB, Mongoose |
Database
| Defined Schemas | Schema fields |
|---|---|
| Users | username: String, googleId: String, email: String, password: String, address: { type: String, default: "home" }, mobile: Number, orders: [{ type: String }], cart: [{ type: String }], wishlist: [{ type: String }], |
| Products | name: String, description: String, category: [{ type: String }], color: [{type: String}], gender: [{type: String}], imageurl: String, price: Number, rating: [{ type: Number }], reviews: [{ body: String, user: String, verified: String }], buyers: [{ type: String }], wishers: [{ type: String }], |
Codebase Structure
.
├── backend/
│ ├── data.js
│ ├── passportConfig.js
│ ├── product.js
│ ├── server.js
│ └── user.js
├── frontend/
│ ├── public/
│ └── src/
│ ├── components/
│ ├── Pages/
│ ├── App.css
│ ├── App.js
│ ├── font.ttf
│ ├── index.css
│ └── index.js
├── .babelrc
├── .gitignore
├── helper.txt
├── package-lock.json
├── package.json
└── README.md
Code Documentation
For a more detailed documentation of our code and the complete list of project dependencies see Helper.txt.
Design
Logo design and concept banners can be viewed here
Demo
Home Page
Shop - Search, Filter, Products
Product Page - Details and Reviews
Login Page - Register, Login with FSHN account or Google OAuth
Cart Page - Add/Remove to Cart
User Profile - Update Info, View User Insights
Citations
Nearly all of the project code was written by us ourselves. We used documentation code for React Bootstrap, Express, and Passportjs where needed.
- Vertical Column Image Expansion CSS snippet
- All our products have been taken from H&M and we were greatly inspired by their features and minimal design.