Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/epiled/voll
š Projeto Dashboard em React com MUI e Recharts š
https://github.com/epiled/voll
mui react recharts styled-components typescript
Last synced: about 1 month ago
JSON representation
š Projeto Dashboard em React com MUI e Recharts š
- Host: GitHub
- URL: https://github.com/epiled/voll
- Owner: Epiled
- License: mit
- Created: 2023-12-09T10:09:51.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-02-18T05:40:12.000Z (10 months ago)
- Last Synced: 2024-02-18T06:24:16.547Z (10 months ago)
- Topics: mui, react, recharts, styled-components, typescript
- Language: TypeScript
- Homepage:
- Size: 336 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# š Voll Dashboard
Projeto do curso React com Typescript: desenvolvendo uma Ɣrea administrativa da Alura, curso ministrado pela instrutora MƓnica Mazzochi Hillman.
| :placard: Vitrine.Dev | |
| ------------- | --- |
| :sparkles: Nome | **Voll Dashboard**
| :label: Tecnologias | react, typescript, styled components, mui, recharts, html, css, js, node, vite, eslint
š Detalhes do projeto
Projeto Dashboard em React com MUI e Recharts
Este projeto de dashboard utiliza as seguintes tecnologias:
### Frontend
- **React e TypeScript:** Desenvolvimento da interface de usuĆ”rio com React e benefĆcios de tipagem estĆ”tica do TypeScript.
- **Styled Components:** EstilizaĆ§Ć£o dos componentes usando a biblioteca Styled Components para CSS-in-JS.
- **Material-UI (MUI):** Componentes reutilizƔveis e um design consistente com a ajuda da biblioteca Material-UI.
- **Recharts:** GrĆ”ficos interativos sĆ£o implementados usando a biblioteca Recharts.
### Ferramentas e ConfiguraƧƵes
- **Vite:** Uma ferramenta de construĆ§Ć£o rĆ”pida para projetos modernos de front-end.
- **Node.js:** Ambiente de execuĆ§Ć£o JavaScript no lado do servidor.
- **ESLint:** Garantindo boas prĆ”ticas de codificaĆ§Ć£o para manter um cĆ³digo limpo e consistente.
### Funcionalidades Principais
- ExibiĆ§Ć£o de dados de funcionĆ”rios em grĆ”ficos interativos.
- UtilizaĆ§Ć£o de componentes MUI para criar uma interface amigĆ”vel e responsiva.
- ImplementaĆ§Ć£o de estilos consistentes usando Styled Components.
- IntegraĆ§Ć£o de grĆ”ficos dinĆ¢micos e informativos com Recharts.
Este projeto proporciona uma experiĆŖncia de usuĆ”rio eficaz e visualizaĆ§Ć£o clara dos dados essenciais do dashboard, utilizando tecnologias modernas e prĆ”ticas de desenvolvimento.
š Tabela de ConteĆŗdos
* [Detalhes do projeto](#detalhes-do-projeto)
* [TĆ³picos Desenvolvidos](#topicos-curso)
* [DemonstraĆ§Ć£o](#demonstracao)
- [Dashboard](#dashboard)
* [PrƩ-Requisito](#pre-requisito)
* [InstalaĆ§Ć£o](#instalacao)
* [Como usar](#como-usar)
- [OpĆ§Ć£o 1](#opcao-1)
- [OpĆ§Ć£o 2](#opcao-2)
* [Tecnologias](#tecnologias)
* [Autor](#autor)
š©āš« TĆ³picos desenvolvidos
* Construa um projeto com React e Typescript.
* Desenvolva componentes estilizados com a biblioteca Styled-Components
* ConheƧa a biblioteca MUI
* Crie grĆ”ficos com auxĆlio da biblioteca Recharts
* Saiba como simular uma API
* Realize a integraĆ§Ć£o da API com os seus componentes
š DemonstraĆ§Ć£o
Dashboard
https://github.com/Epiled/voll/assets/55258483/d5c14b0c-07e7-4110-8523-8a700993a1c6
šØ PrĆ©-requisito
- Node
ā InstalaĆ§Ć£o
```
1. git clone https://github.com/Epiled/voll.git
2. cd voll
3. npm install
```
š©āš« Como usar
OpĆ§Ć£o 1
```
1. npm run subir
2. Acesse a url http://localhost:3000/
```
ā NĆ£o feche as janelas do prompt que abriram ā
OpĆ§Ć£o 2
```
1. npm run api
2. Abra um segundo terminal ainda na pasta voll
3. npm run start
4. Acesse a url http://localhost:3000/
```
Caso a url nĆ£o abra sozinha acesse a url [http://localhost:3000](http://localhost:3000)
š Tecnologias
As seguintes tecnologias foram usadas na construĆ§Ć£o deste projeto:
šØāš» Autor
Felipe De Andrade
Feito com ā¤ļø por Felipe De Andrade šš½ Entre em contato!
[](https://www.linkedin.com/in/fademendonca/)
[](mailto:[email protected])
[](https://www.instagram.com/felipe.deam/)
[](https://codepen.io/epiled)