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

https://github.com/raphaelamonteiro/atvii-wb

Agenda de cadastro de clientes, em TypeScript (graphical user interface)
https://github.com/raphaelamonteiro/atvii-wb

Last synced: 5 months ago
JSON representation

Agenda de cadastro de clientes, em TypeScript (graphical user interface)

Awesome Lists containing this project

README

          

# 🧾 Atividade prática ATVII – Interface Gráfica

**Professor:** [Gerson da Penha Neto](https://github.com/gerson-pn)

---

## 🚀 Tecnologias utilizadas


TypeScript

React

MaterializeCSS

VSCode

## ☕ Contextualização

Após o sucesso do sistema CLI desenvolvido para o Grupo World Beauty (WB), surgiu a necessidade de atualizar o projeto com uma interface gráfica moderna (GUI), acessível via navegador comum e dispositivos móveis.


A GUI permite uma navegação mais amigável para o usuário final, mesmo sem conhecimento técnico, e facilita a visualização, edição e consulta dos dados do sistema.

## 💡 Atividade proposta

Você é o responsável por liderar a modernização do sistema, criando uma nova interface gráfica com React e o framework de design MaterializeCSS, seguindo os padrões do Material Design.

### 🎯 Objetivo:

Desenvolver uma interface web responsiva para o sistema WB, com foco em **usabilidade, clareza e organização dos dados de clientes, produtos e serviços.**

- Interfaces criadas com React (componentes de classe)
- Design responsivo com MaterializeCSS
- Projeto de pré-interface, sem necessidade de back-end funcional por enquanto

---

## 🛠️ Funcionalidades obrigatórias

- Formulários de cadastro e edição de clientes
- Listagem de clientes cadastrados
- Componentes visuais para cadastro de serviços/produtos (em andamento)
- Layout responsivo e adaptado a celulares/tablets
- Navegação entre telas simulada com transições (sem router obrigatório)

---

## ✅ Pré-requisitos

Antes de rodar o sistema, certifique-se de ter instalado:

- [Node.js](https://nodejs.org/) (versão 22 ou superior)
- npm (vem junto com o Node.js)

Verifique com:

```bash
node -v
npm -v
```

---

## ▶️ Como executar o projeto

1. **Clone este repositório:**

```bash
git clone https://github.com/raphaelamonteiro/ATVII-WB.git
cd ATVII-WB
```

2. **Instale as dependências:**

```bash
npm install
```

3. Execute a aplicação no navegador:

```bash
npm run dev
```

Acesse no navegador:

```bash
http://localhost:3002
```

### 🧩 _Materiais de Apoio_

- 🔗 Repositório auxiliar: [atvii-wb-typescript](https://github.com/gerson-pn/atvii-wb-typescript)
- 📚 [Documentação do React](https://reactjs.org)
- 🎨 [Documentação do MaterializeCSS (v1.0.0)](https://materializecss.com)

---

---

> Por [Raphaela Monteiro](https://github.com/raphaelamonteiro)