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.