👤 Aplicação de registro de usuários. Desenvolvido com Next.js, Sass, TypeScript, Node.js e Docker.

Overview

👤 Registrado

Aplicação de registro de usuários capaz de criar, ler, atualizar e deletar usuários do banco de dados (CRUD). O projeto é dividido em Front-end e Back-end, ambos os ambientes (e o banco de dados) são executados dentro de um container criado pelo Docker Compose 🐳 .

🧰 Desenvolvido com
  • Next.js
  • Sass/Scss
  • TypeScript
  • Node.js
  • Express
  • Prisma
  • PostgreSQL
  • Docker
🔧 Instalação

⚠️ É necessário ter o Docker e o Docker Compose instalados na sua máquina para executar esse projeto em containers.

  • Clone este repositório:
git clone [email protected]:adilsongb/registrado-app.git
  • Acesse a pasta do projeto:
cd registrado-app
  • Suba os containers da aplicação usando o comando do Docker Compose:

📌 O processo de instalação das dependências é feito durante a construção do container de cada ambiente.

docker-compose up

⚠️ O ambiente de desenvolvimento é criado através do arquivo docker-compose.yml! Com ele os containers de Back e Front são atualizados a cada mudança feita nos arquivos do projeto.

  • Tudo certo! Você pode acessar a aplicação nos seguintes endereços:
    • Front-end: http://localhost:3000/
    • Back-end: http://localhost:3001/
💻 Deploy
  • O deploy é realizado na plataforma do Heroku. Links das aplicações:
  • O deploy de ambos os ambientes (Front e Back-end) é executado automaticamente através do GitHub Actions. Qualquer mudança feita na branch main do repositório remoto do projeto já inicia o processo de deploy.
  • O arquivo da action de deploy se encontra em: .github/workflows/main.yml.
💡 Dica
  • No projeto há um arquivo app.code-workspace, com ele é criado um workspace no VSCode separando o Front-end e o Back-end da aplicação.

Back-end

  • O back-end da aplicação foi desenvolvido com Node.js, TypeScript, Express e Prisma. A aplicação pode ser acessada localmente (Se o container estiver em execução) no endereço http://localhost:3001/.
📁 Organização
└── 📂 registrado-app
    ├── 📂 backend
    |   ├── 📂 prisma
    |   |   ├── 📁 migrations               // Histórico de migrações de schema do Prisma
    |   |   ├── 📄 seed.ts                  // Arquivo com os dados iniciais do DB
    |   |   └── 📄 schema.prisma            // Arquivo que referencia e configura as tabelas do DB
    |   └── 📂 src
    │       ├── 📂 database
    │       |   └── 📄 connection.ts        // Faz a conexão com o banco de dados através do Prisma Client
    |       ├── 📁 models                   // Pasta com arquivos que se comunicam diretamente com o DB
    |       ├── 📁 services                 // Pasta com arquivos que fazem conexão com o cliente e o DB
    |       ├── 📁 controllers              // Pasta com arquivos que se comunicam diretamente com o cliente
    |       ├── 📁 interfaces               // Pasta com interfaces de tipagem de objetos
    |       ├── 📁 validations              // Pasta com as validações executadas pela biblioteca Joi
    |       ├── 📁 middlewares
    |       |   └── 📄 error.ts             // Middleware para tratamento de erros da API
    |       ├── 📁 routes                   // Pasta com as rotas (Endpoints) da API
    |       └── 📄 server.ts                // Arquivo de configuração e inicialização da API
    └── 📁 frontend
🎯 Endpoints

GET

  • /users/page/:page

    • Retorna um array contendo 10 usuários. Dependendo do número passado no parâmetro :page apenas uma fração especifica de usuários é retornada, por exemplo: O endpoint /users/page/2 retorna os usuários de ordem 11-20. (Endpoint criado especialmente para dar o efeito de paginação no Front-end)

      🪃 Exemplo de retorno
      [
        {
          "id": 1,
          "name": "Adilson Gabriel",
          "email": "[email protected]",
          "password": "F4MAJVQ3hkFElTb",
          "createdAt": "2022-05-26T21:42:34.364Z"
        },
        {
          "id": 2,
          "name": "Carlos Nogueira",
          "email": "[email protected]",
          "password": "GsI2Y00ca05Lftu",
          "createdAt": "2022-05-26T21:42:34.364Z"
        },
        {
          "id": 3,
          "name": "Amanda Sousa",
          "email": "[email protected]",
          "password": "Up6CsttZ6mmKbcd",
          "createdAt": "2022-05-26T21:42:34.364Z"
        },
        {
          "id": 4,
          "name": "Bernardo Gomes",
          "email": "[email protected]",
          "password": "IrbWXLmxziRXLlu",
          "createdAt": "2022-05-26T21:42:34.365Z"
        },
        {
          "id": 5,
          "name": "Beatriz Castro",
          "email": "[email protected]",
          "password": "sfD551gbKmfad9u",
          "createdAt": "2022-05-26T21:42:34.365Z"
        },
        {
          "id": 6,
          "name": "Eliza Marcena",
          "email": "[email protected]",
          "password": "5yF8V4CEhUXtub6",
          "createdAt": "2022-05-26T21:42:34.365Z"
        },
        {
          "id": 7,
          "name": "Matheus Santos",
          "email": "[email protected]",
          "password": "C4BDJ0pmghaKgEz",
          "createdAt": "2022-05-26T21:42:34.365Z"
        },
        {
          "id": 8,
          "name": "Joyce Vizoto",
          "email": "[email protected]",
          "password": "iArEIBlEA1mHow0",
          "createdAt": "2022-05-26T21:42:34.365Z"
        },
        {
          "id": 9,
          "name": "Anthony Barbosa",
          "email": "[email protected]",
          "password": "KYfqh4UcjRFbQao",
          "createdAt": "2022-05-26T21:42:34.365Z"
        },
        {
          "id": 10,
          "name": "João Marcelo",
          "email": "[email protected]",
          "password": "PSfasLke187BBzT",
          "createdAt": "2022-05-26T21:42:34.365Z"
        }
      ]
  • /users/get/:id

    • Retorna um objeto contendo o usuário que possui o id passado pelo parâmetro.

      🪃 Exemplo de retorno

      /users/get/1

      {
        "id": 1,
        "name": "Adilson Gabriel",
        "email": "[email protected]",
        "password": "F4MAJVQ3hkFElTb",
        "createdAt": "2022-05-26T22:19:19.023Z"
      }
  • /users/find?[email || name]=[string]&skip=[number]

    • Retorna um array contendo todos os usuários filtrados pela query. O endpoint aceita filtrar pelos atributos email e name. A query skip deve ser obrigatória para criar o efeito de paginação caso a pesquisa retorne mais que 10 usuários.

      🪃 Exemplo de retorno

      /users/find?email=hotmail&skip=1

       [
         {
           "id": 11,
           "name": "Lila Hudson",
           "email": "[email protected]",
           "password": "OoscW4dbwZZAcPy",
           "createdAt": "2022-05-26T22:31:09.228Z"
         },
         {
           "id": 12,
           "name": "Royne Tremblay",
           "email": "[email protected]",
           "password": "QtWFaPmp51NyrgO",
           "createdAt": "2022-05-26T22:31:09.228Z"
         },
         {
           "id": 16,
           "name": "Rosella Nogueira",
           "email": "[email protected]",
           "password": "Bm9iXnpnmAyoVVi",
           "createdAt": "2022-05-26T22:31:09.228Z"
         },
         {
           "id": 35,
           "name": "Vilma Dincley",
           "email": "[email protected]",
           "password": "AJr9AiPzekXP_lQ",
           "createdAt": "2022-05-26T22:31:09.229Z"
         },
         {
           "id": 36,
           "name": "Katheryn Wunsch",
           "email": "[email protected]",
           "password": "ie9ZNkeTfEjYyy8",
           "createdAt": "2022-05-26T22:31:09.229Z"
         },
         {
           "id": 40,
           "name": "Willie Cruick",
           "email": "[email protected]",
           "password": "5Owmrjbdbrj1W8t",
           "createdAt": "2022-05-26T22:31:09.229Z"
         },
         {
           "id": 41,
           "name": "Erick Wisoky",
           "email": "[email protected]",
           "password": "x4F7vq58SGdyEa7",
           "createdAt": "2022-05-26T22:31:09.229Z"
         },
         {
           "id": 42,
           "name": "Melvin O'connell",
           "email": "[email protected]",
           "password": "sdIKcjKjyQEyuDC",
           "createdAt": "2022-05-26T22:31:09.229Z"
         },
         {
           "id": 44,
           "name": "Shanel Cronack",
           "email": "[email protected]",
           "password": "GVHapyvXJeAujfd",
           "createdAt": "2022-05-26T22:31:09.230Z"
         },
         {
           "id": 46,
           "name": "Corbin Satthy",
           "email": "[email protected]",
           "password": "WBwH0mLhos6vTkq",
           "createdAt": "2022-05-26T22:31:09.230Z"
         }
       ]

      /users/find?name=gabriel&skip=1

       [
         {
           "id": 1,
           "name": "Adilson Gabriel",
           "email": "[email protected]",
           "password": "F4MAJVQ3hkFElTb",
           "createdAt": "2022-05-26T22:31:09.227Z"
         }
       ]
  • /users/count?[email || name]=[string]

    • Retorna a quantidade de usuários registrados no banco de dados. O endpoint aceita uma query que filtra a quantidade de usuários com email ou name especifico.

      🪃 Exemplo de retorno

      /users/count

      50

      /users/count?email=hotmail

      12

POST

  • /users/create

    • Registra um novo usuário no banco de dados. O endpoint deve receber na requisição um body com o seguinte objeto:

      {
        "name": "Daenarys Targaryen",
        "email": "[email protected]",
        "password": "drogodracarys"
      }
    • As seguintes validações do Joi são consideradas:

      • name: É obrigatório na requisição, deve ser uma string e ter no mínimo 6 caracteres;
      • email: É obrigatório na requisição, deve ser uma string e ter o formato [email protected];
      • password: É obrigatório na requisição, deve ser uma string e ter no mínimo 8 caracteres.

      🪃 Exemplo de retorno
      {
        "id": 51,
        "name": "Daenarys Targaryen",
        "email": "[email protected]",
        "password": "drogodracarys",
        "createdAt": "2022-05-26T23:21:26.932Z"
      }

PUT

  • /users/update/:id

    • Atualiza as informações de um determinado usuário com base no :id passado por parâmetro. A requisição deve ter um objeto com os atributos que serão atualizados no banco de dados, por exemplo:

      {
        "email": "[email protected]"
      }
    • As seguintes validações do Joi são consideradas:

      • name: Deve ser uma string e ter no mínimo 6 caracteres;
      • email: Deve ser uma string e ter o formato [email protected];
      • password: Deve ser uma string e ter no mínimo 8 caracteres.

      🪃 Exemplo de retorno
      {
        "id": 1,
        "name": "Adilson Gabriel",
        "email": "[email protected]",
        "password": "F4MAJVQ3hkFElTb",
        "createdAt": "2022-05-26T22:31:09.227Z"
      }

DELETE

  • /users/delete/:id

    • Deleta um usuário do banco de dados de acordo com o :id passado por parâmetro.

      🪃 Exemplo de retorno

      /users/delete/5

      {
        "id": 5,
        "name": "Beatriz Castro",
        "email": "[email protected]",
        "password": "sfD551gbKmfad9u",
        "createdAt": "2022-05-26T22:31:09.227Z"
      }
💾 Banco de dados
  • A aplicação utiliza o banco de dados PostgreSQL, criado pelo Docker Compose, para armazenar os dados, ou seja, não é necessário ter o PostgreSQL instalado na máquina.


    🔷 Comandos do Prisma

    ⚠️ Os comandos a seguir devem ser executados no terminal do container de Back-end!

    • Reseta o banco de dados: npx prisma migrate reset --force;
    • Registras os usuários de seed.ts: npx prisma db seed;
      • Use este comando quando o banco de dados estiver vazio.

Front-end

Captura de tela 2022-05-25 - 18 32 04

  • O front-end da aplicação foi desenvolvido com Next.js, TypeScript, Sass e Axios. A aplicação pode ser acessada localmente (Se o container estiver em execução) no endereço http://localhost:3000/.
📁 Organização
└── 📂 registrado-app
    ├── 📂 frontend
    |   ├── 📂 components                   // Pasta com os componentes Next.js da aplicação
    |   ├── 📂 contexts                     // Pasta com o Context API e Provider
    |   ├── 📂 hooks
    |   |   └── 📄 useMediaQuery.ts         // Hook auxiliar para responsividade da aplicação
    |   ├── 📂 interfaces                   // Arquivos de tipagem de dados
    |   ├── 📂 pages                        // Pasta com as páginas da aplicação
    |   ├── 📂 public                       
    |   ├── 📂 services                     
    |   |   └── 📄 api.ts                   // Arquivo de conexão com a API através do Axios
    |   ├── 📂 styles                       // Estilos da aplicação feito em Scss
    |   ├── 📄 Dockerfile                   // Arquivo de configuração do container Docker
    |   └── 📄 tsconfig.json                // Arquivo de configuração do TypeScript
    └── 📁 backend
You might also like...

An example T3 app containerized with Docker, Docker Compose, and deployed on Railway

Create T3 App This is an app bootstrapped according to the init.tips stack, also known as the T3-Stack. What's next? How do I make an app with this? W

Dec 19, 2022

A template for your Next.js projects including Typescript, Eslint, Prettier, Jest, Cypress and Docker.

A template for your Next.js projects including Typescript, Eslint, Prettier, Jest, Cypress and Docker.

Next.js Template Quickly start a new Next.js project A template for your Next.js projects including Typescript, Eslint, Prettier, Jest, Cypress and Do

Oct 7, 2022

Blog-sercannaya - react-next-sass-graphql

Next.js + Tailwind CSS Example This example shows how to use Tailwind CSS (v3.0) with Next.js. It follows the steps outlined in the official Tailwind

Jan 3, 2022

A Restaurant (Table) Reservation API built with Node, TypeScript, Express, TypeORM, a MySQL DB, all running on Docker containers

Restaurant (Table) Reservation API A simple API for reserving tables at a restaurant. The API is based on the REST architectural style and uses Node.j

Oct 5, 2022

A Restaurant (Table) Reservation API built with Node, TypeScript, Express, TypeORM, a MySQL DB, all running on Docker containers

Restaurant (Table) Reservation API A simple API for reserving tables at a restaurant. The API is based on the REST architectural style and uses Node.j

Oct 5, 2022

REST API built with Node.js, MongoDB, Mongoose & TypeScript. I also dabbled with Docker and Caddy for deployments

REST API built with Node.js, MongoDB, Mongoose & TypeScript. I also dabbled with Docker and Caddy for deployments

REST API with Node.js, Mongoose & TypeScript Note: This repository includes the postman collection for the finished API Note 2: Make sure you add .env

Sep 16, 2022

A template for your Node.js projects including Typescript, Eslint, Prettier, Jest and Docker.

A template for your Node.js projects including Typescript, Eslint, Prettier, Jest and Docker.

Node.js Template Quickly start a new Node.js project A template for your Node.js projects including Typescript, Eslint, Prettier, Jest and Docker. ⏩ G

Oct 12, 2022

Um app com salas de bate papo aonde os usuários serão "cachorros"

🐶 DOG TALK 💬 Um app com salas de bate-papo aonde os usuários serão "cachorros"... 🎯 Objetivo deste projeto Aplicar areas distintas em desenvolvimen

Apr 13, 2022

🎯 Plataforma para acesso aos dados de perfis de usuários do Github.

🎯 Github Profile 🚀 Desafio Front End | Compass.UOL Tecnologias | Projeto | Como rodar | Licença demo.mp4 🚀 Tecnologias 💻 Projeto Esse projeto é um

Mar 30, 2022
Owner
Adilson Gabriel
💻🌎 Web development
Adilson Gabriel
Uma aplicação criada com react-native para armazenar as skills dos usuários cadastrados.

SkillsClass Aplicação focada no gerenciamento de skills dos usuários cadastrados. Uma aplicação desenvolvida no ignite da Rocketseat com alguns toques

Carlos Ferreira 1 Dec 25, 2021
Aplicação que permite a busca por nome de usuários do Github e mostra seus repositórios.

Github User Finder Aplicação que permite a busca por nome de usuários do Github e mostra seus repositórios. ?? Acesse a aplicação aqui ?? Layout por A

Adriana Lima Shikasho 35 Apr 30, 2022
Server desenvolvido para a aplicação web da NLW RocketSeat Ignite.

Back-end - servidor RocketSeat Trilha ignite Neste projeto foi criado uma página web que se comunica com um servidor. O servidor contém todos os dados

Matheus Costa 2 Sep 27, 2022
É um Dropdown simples desenvolvido a partir de Sass e jQuery.

Dropdown É um Dropdown simples construído com Sass e jQuery. ?? Conteúdo São necessários somente os arquivos com estilos e scripts para habilitar o Dr

Marcelo Tomazelli 3 Sep 27, 2021
Plataforma del Registro de Autoexclusión del Juego

WebApp boilerplate with React JS and Flask API Styles You can update the styles/index.scss or create new .scss files inside styles/ and import them in

Daniel Bañobre Dopico 7 Feb 4, 2022
CRUD de productos basado en el ORM sequelize y el login y el registro usando archivo en formato JSON.

Desarrollo de una aplicación muy sencilla, utilizando diferentes recursos ofrecdos por Node.JS. Aquí puedes encontrar : Login - Registro - Administración de productos completamente funcionales) Recursos utilizados: Middleware - Express validator - Validaciones del lado del Front-End - y del Back-End - Sessión - Cookies - Multer, entre otros)

Ángel Daniel Fuentes Segura 4 Sep 12, 2022
A Turborepo with Strapi v4 (w/ postgres database) + Next.js powered by docker and docker-compose

Turborepo + Strapi + Next.js + Docker A Turborepo with Strapi v4 (w/ postgres database) + Next.js powered by docker and docker-compose. ⚠️ Prerequisit

Elvin Chu 60 Dec 29, 2022
Docker Extension to backup and restore docker volumes.

vackup-docker-extension This repository contains a Docker Extension that backups Docker volumes. This extension is purely a demonstration of how it'd

Felipe Cruz Martinez 34 Dec 28, 2022
This provides an extension integration with Docker Desktop to run k9s quickly and easily through the Docker Desktop interface.

k9s extension for Docker Desktop This provides an extension integration with Docker Desktop to allow k9s quickly and easily through the Docker Desktop

James Spurin 14 Dec 16, 2022
Atlan is a CLI that helps you to manage local dockerized infrastructure without any needed knowledge on Docker and Docker Compose.

Atlan CLI Atlan is a CLI that helps you to manage local dockerized infrastructure without any needed knowledge on Docker and Docker Compose. What is A

Myastro 10 Aug 17, 2022