/MERN-Marketplace

A full stack marketplace app

Primary LanguageJavaScriptMIT LicenseMIT

MERN Marketplace

Apollo-GraphQL Vite.js NPM Node.js React.js ChakraUI JWT React Router Heroku Visual Studio Code JavaScript HTML5 Markdown TypeScript CSS3 Git GitHub

Description

Our team developed MERN Marketplace in order to showcase our fullstack repetoire. This application aims to replicate the presentation and functionality of an E-Commerce site such as Etsy or Ebay. The team decided on this project as the world of E-Commerce has grown significantly in our lifetime. We divided coding responsibilities based on individual experience and confidence, as well as interest. Beyond this course, our goal is to develop the application to have greater user interface, more profile customizations, and to allow transactions between buyers and sellers.

Future goals for this project include:

  • Adding a section to display the user's username in the navbar when the user is logged in

  • Adding functional checkout process implementing Stripe for payments

  • Implementing inventory quanitities and updating the inventory state when an item is purchased.

  • User order history

  • Form to add and store user's data in the profile section

  • Ability to upload photos when creating an item instead of providing a link to the image

Table of Contents

Overview

MERN Marketplace allows users to buy and sell products on the site. Users can begin by creating a personal profile which will allow them to scroll through list pages where products are displayed for sale. Users also have the ability to sell their own products on their own unique listing page. Our buying and selling process is simliar to existing e-commerce sites as customers are prompted to provide shipping and payment information after adding items to their cart.

Usage

To run this project on localhost, you must first have Node.js and NPM installed. Clone the repository, run npm i in your terminal, and then once the NPM packages finish installing, run npm run dev. The command line will display success messages that will inform you that the Vite front end is now running on localhost:5173, and that the Apollo GraphQL backend is now running on localhost:3001. Navigate to localhost:5173 in your browser of choice to view the web page.

Screenshot

Desktop: Landing Page Screenshot


Mobile:

image

License

License: MIT

Resources

How To Develop A React and Express Application Using Vite

Chakra UI

Contact