|
|
|
# Hopeful Frontend
|
|
|
|
# 🎨 Padrões de Desenvolvimento – Frontend
|
|
|
|
|
|
|
|
Este é o frontend do projeto **Hopeful**, desenvolvido com **Next.js**.
|
|
|
|
Esta página define os **padrões de desenvolvimento** que devem ser utilizados no repositório do **Frontend** da aplicação.
|
|
|
|
|
|
|
|
## Tecnologias Utilizadas
|
|
|
|
- [Next.js](https://nextjs.org/) 15.4.6
|
|
|
|
- [React](https://react.dev/)
|
|
|
|
- [Node.js](https://nodejs.org/)
|
|
|
|
- [npm](https://www.npmjs.com/)
|
|
|
|
## Sumário
|
|
|
|
|
|
|
|
## Instalação
|
|
|
|
1. [Linguagem](#-linguagem)
|
|
|
|
2. [Bibliotecas](#-bibliotecas)
|
|
|
|
3. [Estrutura de Pastas](#-estrutura-de-pastas)
|
|
|
|
4. [Componentes](#-componentes)
|
|
|
|
|
|
|
|
Clone o repositório e instale as dependências:
|
|
|
|
---
|
|
|
|
|
|
|
|
```bash
|
|
|
|
git clone https://github.com/Hopeful-ages/frontend.git
|
|
|
|
cd frontend
|
|
|
|
```
|
|
|
|
Para instalar as dependências, execute:
|
|
|
|
## 🖥️ Linguagem
|
|
|
|
|
|
|
|
```bash
|
|
|
|
npm install
|
|
|
|
```
|
|
|
|
Para rodar o projeto em modo de desenvolvimento, execute:
|
|
|
|
O frontend é desenvolvido em **[React](https://react.dev/)** com **[TypeScript](https://www.typescriptlang.org/)**.
|
|
|
|
|
|
|
|
```bash
|
|
|
|
npm run dev
|
|
|
|
```
|
|
|
|
Estilo e layout são feitos com **[Tailwind CSS](https://tailwindcss.com/)**.
|
|
|
|
|
|
|
|
o projeto estará disponível em [http://localhost:3000](http://localhost:3000).
|
|
|
|
---
|
|
|
|
|
|
|
|
## 📚 Bibliotecas
|
|
|
|
|
|
|
|
### Estrutura de Pastas
|
|
|
|
```plaintext
|
|
|
|
As principais bibliotecas utilizadas são:
|
|
|
|
|
|
|
|
- **React** → criação de interfaces reativas.
|
|
|
|
- **TypeScript** → tipagem estática e segurança no desenvolvimento.
|
|
|
|
- **Tailwind CSS** → estilização rápida e responsiva.
|
|
|
|
- **[Lucide](https://lucide.dev/)** → biblioteca de ícones moderna e personalizável.
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
## 📂 Estrutura de Pastas
|
|
|
|
|
|
|
|
```bash
|
|
|
|
.
|
|
|
|
├── public
|
|
|
|
│ ├── images # Imagens estáticas da aplicação
|
| ... | ... | @@ -45,10 +46,11 @@ o projeto estará disponível em [http://localhost:3000](http://localhost:3000). |
|
|
|
├── .gitignore # Arquivos e pastas ignorados pelo Git
|
|
|
|
├── package.json # Dependências e scripts do projeto
|
|
|
|
└── README.md # Documentação do projeto
|
|
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
## Componentes
|
|
|
|
|
|
|
|
```plaintext
|
|
|
|
Dica: Utiliza o comando npm run lint para verificar a formatação do código.
|
|
|
|
``` |
|
|
\ No newline at end of file |
|
|
|
- Sempre utilizar **TypeScript** para definir `Props` e `State`.
|
|
|
|
- Nomear arquivos de componentes com **PascalCase** (ex: `UserCard.tsx`).
|
|
|
|
- Estilização feita **exclusivamente com Tailwind**.
|
|
|
|
- Ícones devem ser importados diretamente do **lucide-react**. |
|
|
\ No newline at end of file |
