O Spot é um projeto fullstack que consiste em um MVP de uma aplicação do ramo gastronômico, que após logado (email e senha criptografados), traz para o usuário uma lista de restaurantes e suas respectivas informações, como endereço, número de telefone, e seus cardápios, contendo detalhes de cada item do menu como descrição e preço
- Javascript - Linguagem de programação utilizada
- Eslint - Ferramenta utilizada para manter um padrão de código uniforme
- React - Biblioteca front-end para componentização
- React Router - Biblioteca React para gerenciamento de rotas
- ContextAPI - Recurso React para gerenciamento de estado
- React Icons - Biblioteca React de ícones
- Styled Components - Biblioteca React para estilização de componentes
- Node.js - Campo de execução JS para back-end
- Express.js - Framework Node.js
- Express Async Errors - Captura erros assíncronos gerados no express
- Express.js - Framework Node.js
- Sequelize - ORM para requisições ao banco relacional MySQL
- MySQL - Banco de dados relacional utilizado
- Docker - Serviço de containerização
- Axios - Biblioteca front-end para requisições a API
- Concurrently - Pacote utilizado para startar o front e back simultaneamente
- Jsonwebtoken - Biblioteca utilizada para gerar token de validação do usuário
- md5 - Biblioteca que gera hash a partir de um payload
- joi - Utilizada para validar campos de login
- dotenv - Alocar variáveis de ambiente
- mocha - Framework de testes Node.js
- chai - Biblioteca de assertions Node.js
- sinon - Biblioteca de stubs e mocks para Javascript
Front-end:
- Página de login responsiva e campos de email e senha
- Página de registro responsiva com campos de email, senha e usuário
- Rotas de usuário e de restaurantes criadas
- Página "home" responsiva listando todos os restaurantes disponíveis no banco
- Estilização dos restaurantes da home
- Opção de filtro dos restaurantes atráves do campo de busca (que busque pelo nome do restaurante, nome ou descrição de um prato)
- Tela de informações de um restaurante acessível através de um click no card do mesmo
- Tela de informações de um restaurante mostrando o nome, endereço e telefone do mesmo, além da lista de itens do menu (com nome, decrição e preço)
- Opção na barra de navegação que possibilita o usuário retornar a "home"
- Opção na barra de navegação que possibilita o usuário deslogar da aplicação
- Testes da página "login"
- Testes da página "register"
- Testes da página "home"
- Testes da página "restaurants"
Back-end:
- Criação da estrutura e relacionamentos do banco de dados
- Criação das rotas de usuário e restaurantes
- Criação da rota de itens (incluindo a rota que traz os itens de acordo com o "id" de um restaurante)
- Popular o banco com usuários pré cadastrados (e-mail e senha criptografados), restaurantes e seus respectivos itens
- No login, validar previamente se o e-mail se encontra no banco
- Na home, validar se o usuário possui acesso a pagina atráves de um token gerado no login
- Testes dos "controllers"
- Testes das "services"
- Testes das "models"
Neste projeto está sendo feito uma cobertura de testes unitários, para testar a aplicação, entre na pasta que deseja testar (Front/Client: ./client
, Back/Servidor: ./server
) e rode o comando npm test
Obs: Testes front-end ainda não foram criados, confira seu status na sessão ✅ status deste readme
⚠🛠 Deploy ainda não realizado :'( 🛠⚠
Antes de instalar a aplicação, caso opte por rodar a aplicação via Docker verifique se você possui:
- Versão igual ou superior a
1.13.1
doDocker
- Portas
3000
,3001
e3306
da sua máquina liberadas
Sem Docker:
- Versão igual ou superior a
16
donode
- Instância do
MySQL
rodando na porta3306
⚠ Atualize as variáveis de ambiente com a senha do seu banco (arquivo .env na pasta /server), e também as variáveis do arquivo config do sequelize (arquivo config na pasta /server/database/config) ⚠
- Portas
3000
e3001
da sua máquina liberadas
Siga esses os comandos em ordem de acordo com o método que escolher
Via Docker:
- Clone o projeto:
git clone [email protected]:SamuelDAlencar/spot.git
- Dentro da raiz:
npm run compose:d
Caso queira rodar os containers acoplado ao terminal para acompanhar o status deles, rode somente
npm run compose:up
, e depois popule o banco em outro terminal com o comandonpm run pre:start:server
na raiz, ounpm run pre:start
caso esteja na pasta /server - Caso não ocorra nenhum erro, acesse a página e faça login:
http://localhost:3000/login
Sem Docker:
- Clone o projeto:
git clone [email protected]:SamuelDAlencar/spot.git
- Dentro da raiz:
npm run install:apps
- Ainda na raiz:
npm run start:apps
- Caso não ocorra nenhum erro e a aplicação ainda não tenha aberto no browser, acesse essa URL e faça o login:
http://localhost:3000/login
Clique no botão "Registrar"
ao entrar na aplicação, e insíra dados de login que não sejam sensíveis
Caso prefira não fazer registro, basta utilizar um destes 3 usuários já cadastrados no banco:
(e-mail) - (senha)
- Usuário 1:
[email protected] - 123Fred
- Usuário 2:
[email protected] - 1samu9
- Usuário 2:
[email protected] - gabribas5839
Após logado e autenticado, basta conferir os restaurantes disponíveis e vasculhar seus cardápios 😋
Caso queira deslogar da aplicação, basta clicar no icone de perfil na navbar e clicar em "Sair"
Ao alcancar uma resolução menor ou igual a 500px, a aplicação passará a ter um visual que simula um app mobile
🌟 Ficaria feliz demais em receber alguns feedbacks de melhoria 🥳 o projeto está sendo desenvolvido com muito carinho 🌟
Spot is a fullstack project that consists in an MVP of a gastronomic application, that after logged in (email and password encrypted), brings to the user a list of restaurants and their respective information, such as address, phone number, and their menus, containing details of each menu item such as description and price
- Javascript - Programming language used
- Eslint - Tool used to maintain a uniform code pattern
- React - Front-end componentization library
- React Router - React library for route management
- ContextAPI - React resource for state management
- React Icons - React icon library
- Styled Components - React component styling library
- Node.js - JS execution field for back-end
- Express.js - Node.js framework
- Sequelize - ORM for MySQL relational database requests
- MySQL - Used relational database
- Docker - Containerization service
- Axios - Front-end API request library
- Concurrently - Package used to start up the front and back end simultaneously
- Jsonwebtoken - Library used to generate user validation token
- md5 - Library that generates a hash from a payload
- joi - Used to validate login fields
- Express Async Errors - Catches asynchronous errors generated in express
- dotenv - Allocate environment variables
- mocha - Node.js testing framework
- chai - Node.js assertion library
- sinon - JavaScript stubs and mocks library
Front-end:
- Responsive login page and email and password fields
- Responsive registration page with email, password and user fields
- User and restaurant routes created
- Responsive home page listing all available restaurants in the bank
- Styling of the restaurants in the home page
- Option to filter the restaurants through the search field (search by restaurant name, name or description of a dish)
- Restaurant's information screen accessible through a click on the restaurant's card
- Restaurant information screen showing the name, address and phone number of the restaurant, as well as the list of menu items (with name, description and price)
- Option in the navigation bar that allows the user to return to the "home".
- Option in the navigation bar that allows the user to log off from the application
- Tests of the "login" page
- Tests of the "register" page
- Tests of the "home" page
- Tests of the "restaurants" page
*Back-end
- Creation of database structure and relationships
- Creation of the user and restaurants routes
- Creation of the items route (including the route that brings the items according to the "id" of a restaurant)
- Populate the database with pre-registered users (e-mail and password encrypted), restaurants and their respective items
- On the login, validate previously if the e-mail is in the bank
- At home, validate if the user has access to the page through a token generated at login
- Controllers tests
- Services tests
- "models" tests
This project has a unit tests coverage, to test the application, enter the folder you want to test (Front/Client: ./client
, Back/Server: ./server
) and run the npm test
command
Note: Front-end tests have not been created yet, check their status in the ✅ status section of this readme
⚠🛠 Deploy not yet done :'( 🛠⚠
Before installing the application, if you choose to run the application via Docker check that you have:
- Version equal or superior to
1.13.1
ofDocker
- Ports
3000
,3001
and3306
on your machine cleared
No Docker:
- Version equal or greater than
16
ofnode
- MySQL
](https://www.mysql.com/) instance running on port
3306`⚠ Update the environment variables with your database password (.env file in the /server folder), and also the variables in the sequelize config file ( config file in the /server/database/config folder) ⚠
- Ports
3000
and3001
on your machine cleared
Follow these commands in order according to the method you choose
Via Docker:
- Clone the project:
git clone [email protected]:SamuelDAlencar/rest-listing_app.git
- Inside the root:
npm run compose:d
If you want to run the containers attached to the terminal to keep track of their status, just run
npm run compose:up
, then populate the database in another terminal withnpm run pre:start:server
in the root, ornpm run pre:start
if in the /server folder - If no errors occur, go to the page and log in:
http://localhost:3000/login
No Docker:
- Clone the project:
git clone [email protected]:SamuelDAlencar/rest-listing_app.git
- In the root:
npm run install:apps
- Still in root:
npm run start:apps
- If no error occurs and the application has not yet opened in the browser, go to this URL and login:
http://localhost:3000/login
Click the "Register"
button when entering the application, and enter login data that is not sensitive.
If you prefer not to register, just use one of these 3 users already registered in the bank:
(e-mail) - (password)
- User 1:
[email protected] - 123Fred
. - User 2:
[email protected] - 1samu9
- User 2:
[email protected] - gabribas5839
Once logged in and authenticated, simply check out the available restaurants and browse their menus 😋
If you want to logout from the application, just click on the profile icon in the navbar and click "Logout".
By reaching a resolution less than or equal to 500px, the application will look like a mobile app
🌟 I would be very happy to receive some improvement feedbacks 🥳 the project is being developed with great care 🌟