gbowne1 / fashion-marketplace

E-commerce Project Built with MongoDB, Express, React, Node.js, and MUI. Browse and purchase products online.

fashion-marketplace

E-commerce Project

Introduction

This is an e-commerce project built using MongoDB, Express, React, Node.js, and Material UI/MUI. It allows users to browse and purchase products online.

Technologies Used

• MongoDB
• Express
• React
• Node.js
• Material UI/MUI
• Jest & React Testing Library

Installation

1. Clone the repository: git clone https://github.com/gbowne1/fashion-marketplace.git
2. cd to /src/client
3. Install dependencies: npm install
4. cd to /src/server
5. Install dependencies: npm install

Starting the project

1. Set up the database: [instructions here]
2. cd to /src/client
3. Start the react dev server: npm start
4. cd to /src/server
5. start the server: node server.js

Usage

1. Open the application in your browser.
2. Sign up or log in to your account.
3. Browse the products and add them to your cart.
4. Proceed to checkout and complete the payment process.
5. Receive a confirmation email with your order details.

Screenshots

API Documentation

The API documentation can be found here.

Database Schema

The database schema is as follows:

// Insert your database schema here

Deployment

The project is not deployed anywhere yet. We are still in development and not even MVP or alpha or beta stage yet.

Contributing

Contributions are welcome! Please follow these guidelines:

1. Fork the repository.
2. Create a new branch: git checkout -b feature/your-feature
3. Make your changes and commit them: git commit -m 'Add some feature'
4. Push to the branch: git push origin feature/your-feature
5. Submit a pull request.

License

This project is licensed under the MIT License.

Acknowledgements

fashion-marketplace's Issues

Fix Top Navbar

Fix the top navigation bar

• restyling including make surely that the navbar is 40px to 65px max across all devices
• add shopping cart icon and link it to the ShoppingCart.jsx
• Make sure the buttons/links go to the correct pages
• add a search bar that searches the site only not google, etc.

Not sure what a good ecommerce app would have in the topnav

[TODO] Create Terms and Conditions & Privacy Policy pages

Accessible from the footer, Create and route Terms and Conditions and Privacy Policy pages

[TODO] Make the App's AppBar/TopNav

Using @mu/icons-material, use the following icons to create an appbar (from left to right)

Create a 60px high AppBar using AppBar & Toolbar from mui

Use these icons in an order that makes sense:

Menu, Search, Shopping/Cart, User/Account/Avatar, a Logo Icon, Home, Notification/Bell, Filter, Sort, Language/Currency Settings, Payment

[TODO] Add and fix routing

I am on the fence about how the actual product routes will be. Since this restore will be used by a womens clothing store the routing should be able to be used for a different set of products

Theres a few options:

• /product/:I'd
• /product/lingerie/; lingerie/bras; /panties /hosiery; /shoes etc etc
• /lingerie/
  Or just
• /bras, lingerie, panties, shoes, hosiery, swimwear, bestsellers etc

[TODO] Add MUI drawer component

Add a @mui/material component that opens when you click the Menu icon.

The drawer component must not cover the Appbar/Toolbar when open.

{... will edit this issue to include the navigation requirements for the drawer soon. }

[Todo] Fix Footer

This is a todo action item

Fix the Footer so that it has the features of a decent ecommerce app.

• Store Location(s)
• store hours
• contact information
• Google map
• CTA for newsletter/email updates/coupons?
• column of links back to resources
• copyright information

[TODO] Add dark mode / light mode thene toggle

The top Navbar needs a dark mode/ light mode theme switch.

Switching to dark mode the theme could be black and gray with some font color in the pink range of #ff in hex.

Add the toggle Icon from MUI @mui/icons-material

[TODO] Fix the ProductCard so it will interact

Clicking on the add to cart or buy now button in the Product card should place the item in the cart using the ShoppingCart and a CartContext file.

Create a CartContext so that the ProductCard works in conjunction with the ShoppingCart.

The card should also trigger reviews using the Stars, Displaying current prices, displaying a unavailable status, etc.

There might be an API and a product database for this.

[TODO] Add cart and or cart page

• This is a Frontend and Backend task

Frontend

• Add

Backend

• Add routes
• API?
• Database

[TODO] Set up nodemon to watch port 3000

I installed nodemon on /src/server and added nodemon.json

Set up nodemon

Products need to be reviewable

The current version of the ProductCard has Stars for reviews but theres no way to actually review the item(s) in a textual manner.

Create a component with MUI v5 @mui that allows reviews and stars.

[TODO] Create a cookie accept modal

To comply with GDPR, etc. this app needs a Cookie Accept modal

[TODO] work on improving server and backend and db

I have created a /src/server.js however several things need to be done:

• Set up express
• Make the initial routes
  Including 404 Not Found and the root route /.
• Set up middleware
• set up routers
• Make logs with Morgan & Winston
• set up helmet and cors for XSS, XHR, etc.
• set up bcrypt, axios, passport, jwt for login and logout functionality.

Improve the backend and database by adding:

• an example .variable.env with the port number and mongodb connection string.
• ensure that can be consumed by MongoDB Atlas, Compass and also mongod, mongo, mongosh, mongoose.
• Create a utility that creates a test user in the user collection of the database

The database will be called fashionmarket.
I have installed the most commonly used packages to the server package.json file

[TODO] Fix Footer

Fix the footer.

• It's too tall
• Needs Terms and Conditions link
• Needs Privacy Policy link
• Social Icons need correct colors
• Payment method
• Include boilerplate contact information
  (company name, logo and contact details such as your physical address, email, and phone number)
• Link to information on shipping and returns policies, and FAQs.