An open API service indexing awesome lists of open source software.

https://github.com/tassio-med/attendance-system

📅 O projeto consiste em uma aplicação em que é possível realizar o cadastro de clientes para organizar atendimentos.
https://github.com/tassio-med/attendance-system

css3 firebase firebase-auth javascript reactjs vercel-deployment

Last synced: 2 months ago
JSON representation

📅 O projeto consiste em uma aplicação em que é possível realizar o cadastro de clientes para organizar atendimentos.

Awesome Lists containing this project

README

          

# Bem-vindo ao Attendance System!

Este projeto foi desenvolvido com o intuito de colocar em prática meus conhecimentos de Desenvolvimento Web, especificamente tratando-se do uso do [Firebase](https://firebase.google.com/).
Aqui você pode conhecer um pouco sobre minhas hard skills.

#### As principais habilidades colocadas prática nesse projeto foram:

* **React.JS**.
* **Javascript**;
* **CSS3**;
* **Firebase**;
* **Deploy com Vercel**;
* **ESLint**;

![javascript](https://img.shields.io/badge/javascript-yellow.svg?style=for-the-badge&logo=javascript&logoColor=white) ![CSS3](https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white) ![Firebase](https://img.shields.io/badge/firebase-%23039BE5.svg?style=for-the-badge&logo=firebase) ![ESLint](https://img.shields.io/badge/ESLint-4B3263?style=for-the-badge&logo=eslint&logoColor=white) ![NPM](https://img.shields.io/badge/NPM-%23000000.svg?style=for-the-badge&logo=npm&logoColor=white) ![React](https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB) ![Vercel](https://img.shields.io/badge/vercel-%23000000.svg?style=for-the-badge&logo=vercel&logoColor=white)

## Usabilidade

O projeto [Attendance System](https://attendance-system-isikpkkg8-tassio-med.vercel.app) consiste em uma aplicação em que é possível realizar o cadastro de clientes para organizar atendimento. Inicialmente é necessário se cadastrar no sistema e depois fazer o login, assim seus dados ficarão salvos no banco de dados [Firebase](https://firebase.google.com).

Há também a possibilidade de realizar atividades para cada cliente, sendo classificados em "Aberto", "Progresso" e "Atendido". Através dessas tags fica mais fácil de manter o controle de atendimento e serviços prestados por cliente. É importante relembrar aqui que todas as atividades e clientes ficam salvos no Firebase.

Além disso, podem ser editos os detalhes das atividades por cliente e também o perfil do usuário que pode ter uma foto personalizada, basta fazer o upload.

## Instalação

Para testar o projeto na sua máquina pessoal siga os seguintes passos:

1. Clone o repositório:

```sh
git@github.com:Tassio-Med/attendance-system.git
```

2. Instale os pacotes npm:

```bash
npm install
```

## Design

Para a construção visual do projeto foi utilizado CSS3 e a biblioteca React-icons para adicionar ícones SVG.
No projeto foi utilizada a seguinte paleta de cores:



| HEX | RGB |Cor |
| --- |--- | --- |
| `#fff` |`255, 255, 255`| ![#fff](https://placehold.co/300x50/fff/fff.png) |
| `##1f1f1f` |`31, 31, 31` | ![##1f1f1f](https://placehold.co/300x50/1f1f1f/1f1f1f.png) |
| `##252525` |`37, 37, 37` | ![##252525](https://placehold.co/300x50/252525/252525.png) |
| `#121212` |`18, 18, 18` | ![#121212](https://placehold.co/300x50/121212/121212.png) |
| `#F65835` |`246, 88, 53` | ![#F65835](https://placehold.co/300x50/F65835/F65835.png) |
| `#83bf02` |`131, 191, 2` | ![#83bf02](https://placehold.co/300x50/83bf02/83bf02.png) |
| `#31407a` |`49, 64, 122` | ![#31407a](https://placehold.co/300x50/31407a/31407a.png) |
| `##ddd` |`221, 221, 221`| ![##ddd](https://placehold.co/300x50/ddd/ddd.png) |

## Autor

- [@tassio medeiros](https://github.com/Tassio-Med)

[![LinkedIn](https://img.shields.io/badge/LinkedIn-0077B5?style=for-the-badge&logo=linkedin&logoColor=white)](https://linkedin.com/in/tassiomed98)

[![Instagram](https://img.shields.io/badge/Instagram-E4405F?style=for-the-badge&logo=instagram&logoColor=white)](https://instagram.com/tassio.med?igshid=ZDdkNTZiNTM=)

## EsLint

Neste projeto foi utilizado o [ESLint](https://eslint.org/) para fazer a análise estática do código. Ajudando a garantir a qualidade do código de forma a tê-lo mais legível, de mais fácil manutenção e seguindo as boas práticas de desenvolvimento.