Tech Market

Introduction

This is a student group project, in which all the technologies learned in the SoyHenry bootcamp come together. The project is a fully functional e-commerce of technology products on the user side, as well as on the side of the administrator or owner of the e-commerce.

Project Objetives

• Build a JavaScript App from scratch
• Afirm and conect all the learned concepts in the Carreer
• Learn and practice GIT workflow / team work
• Use Scrum agile methodology

Stack of Technologies

Front End:

HTML, CSS, Javascript, React, React-Bootstrap, Redux, SendGrid, Google and Mercado Pago Integration, Material UI, SASS

Back End:

Node.js, Express, Passport, Sequelize

Database:

PostgreSQL

Starting Instructions

IMPORTANT: Necesary version of node and NPM

• Node: 12.18.3 or higher
• NPM: 6.14.16 or higher

BoilerPlate

The boilerPlate has two folders: api and client. You can find the first folder 'client' in this repo and the second folder like 'PF-BackEnd' in this same github.

Inside api you must have to create a file called: .env that has the following form:

DB_USER=postgress
DB_PASSWORD=12345
DB_HOST=localhost:5432
PORT=3001
DB_KEY=techmarket
ACCESS_TOKEN=*****

# Auth Config
AUTH_SECRET=****
AUTH_EXPIRES=1d
AUTH_ROUNDS=10
CLIENT_URL=http://localhost:3000
GOOGLE_CLIENT_ID=*****
GOOGLE_CLIENT_SECRET=*****
SENDGRID_API_KEY=*****

You have to replace DB_USER and DB_PASSWORD with your own credentials to connect to postgres database. This file will be ignored by github, as it contains sensitive information (the credentials).

The DB_KEY is a random security keyword, you can change or keep it. The ACCESS_TOKEN is a security keyword to Mercado Pago, you can create one in this platform and make a success buy. In this link https://www.mercadopago.com.ar/developers/es/docs/checkout-api/integration-test/test-cards you can get all information to check a success buy in TechMarket.

In Auth Config you must generated your own Google and SendGrid credential to use this functionalities.

Next

Connect the data base

• Go to your postgres database manager and create a new database called techmarket, this is the name of the database to which we will connect.

Install the necesary package to run it

• Open the project console
  • Inside api folder, run the command line, npm install
  • Inside client folder, run the command line, npm install

Run the project

• Open the project console

  • Inside api folder, run the command line, npm start

  • Inside api folder, run the command line, node Api-Store.js and node Api-Users.js to create standard products and users.

  • Inside client folder, run the command line, npm start (go to http://localhost:3000/)

For testing

• You can find in api/index.js

  • conn.sync({ force: false }), switch it between " true " ( if you want reset database in each loaded ) or " false "( if you dont want reset database in each loaded )

• You can use a testing admin user with login credentials, look inside Api-Users.js to find admin users and a standard user.

Deploy Project

Live Proyect TechMarket: https://techmarketfront.vercel.app/

• You can create a standard user to see all funcionality or use this user like admin to see admin funcionality:
  • email: juan@gmail.com
  • password: 123456

Developers

• Bettina Gamboa:

  • Linkedin: https://www.linkedin.com/in/bettinagamboa/
  • Github: https://github.com/BeGamboa
  • email: bettinaigamboa@gmail.com

• Federico Faraz

  • Linkedin: www.linkedin.com/in/federicofaraz-fullstack
  • Github: https://github.com/cosm1co
  • email: federicofaraz@gmail.com

• Federico Romero

  • Linkedin: https://www.linkedin.com/in/federico-romero-fullstack
  • Github: https://github.com/RomeroFederico
  • email: romerof14@gmail.com

• Nicolas Burgos

  • Linkedin: https://www.linkedin.com/in/nicolas-exequiel-burgos-fullstackdeveloper/
  • Github: https://github.com/NicoPR22
  • email: nicolasexeburgos@gmail.com

• Enzo Sanchez

  • Linkedin: https://www.linkedin.com/in/enzo-sanchez-733b85165/
  • Github: https://github.com/Enzos97
  • email: enz997.ing.ind@gmail.com

• Lucas Battaglia

  • Linkedin: https://www.linkedin.com/in/battaglialucas/
  • Github: https://github.com/battaglialucas
  • email: lucassebastianbattaglia@gmail.com

• Horacio Abitu

  • Linkedin: https://www.linkedin.com/in/horacioabitu/
  • Github: https://github.com/dev-back55
  • email: ahabitu@gmail.com

• Gabriel Pitrella

  • Linkedin: https://www.linkedin.com/in/gabrielpitrella
  • Github: https://github.com/gpitrella
  • email: gabrielpitrella@gmail.com

Project Screens

• Landing-Page

• Home Page when we go in

• Register, we can do it using the ecommerce platform (by form) or authenticate with github.

• Store products

• Custom your PC

• Products in detail

• User Profile

  • We can add reviews to the products that we had purchase
  • Order Details

• Cart

• Whish List

• Checkout. You can pay using paypal or with a debit/credit card

• There is an admin section where we have a CRUD of products, categories, orders and users.

  • Admin Panel view all products and admin can edit each product.
  • Admin can view all orders and update each order.
  • Admin can edit each categories and brand or create and detele this.