algalog-web

KO | EN

gitlite — search

#javascript #python #hacktoberfest #react #ai #typescript #llm #go #golang #android #machine-learning #rust #deep-learning #linux

(★ 10)

O projeto Algalog-web é um cliente web desenvolvido em react para consumir o backend java desenvolvido durante o treinamento gratuito Mergulho Spring Rest da Algaworks

algalog-web Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

<h4 align="center"> 
	🚧 Aplicação finalizada! 🚧
</h4>

## 🏁 Tópicos

👉<a href="#-sobre-o-projeto" style="text-decoration: none; "> Sobre</a> 
👉<a href="#-funcionalidades" style="text-decoration: none; "> Funcionalidades</a> 
👉<a href="#-melhorias" style="text-decoration: none; "> Melhorias</a> 


👉<a href="#-como-executar-o-projeto" style="text-decoration: none"> Como executar</a> 
👉<a href="#-tecnologias" style="text-decoration: none"> Tecnologias</a> 
👉<a href="#-autor" style="text-decoration: none"> Autor</a> 
👉<a href="#-user-content--licença" style="text-decoration: none"> Licença</a>

## 💻 Sobre o projeto

O Algalog-web é uma aplicação que permite gerenciar os pedidos de entrega de uma empresa de logistica.

O objetivo deste projeto era se desafiar a criar todo o frontend desde o UI Design até o resultado final em ReactJS. Para então, conectar com o backend java desenvolvido durante um treinamento gratuito sobre api-rest com spring-boot, saiba mais sobre a api **[AQUI](https://github.com/glaubermatos/algalog-api)**.

Confira o resultado no link abaixo:

---

## ⚙️ Funcionalidades

- [x] Página inicial com informações sobre a quantidade de entregas e clientes;
- [x] Cadastrar novo clientes;
- [x] Atualizar dados do cliente;
- [x] Solicitar nova entrega;
  - [x] Pesquisar cliente por nome;
- [x] Listagem das solicitações de entrega;
- [x] Listagem dos clientes;
- [x] Excluir usuário (desde que não tenha entregas cadastradas em seu nome);
- [x] Visualizar dados da solicitação de entrega;
  - [x] MUdanças de status da entrega (Em andamento, Cancelada, Finalizada);
  - [x] Adicionar ocorrencias (situações que impeçam a entrega);

---
<a name="-melhorias"></a>

## ⚙️ Melhorias
- [ ] Trabalhar o leyout responsivo;
- [ ] Mostrar um load de carregamento nas páginas enquanto o servidor não retorna os dados do backend;

---

<!-- ## 🎨 Layout
Layout construído com o **[Figma](https://www.figma.com)**

- **[Layout Frontend]()** (Disponível em breve)

--- -->

<!-- <a name="-demonstracao"></a>

## 🕹️ Demonstração

--- -->

## 🚀 Como executar o projeto

### Pré-requisitos

Antes de começar, você vai precisar ter instalado em sua máquina as seguintes ferramentas:
[Git](https://git-scm.com), [Node.js](https://nodejs.org/en/), [Yarn](https://classic.yarnpkg.com/en/docs/install).
Além disto é bom ter um editor para trabalhar com o código como [VSCode](https://code.visualstudio.com/)

#### 🧭 Rodando a aplicação web (Frontend)

```bash

# Clone este repositório
$ git clone https://github.com/glaubermatos/algalog-web.git

# Acesse a pasta do projeto no seu terminal/cmd
$ cd algalog-web

# Instale as dependências
$ yarn

# Execute a aplicação em modo de desenvolvimento
$ yarn start

# A aplicação será aberta na porta:3000 - acesse http://localhost:3000

```

---

## 🛠 Tecnologias

Este é um projeto criado com o **[Create React App](https://github.com/facebook/create-react-app)**.
As seguintes ferramentas foram usadas na construção do projeto:

#### **Aplicação web** ([ReactJS](https://pt-br.reactjs.org/) + [TypeScript](https://www.typescriptlang.org/))

- **[Styled Components](https://styled-components.com/)**
- **[React Router DOM](https://reactrouter.com/)**
- **[Axios](https://github.com/axios/axios)**
- **[React Icons](https://react-icons.github.io/react-icons/)**
- **[React Modal](http://reactcommunity.org/react-modal/)**
- **[React-Toastify](https://fkhadra.github.io/react-toastify/introduction)**
- **[MirageJS](https://miragejs.com/)**

> Veja o arquivo [package.json](https://github.com/glaubermatos/algalog-web/blob/main/package.json)

#### **Utilitários**

- Editor: **[Visual Studio Code](https://code.visualstudio.com/)**
- Ícones: **[Feather Icons](https://feathericons.com/)**
- Fontes: **[Inter](https://fonts.google.com/specimen/Inter)** | **[Nunito](https://fonts.google.com/specimen/Nunito)**

---

## 🦸‍♂️ **Autor**

<img src="https://avatars.githubusercontent.com/u/10993285?v=4" width="150px;" alt="glaubermatos"/>
 
 🌟 Glauber de Oliveira Matos 🌟

[![Linkedin Badge](https://img.shields.io/badge/-linkedin-blue?style=flat&logo=Linkedin&logoColor=white&link=https://www.linkedin.com/in/glaubermatos/)](https://www.linkedin.com/in/glaubermatos/)

---
<a name="-user-content--licença"></a>

## 📝 Licença

Este projeto esta sobe a licença [MIT](./LICENSE).

Feito com :satisfied: por Glauber de Oliveira Matos 👋🏽 [Entre em contato!](https://www.linkedin.com/in/glaubermatos/)

---

algalog-web

algalog-web Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

algalog-web

algalog-web Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README