Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

https://github.com/davimateus1/loomi_challenge

Desafio feito para a Loomi, consiste em um Dashboard integrado com APIs mostrando dados de diversas maneiras (cards, gráficos, tabela e etc).
https://github.com/davimateus1/loomi_challenge

axios js-cookie localstorage material-ui reactjs styled-components

Last synced: 8 days ago
JSON representation

Desafio feito para a Loomi, consiste em um Dashboard integrado com APIs mostrando dados de diversas maneiras (cards, gráficos, tabela e etc).

Host: GitHub
URL: https://github.com/davimateus1/loomi_challenge
Owner: davimateus1
Created: 2022-02-26T00:38:08.000Z (almost 3 years ago)
Default Branch: main
Last Pushed: 2022-03-14T19:30:40.000Z (almost 3 years ago)
Last Synced: 2024-12-12T17:21:07.402Z (2 months ago)
Topics: axios, js-cookie, localstorage, material-ui, reactjs, styled-components
Language: JavaScript
Homepage:
Size: 1.11 MB
Stars: 0
Watchers: 2
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

Loomi Challenge

Tecnologias   |
Projeto   |
Video do Projeto   |
Como executar

🖥️ Tela de Login:

Happy

📈 Tela do Dashboard:

Happy

## ✨ Tecnologias

Esse projeto foi desenvolvido com as seguintes tecnologias:

- [ReactJS](https://reactjs.org)
- [Styled Components](https://www.typescriptlang.org/)
- [JS-Cookie](https://www.npmjs.com/package/js-cookie)
- [Apexcharts](https://apexcharts.com)
- [Axios](https://axios-http.com/ptbr/docs/intro)
- [MaterialUI](https://mui.com/pt/)

## 💻 Projeto

O projeto consiste em um Dashboard que exibe dados de pedidos, juntamente com uma tela de login que guarda informações do usuário via cookies. Os dados do dashboard são consumidos via API com Axios, mostrado em tela como cards, tabelas e gráficos utilizando o Apexcharts para exibição, Componentes com MaterialUI e o Styled Components para estilização.

Alguns pontos fortes desse projeto são:

Estruturação de um projeto utilizando linters e formatters

Utilização de React Hooks

Gerenciamento de dados utilizando contextos

Consumo de API

Utilização de bibliotecas de componentes

Criação e utilização de temas e arquivos de estilo

Implementação de um fluxo de autenticação armazenando o token nos Cookies e armazenando informações do usuário no Local Storage

## 🎥 Video do Projeto

Você pode ver o video do projeto através [desse link](https://drive.google.com/file/d/1u2_CO_IdgikFD1hxSxwCB7i4eNtwzsBk/view?usp=sharing).

## 🚀 Como executar

- Clone o repositório
- Instale o [Node.js](https://nodejs.org/en/download/)
- Abra o projeto com algum editor de texto, recomendo o VSCode
- Inicie o servidor com `npm start` no terminal

Agora você pode acessar [`localhost:3000`](http://localhost:3000) no seu navegador e testar todas as funcionalidades.

---