Gobarber

<h1 align="center"> <img src="backend/src/assets/bootcamp-header.png"> </h1> <h3 align="center"> O projeto desenvolvido foi uma aplicação completa para uma prestadora de serviços de beleza fictícia, a GoBarber. </h3> <p align="center"> <img alt="GitHub language count" src="https://img.shields.io/github/languages/count/belapferreira/gobarber"> <img alt="GitHub license" src="https://img.shields.io/github/license/belapferreira/gobarber"> <img alt="GitHub stars" src="https://img.shields.io/github/stars/belapferreira/gobarber?style=social"> </p> <p align="center"> <a href="#funcionalidades">Funcionalidades</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp; <a href="#heavy_check_mark-configurações-necessárias">Configurações necessárias</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp; <a href="#arrow_down_small-clonando-o-repositório">Clonando o repositório</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp; <a href="#beginner-iniciando-o-backend">Iniciando o backend</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp; <a href="#computer-iniciando-o-frontend">Iniciando o frontend</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp; <a href="#iphone-iniciando-o-mobile">Iniciando o mobile</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp; <a href="#wrench-tecnologias--ferramentas--recursos">Tecnologias | Ferramentas | Recursos</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp; <a href="#memo-license">Licença</a> </p>

Durante as aulas do RocketSeat GoStack Bootcamp além da teoria e para melhor aprendizado é desenvolvida uma aplicação completa (Back-end, Front-end e Mobile) exemplificando como são usados os conteúdos aprendidos e para treinar e consolidar o que foi ensinado fiz o clone code do app aplicando algumas estilização diferentes da proposta do projeto original.

<p align="center"> <img src="frontend/src/assets/GoBarberWebLogin.PNG" width="30%" height="30%" max-width:100% > <img src="frontend/src/assets/GoBarberWebDashboard.PNG" width="30%" height="30%" max-width:100% > </br> <img src="mobile/src/assets/GoBarberSignIn.PNG" width="15%" height="15%" max-width:100% > <img src="mobile/src/assets/GoBarberAppointments.PNG" width="15%" height="15%" max-width:100% > <img src="mobile/src/assets/GoBarberSelectDate.PNG" width="15%" height="15%" max-width:100% > </p>

Funcionalidades

Versão web:

• Autenticação na aplicação para os prestadores de serviço;
• Cadastro de prestadores de serviço;
• Mensagens em forma de toast quando ocorre problemas na autenticação ou no cadastro;
• Painel para visualização dos agendamentos com navegação por dia;
• Recebimento de notificações quando ocorre um agendamento;
• Marcação de notificação como lida;
• Tela para atualização de dados, senha e foto do prestador de serviço logado.

Versão mobile:

• Autenticação na aplicação para usuários dos serviços prestados;
• Cadastro de usuários;
• Mensagens em forma de toast quando ocorre problemas na autenticação ou no cadastro;
• Navegação entre as telas através de botões na extremidade inferior;
• Painel para visualização dos agendamentos do usuário que passaram, que ainda ocorrerão e que ainda podem ser cancelados;
• Tela para realização de novo agendamento com seleção do prestador de serviço, data e horário disponíveis e confirmação do agendamento;
• Tela para atualização de dados, senha e foto do usuário logado.

<blockquote align="center">“Acredite em você a cada passo”</blockquote>

:heavy_check_mark: Configurações necessárias

• Git
• Node
• Yarn
• Docker
• Ambiente para desenvolvimento mobile configurado conforme sistema operacional utilizado

:arrow_down_small: Clonando o repositório

1. Pelo terminal, acesse o diretório em que deseja ter o repositório clonado e execute o comando a seguir.

# clonando o repositório
git clone https://github.com/belapferreira/gobarber

:beginner: Iniciando o backend

1. Crie os serviços de bancos de dados postgres, mongo e redis utilizando os comandos a seguir. Os nomes e a senha são uma sugestão e podem ser alterados conforme sua preferência.

# criando serviço de banco de dados postgres
docker run --name postgressgobarber -e POSTGRES_PASSWORD=gobarber2020 -p 5432:5432 -d postgres

# criando serviço de banco de dados mongo
docker run --name mongobarber -p 27017:27017 -d -t mongo

# criando serviço de banco de dados redis
docker run --name redisbarber -p 6379:6379 -d -t redis:alpine

2. Utilizando uma aba do terminal inicie os serviços de banco de dados conforme comando abaixo.

# iniciando os serviços de banco de dados
docker start postgresgobarber mongobarber redisbarber

3. Abra o projeto no editor de sua preferência e renomeie o arquivo .env.example para .env.
4. Coloque as suas credenciais no arquivo .env.
5. Pelo terminal, acesse o diretório backend do repositório clonado e execute os seguintes comandos separadamente.

# instalando as dependências
yarn install

# executando as migrations
yarn sequelize db:migrate

# iniciando o servidor
yarn dev

:computer: Iniciando o frontend

Observação: é necessário que o backend tenha sido iniciado antes.

1. Pelo terminal, acesse o diretório fronted do repositório clonado e execute os seguintes comandos separadamente.

# instalando as dependências
yarn install

# iniciando a aplicação
yarn start

:iphone: Iniciando o mobile

Observação: é necessário que o backend tenha sido iniciado antes.

1. Inicialize o emulador ou conecte o dispositivo físico e verifique a disponibilidade em uma janela do terminal.

# verificando dispositivos disponíveis
adb devices

2. Pelo terminal, acesse o diretório mobile do repositório clonado e execute os comandos abaixo separadamente.

# instalando as dependências
yarn install

3. Abra uma nova janela do terminal, acesse o diretório mobile do repositório clonado e faça a instalação e inicialização da aplicação seguindo os próximos comandos. A aplicação foi desenvolvida utilizando recursos direcionados para Android e pode necessitar de ajustes para dispositivos iOS.

# instalando a aplicação no dispositivo
react-native run-android

# iniciando a aplicação
react-native start

# carregando a aplicação
digite r no terminal || cmd + r e reload || ctrl + m e reload

:wrench: Tecnologias | Ferramentas | Recursos

Esse projeto foi desenvolvido utilizando os seguintes recursos:

Geral

• ESLint
• Prettier
• Visual Studio Code

Backend

• Bcrypt
• Bee Queue
• Cors
• Docker
• date-fns
• DotEnv
• Express
• Express-Async-Errors
• Express-Handlebars
• Insomnia
• JWT
• Jsonwebtoken
• Mailtrap
• MongoDB
• Mongoose
• Multer
• Node.js
• node-postgres
• Nodemailer
• Nodemailer-Express-Handlebars
• nodemon
• Pg
• Pg-Hstore
• PostgreSQL
• Redis
• Sentry
• Sequelize
• Sucrase
• Youch
• Yup

Frontend

• @rocketseat/unform
• @testing-library/jest-dom
• @testing-library/react
• @testing-library/user-event
• axios
• babel-eslint
• babel-plugin-root-import
• customize-cra
• date-fns
• date-fns-tz
• history
• immer
• polished
• prop-types
• react
• react-app-rewired
• react-dom
• react-icons
• react-perfect-scrollbar
• react-redux
• react-router-dom
• react-scripts
• react-toastify
• reactotron-react-js
• reactotron-redux
• reactotron-redux-saga
• redux
• redux-persist
• redux-saga
• [