From daf9300af705da7b0c622bb12beab08a2172aeca Mon Sep 17 00:00:00 2001 From: Emmanuel Marcos de Oliveira Date: Tue, 11 Nov 2025 23:20:50 -0300 Subject: [PATCH 1/2] docs: add Readme.md --- README.md | 431 +++++++++++++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 412 insertions(+), 19 deletions(-) diff --git a/README.md b/README.md index f06471a..e5a6017 100644 --- a/README.md +++ b/README.md @@ -1,34 +1,427 @@ -This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app). +# DevStore šŸ›ļø -## Getting Started +
-First, run the development server: +![DevStore Banner](https://res.cloudinary.com/delo0gvyb/image/upload/v1762913754/devstore_hrjh4y.png) + +### Uma plataforma de e-commerce moderna construĆ­da com Next.js + +[![Next.js](https://img.shields.io/badge/-Next.js%2016-black?style=plastic&logo=next.js&logoColor=white)](https://nextjs.org/) +[![React](https://img.shields.io/badge/-React%2019-61DAFB?style=plastic&logo=react&logoColor=white)](https://react.dev/) +[![TypeScript](https://img.shields.io/badge/-TypeScript%205-3178C6?style=plastic&logo=typescript&logoColor=white)](https://www.typescriptlang.org/) +[![Tailwind CSS](https://img.shields.io/badge/-Tailwind%20CSS%204-06B6D4?style=plastic&logo=tailwindcss&logoColor=white)](https://tailwindcss.com/) +[![ESLint](https://img.shields.io/badge/-ESLint%209-4B3599?style=plastic&logo=eslint&logoColor=white)](https://eslint.org/) +[![Cypress](https://img.shields.io/badge/-Cypress-17202C?style=plastic&logo=cypress&logoColor=white)](https://cypress.io/) + +--- + +## šŸŽÆ Menu RĆ”pido + +| šŸ“‹ Sobre | šŸš€ Setup | šŸ“¦ Tecnologias | šŸ—ļø Arquitetura | šŸ§Ŗ Testes | šŸ‘Øā€šŸ’» Contribuir | +| -------------------------- | ------------------------------------ | --------------------------------- | -------------------------------- | ----------------- | -------------------------- | +| [Clique](#sobre-o-projeto) | [Clique](#instalaĆ§Ć£o-e-configuraĆ§Ć£o) | [Clique](#tecnologias-utilizadas) | [Clique](#padrƵes-e-arquitetura) | [Clique](#testes) | [Clique](#como-contribuir) | + +--- + +
+ +## šŸ“‹ Sobre o Projeto + +**DevStore** Ć© uma plataforma de e-commerce moderna desenvolvida como um projeto educacional.
O projeto demonstra as melhores prƔticas de desenvolvimento web com Next.js 16,
incluindo renderizaĆ§Ć£o no servidor (SSR), geraĆ§Ć£o estĆ”tica (SSG), API routes, e otimizaƧƵes de performance. + +### CaracterĆ­sticas Principais + +- āœ… **CatĆ”logo de Produtos** - Listagem completa com busca em tempo real +- āœ… **Carrinhos DinĆ¢micos** - Gerenciamento de carrinho com Context API +- āœ… **PĆ”gina de Produto** - Detalhes completos com imagens otimizadas +- āœ… **API REST** - Endpoints para produtos e busca +- āœ… **Testes E2E** - Cobertura com Cypress +- āœ… **Performance** - OtimizaƧƵes automĆ”ticas do Next.js + +--- + +## šŸš€ InstalaĆ§Ć£o e ConfiguraĆ§Ć£o + +### PrĆ©-requisitos + +- **Node.js** 18.17 ou superior +- **pnpm** 8.0+ (gerenciador de pacotes recomendado) + +### Passo a Passo + +**1. Clone o repositĆ³rio** + +```bash +git clone https://github.com/emmanuelmarcosdeoliveira/devstore.git +cd devstore +``` + +**2. Instale as dependĆŖncias** + +```bash +pnpm install +``` + +**3. Configure as variĆ”veis de ambiente** + +Crie um arquivo `.env.local` na raiz do projeto: + +```env +# Exemplo de configuraĆ§Ć£o +NEXT_PUBLIC_API_URL=http://localhost:3000 +``` + +**4. Execute o servidor de desenvolvimento** ```bash -npm run dev -# or -yarn dev -# or pnpm dev -# or -bun dev ``` -Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. +Acesse [http://localhost:3000](http://localhost:3000) no seu navegador. + +### Scripts DisponĆ­veis + +| Comando | DescriĆ§Ć£o | +| ------------ | ------------------------------------ | +| `pnpm dev` | Inicia o servidor de desenvolvimento | +| `pnpm build` | Cria a build de produĆ§Ć£o | +| `pnpm start` | Inicia o servidor em produĆ§Ć£o | +| `pnpm lint` | Executa verificaƧƵes ESLint | +| `pnpm test` | Executa testes com Cypress | + +--- + +## šŸ“¦ Tecnologias Utilizadas + +### Framework e Runtime + +| Tecnologia | VersĆ£o | PropĆ³sito | +| -------------- | ------ | --------------------------- | +| **Next.js** | 16.0.0 | Framework React com SSR/SSG | +| **React** | 19.2.0 | Biblioteca UI | +| **React DOM** | 19.2.0 | RenderizaĆ§Ć£o no DOM | +| **TypeScript** | 5.x | Tipagem estĆ”tica | + +### EstilizaĆ§Ć£o + +| Tecnologia | VersĆ£o | PropĆ³sito | +| ------------------ | ------ | ------------------------- | +| **Tailwind CSS** | 4.x | Framework CSS utilitĆ”rio | +| **PostCSS** | 4.x | Processamento de CSS | +| **Tailwind Merge** | 3.3.1 | Merge de classes Tailwind | + +### ValidaĆ§Ć£o e Tipos + +| Tecnologia | VersĆ£o | PropĆ³sito | +| ---------------------- | ------ | ---------------------------------- | +| **Zod** | 4.1.12 | ValidaĆ§Ć£o de esquemas TypeScript | +| **@t3-oss/env-nextjs** | 0.13.8 | ValidaĆ§Ć£o de variĆ”veis de ambiente | + +### UI e ƍcones + +| Tecnologia | VersĆ£o | PropĆ³sito | +| ---------------- | ------- | ------------------------ | +| **Lucide React** | 0.548.0 | ƍcones SVG reutilizĆ”veis | + +### Ferramentas de Desenvolvimento + +| Tecnologia | VersĆ£o | PropĆ³sito | +| ------------------------ | ------ | ----------------------------- | +| **ESLint** | 9.x | AnĆ”lise estĆ”tica de cĆ³digo | +| **Cypress** | 15.6.0 | Testes end-to-end | +| **Babel React Compiler** | 1.0.0 | CompilaĆ§Ć£o otimizada de React | + +--- + +## šŸ—ļø PadrƵes e Arquitetura + +### Estrutura do Projeto + +``` +devstore/ +ā”œā”€ā”€ src/ +ā”‚ ā”œā”€ā”€ app/ # Next.js App Router +ā”‚ ā”‚ ā”œā”€ā”€ (store)/ # Grupo de rotas da loja +ā”‚ ā”‚ ā”‚ ā”œā”€ā”€ (home)/ # PĆ”gina inicial +ā”‚ ā”‚ ā”‚ ā”œā”€ā”€ product/ # PĆ”gina de produtos +ā”‚ ā”‚ ā”‚ ā””ā”€ā”€ search/ # PĆ”gina de busca +ā”‚ ā”‚ ā”œā”€ā”€ api/ # API Routes +ā”‚ ā”‚ ā”‚ ā””ā”€ā”€ products/ # Endpoints de produtos +ā”‚ ā”‚ ā””ā”€ā”€ layout.tsx # Layout raiz +ā”‚ ā”œā”€ā”€ components/ # Componentes React reutilizĆ”veis +ā”‚ ā”œā”€ā”€ context/ # Context API para estado global +ā”‚ ā”œā”€ā”€ data/ # Tipos e utilitĆ”rios de dados +ā”‚ ā””ā”€ā”€ env.ts # ValidaĆ§Ć£o de variĆ”veis de ambiente +ā”œā”€ā”€ cypress/ # Testes E2E +ā”œā”€ā”€ public/ # Arquivos estĆ”ticos +ā””ā”€ā”€ package.json # DependĆŖncias do projeto +``` + +### PadrƵes Implementados + +#### 1. **Server Components (SSR)** + +- Componentes Next.js renderizados no servidor por padrĆ£o +- Reduz JavaScript no cliente e melhora SEO + +#### 2. **Context API** + +- Gerenciamento de estado global do carrinho +- Evita prop drilling + +#### 3. **API Routes** + +- Endpoints RESTful nativos do Next.js +- Localizado em `src/app/api/` + +#### 4. **ValidaĆ§Ć£o com Zod** + +- Tipagem forte de dados +- ValidaĆ§Ć£o em tempo de compilaĆ§Ć£o + +#### 5. **TypeScript Strict** + +- Modo strict ativado +- Type safety em todo o projeto + +--- + +## šŸ“Š Fluxo da AplicaĆ§Ć£o + +Diagrama do fluxo principal de navegaĆ§Ć£o e interaĆ§Ć£o do usuĆ”rio na DevStore: + +```mermaid +graph TD + A["šŸ‘¤ UsuĆ”rio Acessa a AplicaĆ§Ć£o"] --> B["šŸ  PĆ”gina Inicial"] + + B --> C{AĆ§Ć£o do UsuĆ”rio} + + C -->|Busca por Produto| D["šŸ” Busca"] + C -->|Visualiza CatĆ”logo| E["šŸ“¦ Listagem de Produtos"] + + D --> F["šŸ›’ Resultado da Busca"] + E --> F + + F --> G{Seleciona Produto} + + G -->|Visualiza Detalhes| H["šŸ“„ PĆ”gina do Produto"] + G -->|Volta| + + H --> I{AĆ§Ć£o na PĆ”gina} + + I -->|Adiciona ao Carrinho| J["šŸ›’ Carrinho Atualizado"] + I -->|Continua Comprando| B + I -->|Voltar| F + + J --> K{Continua Comprando?} + + K -->|Sim| B + K -->|NĆ£o - Finaliza| L["āœ… Compra ConcluĆ­da"] + + style A fill:#3178C6,stroke:#000,stroke-width:2px,color:#fff + style B fill:#06B6D4,stroke:#000,stroke-width:2px,color:#fff + style D fill:#F59E0B,stroke:#000,stroke-width:2px,color:#fff + style E fill:#F59E0B,stroke:#000,stroke-width:2px,color:#fff + style F fill:#10B981,stroke:#000,stroke-width:2px,color:#fff + style H fill:#8B5CF6,stroke:#000,stroke-width:2px,color:#fff + style J fill:#EF4444,stroke:#000,stroke-width:2px,color:#fff + style L fill:#059669,stroke:#000,stroke-width:2px,color:#fff +``` + +### Fluxo de Dados (arquitetura) + +```mermaid +graph LR + A["šŸ“± Client Side
React Components"] + B["šŸ”„ Context API
Cart State"] + C["šŸŒ API Routes
Next.js"] + D["šŸ“Š JSON Data
Products DB"] + + A -->|Requisita| C + C -->|Busca| D + D -->|Retorna| C + C -->|JSON Response| A + A -->|Atualiza| B + B -->|State Global| A + + style A fill:#3178C6,stroke:#000,stroke-width:2px,color:#fff + style B fill:#EF4444,stroke:#000,stroke-width:2px,color:#fff + style C fill:#06B6D4,stroke:#000,stroke-width:2px,color:#fff + style D fill:#10B981,stroke:#000,stroke-width:2px,color:#fff +``` + +--- + +## šŸ§Ŗ Testes + +### Testes E2E com Cypress + +Os testes estĆ£o localizados em `cypress/e2e/`: + +**Executar testes:** + +```bash +pnpm cypress run +``` + +**Testes Inclusos:** + +- āœ… Adicionar produto ao carrinho +- āœ… Busca de produtos +- āœ… NavegaĆ§Ć£o entre pĆ”ginas + +--- + +## šŸ“– Aprendizado e Fonte + +Este projeto foi desenvolvido como material de estudo baseado na formaĆ§Ć£o **Ignite** da **RocketSeat**, um dos maiores educadores em desenvolvimento web do Brasil. + +Para aprender mais: [RocketSeat](https://www.rocketseat.com.br/) + +--- + +## šŸ”§ VariĆ”veis de Ambiente + +Crie um arquivo `.env.local` com as configuraƧƵes necessĆ”rias: + +```env +# Exemplo +NEXT_PUBLIC_API_URL=http://localhost:3000 +NODE_ENV=development +``` + +--- + +## šŸš€ Deploy + +### Deploy no Vercel (Recomendado) + +```bash +# Instale o Vercel CLI +npm install -g vercel + +# FaƧa deploy +vercel +``` + +--- + +## šŸ¤ Como Contribuir + +Sua contribuiĆ§Ć£o Ć© bem-vinda! Aqui estĆ£o os passos para contribuir: + +
+šŸ“Œ Clique para ver o guia completo de contribuiĆ§Ć£o + +### Passo 1: Familiarize-se com o Projeto + +- Leia a documentaĆ§Ć£o incluĆ­da +- Explore o cĆ³digo e sua estrutura +- Entenda como o projeto funciona + +### Passo 2: FaƧa um Fork + +Crie uma cĆ³pia (fork) do repositĆ³rio em sua conta do GitHub. + +[![GitHub Docs](https://img.shields.io/badge/GitHub%20Docs-Fork%20a%20Repo-181717?style=plastic&logo=github)](https://docs.github.com/pt/pull-requests/collaborating-with-pull-requests/working-with-forks/fork-a-repo) + +### Passo 3: Clone o RepositĆ³rio + +```bash +git clone https://github.com/SEU-USUARIO/devstore.git +cd devstore +``` + +### Passo 4: Crie uma Branch + +```bash +git checkout -b feature/sua-feature +# ou +git checkout -b fix/seu-fix +``` + +**ConvenĆ§Ć£o de nomes:** + +- `feature/` - Para novas funcionalidades +- `fix/` - Para correƧƵes de bugs +- `docs/` - Para documentaĆ§Ć£o +- `refactor/` - Para refatoraĆ§Ć£o + +### Passo 5: FaƧa as AlteraƧƵes + +- Implemente suas mudanƧas +- Adicione testes se necessĆ”rio +- Mantenha o cĆ³digo limpo (execute `pnpm lint`) + +### Passo 6: Commit e Push + +```bash +git add . +git commit -m "feat: descriĆ§Ć£o clara das alteraƧƵes" +git push origin feature/sua-feature +``` + +**PadrĆ£o de mensagens de commit:** + +- `feat:` Nova funcionalidade +- `fix:` CorreĆ§Ć£o de bug +- `docs:` MudanƧas na documentaĆ§Ć£o +- `style:` FormataĆ§Ć£o de cĆ³digo +- `refactor:` RefatoraĆ§Ć£o de cĆ³digo +- `test:` AdiĆ§Ć£o de testes + +### Passo 7: Crie um Pull Request + +Acesse o repositĆ³rio original e clique em "New Pull Request". Descreva claramente: + +- O que foi mudado +- Por que foi mudado +- Como testar as alteraƧƵes + +### Passo 8: Revise e Responda ao Feedback + +Os mantedores podem sugerir alteraƧƵes. Colabore e faƧa os ajustes necessĆ”rios. + +
+ +--- + +## šŸ‘Øā€šŸ’» Desenvolvedor + +
+ +### Desenvolvido por + +Emmanuel Oliveira + +#### **Emmanuel Oliveira** + +šŸ’– **Desenvolvido com dedicaĆ§Ć£o** + +[![LinkedIn](https://img.shields.io/badge/-LinkedIn-0A66C2?style=plastic&logo=linkedin&logoColor=white)](https://www.linkedin.com/in/emmanuel-marcos-oliveira/) +[![WhatsApp](https://img.shields.io/badge/-WhatsApp-25D366?style=plastic&logo=whatsapp&logoColor=white)](https://wa.me/5511968336094) +[![Email](https://img.shields.io/badge/-Gmail-EA4335?style=plastic&logo=gmail&logoColor=white)](mailto:ofs.dev.br@gmail.com) + +**© 2025 - Todos os Direitos Reservados** + +
+ +--- + +## šŸ“„ LicenƧa -You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file. +![MIT License](https://img.shields.io/badge/License-MIT-97CA00?style=plastic&logo=mit&logoColor=white) -## Learn More +Este projeto estĆ” sob a licenƧa **MIT**. Veja o arquivo [LICENSE](./LICENSE) para mais detalhes. -To learn more about Next.js, take a look at the following resources: +LanƧado em 2025. -- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. -- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. +--- -You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome! +
-## Deploy on Vercel +### ā­ Se este projeto foi Ćŗtil para vocĆŖ, considere dar uma estrela! -The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. +**Obrigado por chegar atĆ© aqui!** šŸ˜ -Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details. +
From 1d0f452ee88c2918414f316b22ddcc6719863bd1 Mon Sep 17 00:00:00 2001 From: Emmanuel Marcos de Oliveira Date: Tue, 11 Nov 2025 23:27:55 -0300 Subject: [PATCH 2/2] docs: update Readme.md --- README.md | 74 +++---------------------------------------------------- 1 file changed, 4 insertions(+), 70 deletions(-) diff --git a/README.md b/README.md index e5a6017..381343d 100644 --- a/README.md +++ b/README.md @@ -17,9 +17,9 @@ ## šŸŽÆ Menu RĆ”pido -| šŸ“‹ Sobre | šŸš€ Setup | šŸ“¦ Tecnologias | šŸ—ļø Arquitetura | šŸ§Ŗ Testes | šŸ‘Øā€šŸ’» Contribuir | -| -------------------------- | ------------------------------------ | --------------------------------- | -------------------------------- | ----------------- | -------------------------- | -| [Clique](#sobre-o-projeto) | [Clique](#instalaĆ§Ć£o-e-configuraĆ§Ć£o) | [Clique](#tecnologias-utilizadas) | [Clique](#padrƵes-e-arquitetura) | [Clique](#testes) | [Clique](#como-contribuir) | +| šŸ“‹ Sobre | šŸš€ Setup | šŸ“¦ Tecnologias | šŸ—ļø Arquitetura | šŸ§Ŗ Testes | šŸ‘Øā€šŸ’» Contribuir | +| --------------------------- | ------------------------------------- | ---------------------------------- | ---------------------------------- | ------------------ | --------------------------- | +| [Clique](#-sobre-o-projeto) | [Clique](#-instalaĆ§Ć£o-e-configuraĆ§Ć£o) | [Clique](#-tecnologias-utilizadas) | [Clique](#ļø-padrƵes-e-arquitetura) | [Clique](#-testes) | [Clique](#-como-contribuir) | --- @@ -186,72 +186,6 @@ devstore/ --- -## šŸ“Š Fluxo da AplicaĆ§Ć£o - -Diagrama do fluxo principal de navegaĆ§Ć£o e interaĆ§Ć£o do usuĆ”rio na DevStore: - -```mermaid -graph TD - A["šŸ‘¤ UsuĆ”rio Acessa a AplicaĆ§Ć£o"] --> B["šŸ  PĆ”gina Inicial"] - - B --> C{AĆ§Ć£o do UsuĆ”rio} - - C -->|Busca por Produto| D["šŸ” Busca"] - C -->|Visualiza CatĆ”logo| E["šŸ“¦ Listagem de Produtos"] - - D --> F["šŸ›’ Resultado da Busca"] - E --> F - - F --> G{Seleciona Produto} - - G -->|Visualiza Detalhes| H["šŸ“„ PĆ”gina do Produto"] - G -->|Volta| - - H --> I{AĆ§Ć£o na PĆ”gina} - - I -->|Adiciona ao Carrinho| J["šŸ›’ Carrinho Atualizado"] - I -->|Continua Comprando| B - I -->|Voltar| F - - J --> K{Continua Comprando?} - - K -->|Sim| B - K -->|NĆ£o - Finaliza| L["āœ… Compra ConcluĆ­da"] - - style A fill:#3178C6,stroke:#000,stroke-width:2px,color:#fff - style B fill:#06B6D4,stroke:#000,stroke-width:2px,color:#fff - style D fill:#F59E0B,stroke:#000,stroke-width:2px,color:#fff - style E fill:#F59E0B,stroke:#000,stroke-width:2px,color:#fff - style F fill:#10B981,stroke:#000,stroke-width:2px,color:#fff - style H fill:#8B5CF6,stroke:#000,stroke-width:2px,color:#fff - style J fill:#EF4444,stroke:#000,stroke-width:2px,color:#fff - style L fill:#059669,stroke:#000,stroke-width:2px,color:#fff -``` - -### Fluxo de Dados (arquitetura) - -```mermaid -graph LR - A["šŸ“± Client Side
React Components"] - B["šŸ”„ Context API
Cart State"] - C["šŸŒ API Routes
Next.js"] - D["šŸ“Š JSON Data
Products DB"] - - A -->|Requisita| C - C -->|Busca| D - D -->|Retorna| C - C -->|JSON Response| A - A -->|Atualiza| B - B -->|State Global| A - - style A fill:#3178C6,stroke:#000,stroke-width:2px,color:#fff - style B fill:#EF4444,stroke:#000,stroke-width:2px,color:#fff - style C fill:#06B6D4,stroke:#000,stroke-width:2px,color:#fff - style D fill:#10B981,stroke:#000,stroke-width:2px,color:#fff -``` - ---- - ## šŸ§Ŗ Testes ### Testes E2E com Cypress @@ -274,7 +208,7 @@ pnpm cypress run ## šŸ“– Aprendizado e Fonte -Este projeto foi desenvolvido como material de estudo baseado na formaĆ§Ć£o **Ignite** da **RocketSeat**, um dos maiores educadores em desenvolvimento web do Brasil. +Este projeto foi desenvolvido como material de estudo baseado na formaĆ§Ć£o da **RocketSeat**. Para aprender mais: [RocketSeat](https://www.rocketseat.com.br/)