gabriel-jesusvix / mycontacts

project to student with NodeJS, express, and ReactJS

MyContacts Project 💻

💻 MyContacts

Manage your contact list through the platform, where you can insert, update or remove a contact. You can also search and identify them by categories!

Learnings

• Create form and validation manually;
• Theme configuration with StyledComponents;
• React Portals;
• Custom hooks for httpclient, errors, others;
• Colors;
• Service layer;
• Optimization of SVG;
• Creation of Listeners events
• Data Mappers
• Implementation of Container/Presentational
• Animations and Keyframes
• Update React 18 and React Router V6
• Instructions SQL in Back-end

Functionalities

• List contacts
• List details contact
• Create new contact
• Delete contact;

👨‍💻 Tecnologias

These were the technologies used in this project!

Backend:

• Node.JS
• Express
• Express Async Errors
• Docker
• Postgres

Frontend:

• React
• React DOM
• React Router DOM
• Prop Types
• Styled Components
• Vite

Instalação

Rode os comandos abaixos para instalar a imagem do Postgres no Docker.

# Baixar a imagem
$ docker pull postgres

# Criar o container
$ docker run --name pg -e POSTGRES_USER=root -e POSTGRES_PASSWORD=root -p 5432:5432 -d postgres

# Caso não tenha iniciado automaticamente, rode:
$ docker start pg

# Para verificar se o container está rodando, rode:
$ docker ps

Após colocar o container para rodar, você precisará criar o Banco de Dados e as tabelas manualmente.

# Acesse o banco de dados
$ docker exec -it pg bash

# Entre no usuário que você criou, no caso, criamos o root
$ psql -U root

# Para criar o banco de dados, cole a instrução abaixo
$ CREATE DATABASE mycontacts;

# Acesse o banco recém criado
$ \c mycontacts

# Dentro do arquivo schema.sql, você encontrará o restante das instruções 
# para criar as tabelas necessárias da nossa aplicação

Install mycontacts with npm or yarn;

  git clone project;
  yarn or npm to install dependecies;
  cd folder mycontacts;
  yarn start;

Screenshots