Gobarber
💈 App web/mobile para barbearia que permite agendamento de horário 💇🏽
Install / Use
/learn @lucasbarzan/GobarberREADME
<h1 align="center">
💈 <a href="#" alt=""> GoBarber </a>
</h1>
<h3 align="center">
💈 App web/mobile para barbearia que permite agendamento de horário 💇🏽
</h3>
<p align="center">
<img alt="GitHub language count" src="https://img.shields.io/github/languages/count/lucasbarzan/gofinances?color=%2304D361">
<img alt="Repository size" src="https://img.shields.io/github/repo-size/lucasbarzan/gofinances">
<a href="https://github.com/lucasbarzan/gofinances/commits/master">
<img alt="GitHub last commit" src="https://img.shields.io/github/last-commit/lucasbarzan/gofinances">
</a>
<img alt="License" src="https://img.shields.io/badge/license-MIT-brightgreen">
<a href="https://github.com/lucasbarzan/gofinances/stargazers">
<img alt="Stargazers" src="https://img.shields.io/github/stars/lucasbarzan/gofinances?style=social">
</a>
</p>
<h4 align="center">
Concluído 🚀
</h4>
Tabela de conteúdos
- Sobre o projeto
- Funcionalidades
- Layout
- Como executar o projeto
- Tecnologias
- Como contribuir no projeto
- Autor
- Licença
💻 Sobre o projeto <a name="sobre-o-projeto"></a>
💈 O GoBarber é um app para barbearia com interface web para os barbeiros e interface mobile para os clientes, que permite agendamento de horário
Projeto desenvolvido durante o bootcamp GoStack oferecido pela Rocketseat.
⚙️ Funcionalidades <a name="funcionalidades"></a>
- [x] Barbeiros podem utilizar a plataforma web para:
- [x] Cadastrar-se, fazer login e recuperar a senha
- [x] Atualizar seu perfil
- [x] Listar seus agendamentos por data
- [x] Os usuários tem acesso ao app mobile, onde podem:
- [x] Cadastrar-se, fazer login e recuperar a senha
- [x] Atualizar seu perfil
- [x] Listar os prestadores de serviço (barbeiros)
- [x] Listar os horários disponíveis por data para cada barbeiro
- [x] Fazer um agendamento
🎨 Layout <a name="layout"></a>
O layout da aplicação está disponível no Figma:
<a href="https://www.figma.com/file/8szO6rJwdHlSaF95n2vKgW/GoBarber"> <img alt="Layout no Figma" src="https://img.shields.io/badge/Acessar%20Layout%20-Figma-%2304D361"> </a>Web <a name="layout-web"></a>
<p align="center" style="display: flex; align-items: flex-start; justify-content: center;"> <img alt="Screenshot web 1" src="./assets/web-login.svg" width="400px"> <img alt="Screenshot web 2" src="./assets/web-signup.svg" width="400px"> </p> <p align="center" style="display: flex; align-items: flex-start; justify-content: center;"> <img alt="Screenshot web 3" src="./assets/web-dashboard.svg" width="400px"> <img alt="Screenshot web 4" src="./assets/web-profile.svg" width="400px"> </p>Mobile <a name="layout-mobile"></a>
<p align="center" style="display: flex; align-items: flex-start; justify-content: center;"> <img alt="Screenshot mobile 1" src="./assets/mobile-login.svg" width="200px"> <img alt="Screenshot mobile 2" src="./assets/mobile-list.svg" width="200px"> <img alt="Screenshot mobile 3" src="./assets/mobile-appointment.svg" width="200px"> <img alt="Screenshot mobile 4" src="./assets/mobile-profile.svg" width="200px"> </p>🚀 Como executar o projeto <a name="como-executar-o-projeto"></a>
Este projeto é divido em duas partes:
- Frontend Web (pasta web)
- Frontend Mobile (pasta mobile)
- Backend (pasta server)
💡 Tanto o Frontend Web quanto o Mobile precisam que o Backend esteja sendo executado para funcionar
Pré-requisitos <a name="pre-requisitos"></a>
Antes de começar, você vai precisar ter instalado em sua máquina as seguintes ferramentas: Git, Node.js. Além disto é bom ter um editor para trabalhar com o código como VSCode.
🎲 Rodando o Backend <a name="rodando-o-backend"></a>
# Clone este repositório
$ git clone git@github.com:lucasbarzan/gobarber.git
# Acesse a pasta do projeto no terminal/cmd
$ cd gobarber
# Vá para a pasta do backend
$ cd server
# Instale as dependências
$ npm install
# Execute a aplicação em modo de desenvolvimento
$ npm run dev:server
# O servidor inciará na porta:3333 - acesse http://localhost:3333
🧭 Rodando a aplicação web (Frontend) <a name="rodando-a-aplicacao-web-frontend"></a>
# Clone este repositório
$ git clone git@github.com:lucasbarzan/gobarber.git
# Acesse a pasta do projeto no seu terminal/cmd
$ cd gobarber
# Vá para a pasta do frontend
$ cd web
# Instale as dependências
$ npm install
# Execute a aplicação em modo de desenvolvimento
$ npm run start
# A aplicação será aberta na porta:3000 - acesse http://localhost:3000
📱 Rodando a aplicação mobile (Frontend) <a name="rodando-a-aplicacao-mobile"></a>
Siga as instruções deste link para configurar o ambiente de desenvolvimento mobile em React Native e poder rodar a aplicação na sua máquina.
🛠 Tecnologias <a name="tecnologias"></a>
As seguintes ferramentas foram usadas na construção do projeto:
Server (NodeJS + TypeScript) <a name="tecnologias-server"></a>
- Express
- AWS SDK
- bcryptjs
- uuidv4
- Celebrate
- class-transformer
- date-fns
- CORS
- node-postgres
- mongodb
- ioredis
- redis
- TypeORM
- ts-node
- Nodemailer
- Multer
- rate-limiter-flexible
- dotENV
- tsyringe
- Handlebars
- Jest
Veja o arquivo package.json
Website (React + TypeScript) <a name="tecnologias-website"></a>
- React Router Dom
- React Icons
- React Day Picker
- React Spring
- Unform
- Styled Components
- Axios
- Yup
- uuidv4
- date-fns
- polished
Veja o arquivo package.json
Mobile (React Native + TypeScript) <a name="tecnologias-mobile"></a>
- React Navigation
- React Native Gesture Handler
- React Native Screens
- React Native Vector Icons
- React Native Image Picker
- React Native Safe Area Context
- React Native iPhone X Helper
- @react-native-community/async-storage
- @react-native-community/datetimepicker
- Styled Components
- Axios
- Yup
Veja o arquivo package.json
Utilitários <a name="utilitarios"></a>
- Protótipo: Figma
- Editor: Visual Studio Code
- Teste de API: Insomnia
- Fontes: Roboto Slab
