It is a website created as a project for Henry. It is a music store where you can find your favorite items and buy them through Mercado Pago. You can browse it as a guest, registered user or store administrator.
Our app is deployed in Heroku and Vercel, so you can view it in your browser clicking 🎵 HERE🎵 to see the DEMO.
-
To build the Back, we used PostgreSQL and Sequelize, from there we created all the necessary tables to structure the content.
-
With the help of Express we created all the routes to connect the information and to be able to implement the CRUDS in the Front.
-
And finally with Passport, we proceeded to protect these routes and implement a registration system that allows the user to join the page.
The Front was developed with React, and Redux to optimize the processes. It has the following components
It has a controlled form with a search input, which triggers requests to the API in the Back-end.
This component will display a series of products (obtained from the API) using the product card. It also allows you to sort the products according to categories. Each card will show the image, title, price and available stock.
It has a shopping cart to add products and shows details of the purchase, it will redirect to the payment platform to purchase them.
It has specific features for each type of user. As a guest, you can browse through the Store and add products to your cart. As a registered user, you can make purchases and track your orders. As an administrator, you have full permissions to add, edit and delete products, categories, stock, among others.
- Fork the repo into your GitHub account or clone it on your PC.
git clone https://github.com/Lis-cyber/DubsNip.git- Then you must install all the dependencies on both, the back (api folder) and the front end (client folder).
npm install- You must ensure that your version of Node is equal to or greater than V.14.
node -v- In api and client you will have to create a file named: .env with the following form, filling each one of the variables:
DB_USER=userPostgreSQL
DB_PASSWORD=passwordPostgreSQL
DB_HOST=localhostPostgreSQL
PORT=1337
JWT_SECRET
GOOGLE_CLIENT_ID
GOOGLE_CLIENT_SECRET
MAILGUN_API_KEY
MAILGUN_DOMAIN
MERCADOPAGO_ACCESS_TOKEN
API_URL=http://localhost:1337
CLIENT_URL=http://localhost:3000- Finally initialize the App with the following command in both terminals.
npm start--> 🎹 Lis Jardim
--> 🥁 Sixto Acuña
--> 🎻 Laura Puccinelli
--> 🎸 Franco Ascarate
--> 🎤 Juan Arancibia
--> 🎷 Joaquin Franco