O projeto desenvolvido foi uma aplicação completa para uma prestadora de serviços de beleza fictícia, a GoBarber.

Funcionalidades   |    Configurações necessárias   |    Clonando o repositório   |    Iniciando o backend   |    Iniciando o frontend   |    Iniciando o mobile   |    Tecnologias | Ferramentas | Recursos   |    Licença

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.

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.

“Acredite em você a cada passo”

✔️ Configurações necessárias

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

🔽 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

🔰 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

💻 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

📱 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

🔧 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
• styled-components

Mobile

• @babel/core
• @babel/runtime
• @react-native-community/async-storage
• @react-native-community/cli
• @react-native-community/datetimepicker
• @react-native-community/eslint-config
• @react-native-community/masked-view
• @react-navigation/bottom-tabs
• @react-navigation/compat
• @react-navigation/native
• @react-navigation/stack
• babel-eslint
• babel-jest
• babel-plugin-root-import
• axios
• date-fns
• immer
• jest
• metro-react-native-babel-preset
• prop-types
• react
• react-native
• react-native-gesture-handler
• react-native-linear-gradient
• react-native-reanimated
• react-native-safe-area-context
• react-native-screens
• react-native-vector-icons
• react-redux
• react-test-renderer
• reactotron-react-native
• reactotron-redux
• reactotron-redux-saga
• redux
• redux-persist
• redux-saga
• styled-components

📝 License

Esse projeto está sob MIT license. Veja LICENSE para mais informações.

---

Feito por Bela Ferreira 💙 Contato: https://www.linkedin.com/in/belapferreira 😊