- MongoDB and Mongoose
- React.JS
- Node.js
- Express.js
- Stripe API
- Chakra UI
We wanted to build an ecommerce site using the MERN Stack to provide users a user-friendly UI and straightforward front-end functionality. Additionally, the MERN Stack proivded us as developers a fast and simple way to conncect our server and Mongo database with the front-end. Our site presents a user with a homepage with featured products but if a user wishes to look at a more extensive selection, then they can simply click on the "Shop" button in our easy to read navigation bar.
Our product cards have the name and price of our products as well as an add-to-cart button. Once a user adds the products they are looking for, then the cart icon in the navbar redirects them to a checkout page where after confirming their amount they are redirected to a third-party checkout service, Stripe.
Some challenges that arose were the implementation of Stripe and the population of the product page with a list of product cards which essentially meant conncecting our database with our product page.
Due to a time constraint, we didn't implement eveything we wanted. For example, for our product page, we wanted a search bar and filter mechanic. Similarly, we also wanted to create a way to view individual products cards. We also wanted to implement an admin page where sellers would be able to add thier products and post it for sale.
Please look over the "Test Credentials" section which comes after this section before clicking on the URL.
Here is our production URL:
https://powerful-sea-85828.herokuapp.com
To access every feature of the site, make sure to create an account which can be found in the navigation bar.
You can use the following credentials:
email: shop@4life.com
password: password
Untitled_.Feb.6.2022.7_55.PM.mp4
- Sebastian Lample, https://github.com/AstrosTech
- Bernard Kung, https://github.com/beanardk
- Chad Donahue, https://github.com/chadndonahue
- Derrick Alvarez, https://github.com/da-2005