micheleset7 / client

Desafio Afya labs

Esse projeto faz parte do treinamento do Gama Academy e Afya.

O objetivo é criar um sistema para um consultório controlar o cadastro de seus clientes, atendimentos e prontuário dos pacientes.

Nosso time decidiu dividir o projeto em duas partes, um client-side e um server-side. Esse repositório é a parte Client do projeto. O server-side pode ser encontrado aqui.

Preview

---

Menu

• 🛠 Pré-requisitos
• 📚 Bibliotecas
• 🚀 Install
• 📂 Estruturação dos arquivos
• 🖥️ Trabalhando no projeto
• 🤓 Boas práticas

🛠 Pré-requisitos

Antes de começar, você vai precisar ter instalado em sua máquina as seguintes ferramentas: Git, Node.js.

Aconselhamos a utilizar o editor VSCode

📚 Bibliotecas

O projeto foi feito utilizando React.js e Typescript. As principais bibliotecas utilizadas foram:

• axios
• react-router-dom
• react-dom
• styled-components
• react-hook-form
• react-lottie
• jsonwebtoken
• react-day-picker
• react-icons
• framer-motion
• material-design-icons-iconfont
• date-fns
• react-toastify

Utilitários

• Protótipo: Figma → Fluxograma e Design
• API Endereços: ViaCEP
• API Banco de dados: Prontuário API

🚀 Install

• Para iniciar a instalação, clone o repositório em sua pasta local ou faça o download

git clone https://github.com/Afya-Labs-g5t2/client.git
cd client

• Instale as dependências do projeto

  # Utilizando npm
  $ npm install
  # Ou yarn
  $ yarn add

• Execute o aplicativo localmente

  # Utilizando npm
  $ npm start
  # Ou utilizando yarn
  $ yarn start

  depois desse comando a aplicação irá abrir na porta 3000: http://localhost:3000/

📂 Estruturação dos arquivos

O repositório tem estas pastas:

client-main
.
├── .yarn
├── build
├── public
├── src
│   ├── assets
│   │   ├── animation
│   │   ├── GlobalStyles
│   │   └── Logo.tsx
│   │
│   ├── components
│   │   ├── Calendar
│   │   ├── CardPaciente
│   │   ├── CardProntuario
│   │   ├── FormSignIn
│   │   ├── Loading
│   │   ├── Menu
│   │   ├── ModalAgendamento
│   │   └── Navbar
│   │
│   ├── services
│   │   └── api.ts
│   │       
│   ├── views
│   │   └── pages
|   |       ├──Agenda
│   │       ├──AlterarAgendamento
│   │       ├──AlterarEspecialista
│   │       ├──AlterarPaciente
│   │       ├──AlterarSenha
│   │       ├──EspecialistaInfo
│   │       ├──Especialistas
│   │       ├──Home
│   │       ├──Login
│   │       ├──NovoEspecialista
│   │       ├──NovoPaciente
│   │       ├──PacienteInfo
│   │       ├──Pacientes
│   │       ├──Prontuario
│   │       └── User
│   │
│   ├── App.tsx
│   ├── index.tsx
│   ├── private.routes.tsx
│   ├── react-app-env.d.ts
│   └── routes.tsx
│   
├── .gitignore
├── .yarnrc
├── package-lock.json
├── package.json
├── README.md
├── tsconfig.json
|── vercel.json
└── yarn.lock

🖥️ Trabalhando no projeto

1. Crie uma nova branch para fazer suas alterações: git checkout -b minha-branch
2. O nome da nova branch deve informar a funcionalidade e a ação:

# Exemplo
Feature/fix-home-page
Feature/create-button-medical-records

3. Salve as alterações e crie sua mensagem de commit: git commit -m "Novo componente criado"
4. Envie as alterações para o GitHub: git push origin minha-branch

• Sempre que realizar um push do código, é preciso realizar um Pull Request comparando a sua Branch com a Branch Dev, pedir um colega de equipe fazer a Review do Pull Request e por fim realizar o Merge na Branch dev.

• As páginas devem seguir a seguinte estrutura:

🤓 Boas práticas

• As pastas do projeto deve ter o nome no formato Pascal Case, os arquivos devem ter os nomes em minúsculo e possuir um arquivo index.tsx e um styles.ts. Exemplo:

── ExemploPasta
    ├── index.tsx
    └── styles.ts

• As variáveis em JavaScript devem ser camel case:

let myName = 'John'
const myOtherName = 'Doe'

• As classes devem ter o nome todo em lowercase separado por uma dash ( - )

<!-- Exemplo -->
<div class='nome-dessa-classe'></div>

👩‍💻👨‍💻 Equipe

Nossa equipe de desenvolvedores que construiu a aplicação.

Marcos Lamarques	Michele Coelho	Vinicius Carvalho	Renata Mie	Renato Lobo	Thaís Hoshii

Nosso email de contato: