Felipe moreira

README.md

@@ -1,87 +1,76 @@
-# Desafio para Front-end Developer na DoroTech
+# Projeto: Rick and Morty for Web
 
-Somos uma empresa com clientes que atuam em vários segmentos do mercado, com diferentes tecnologias, culturas e desafios.
+<p align="center">
+<img src="./rick-morty-portal//public//rick-and-morty.png" alt="Rick and Morty Portal Preview" width="300" />
+<img src="./rick-morty-portal//public//project.png" alt="Rick and Morty Portal Preview" width="300"/>
+</p>
 
-Gostamos de compor nossos times com profissionais multidisciplinares, que tenham alta capacidade de aprendizado, sejam detalhistas, resilientes, questionadores e curiosos. 
-Você, como **Front-end Developer**, será o responsável por implementar, dar manutenção, aplicar correções e propor soluções em projetos de software.
 
-## Orientações
-Para executar o desafio de **Front-end Developer**, você **deverá utilizar framework React**, seguindo o [passo a passo](https://github.com/dorotech/frontend-test#etapas) para a execução, atendendo aos [critérios de aceitação](https://github.com/dorotech/frontend-test#crit%C3%A9rios-de-aceita%C3%A7%C3%A3o).
+## Descrição
 
-## Desafio
-Nossa equipe é apaixonada por **Rick and Morty**, o seu desafio será criar uma aplicação utilizando a API pública da série [https://rickandmortyapi.com/](https://rickandmortyapi.com/), para exibir a lista de  personagens. 
-Veja a documentação [https://rickandmortyapi.com/documentation/#rest](https://rickandmortyapi.com/documentation/#rest).
+Aplicação web feita com **Next.js 14**, estilizado com **Tailwind CSS** e componentes do **shadcn/ui**, que consome a **API pública de Rick and Morty**. 
 
-Os requisitos da aplicação:
+A proposta do projeto é oferecer uma experiência agrádavel para explorar todos os **826 personagens** da série, com paginação totalmente customizável (permitindo exibir 5, 10 ou 20 personagens por vez), filtros dinâmicos por nome, status, gênero, espécie e tipo, e busca em tempo real. A interface é responsiva, visualmente agradável e carrega elementos que remetem ao universo da série, como a tipografia personalizada inspirada em Rick and Morty, ícones do lucide-react e suporte ao modo escuro com next-themes. 
 
-- Como usuário, desejo visualizar na página inicial, uma lista de 20 personagens incialmente, contendo **foto**, **nome** e **status**, com o tamanho da paginação sendo dinamica, podendo ser selecionando, 5, 10 ou 20 itens por vez.
-- Como usuário, desejo clicar em um personagem da lista, para visualizar informações detalhadas. (seja criativo a api contem diversas informaçoes)
-- Como usuário, desejo filtrar os personagens por **nome**, **gênero**, **espécie** e **status**, alguns filtros são enums, seja criativo.
-- Como usuário, desejo combinar varios filtros.
-- Como usuário, gostaria de ter uma forma de acessar a imagem do pensonagem, abrindo a imagem em uma nova aba.
+O projeto também utiliza QueryParams no Client Side, garantindo controle total da paginação e dos filtros, mantendo a performance da aplicação.
 
-## Etapas
+- API Pública: https://rickandmortyapi.com/
 
-#### 1 - Fazer um fork desse repositório
+## Como rodar o projeto localmente
+1. Clone o repositório
+```bash
+git clone https://github.com/Felipe-Camargo12/react-test.git
+```
+2. Acesse a pasta do projeto
+```bash
+cd rick-morty-portal
+```
+3. Instale as dependências
+```bash
+npm install
+```
+4. Inicie o servidor de desenvolvimento
+```bash
+npm run dev
+```
+Ou inicie o servidor de produção
+```bash
+npm run build
+next start
+```
 
-![https://github.com/dorotech/frontend-test/raw/main/img/print-tutorial-1.png](https://github.com/dorotech/frontend-test/raw/main/img/print-tutorial-1.png)
+## 🛠️ Tecnologias utilizadas
+- [React 18](https://18.react.dev/)
+- [Next.js 14.2.26](https://nextjs.org/docs/14)
+- [TypeScript 5](https://www.typescriptlang.org/)
+- [Tailwind CSS 3.4.1](https://v3.tailwindcss.com/)
+- [shadcn/ui](https://ui.shadcn.com/docs) – biblioteca de componentes modernos e acessíveis
+- [lucide-react](https://lucide.dev/) – ícones otimizados para React
+- [Fonte Rick and Morty](https://fontswan.com/rick-and-morty-font/) – identidade visual estilizada da série
+- [React Three Fiber](https://r3f.docs.pmnd.rs/getting-started/introduction) - renderização de personagem 3d
 
+## Link para acessar o projeto.
+Acesse o projeto online:
+https://felipe-rick-and-morty.vercel.app/
 
-#### 2 - Criar um branch com o seu primeiro e último nome
-```bash
-git checkout -b joao-silva
-```
+## Funcionalidades principais 
+
+- Listagem completa dos **826 personagens** da série
+
+  Conforme é setado client-side o número de itens por página, ou seja, [5, 10 ou 20] personagens por vez, o total de páginas deve mudar:
+
+  - 226%20 = 41,3 então: 20 personagens = 42 páginas  
+  - 226%10 = 82,6 então: 10 personagens = 83 páginas  
+  - 226%5 = 165,2 então: 5 personagens = 166 páginas
+
+- Modal com detalhes completos do personagem ao clicar no card
+
+- UI responsiva e animada com Tailwind e shadcn
+
+- Uso de Suspense para gerenciar QueryParams no Client Side Rendering
+
+
+**Observação:** QueryParams usado precisa ser encapsulado em Suspense e modularizado em um componente a parte da page.tsx:
 
-#### 3 - Escreva a documentação da sua aplicação
-Você deve, substituir o conteúdo do arquivo **README.md** e escrever a documentação da sua aplicação, com os seguintes tópicos: 
-- **Projeto**: Descreva o projeto e como você o executou. Seja objetivo.
-- **Tecnologias**: Descreva quais tecnologias foram utilizadas, enumerando versões (se necessário) e os links para suas documentações,  qual guia de estilos de código você utilizou com o link para a sua documentação, quais bibliotecas instalou e porque.
-- **Como rodar**: Descreva como iniciar a sua aplicação
-- **Link** para acessar o projeto.
-
-#### 4 - Faça uma Pull Request
-Após implementada a solução, crie uma [pull request](https://github.com/dorotech/frontend-test/pulls) com o seu projeto para esse repositório, avise o recrutador.
-
-## Critérios de Aceitação
-Para que seu teste tenha o mínimo necessário que atenda aos requisitos esperados, ele deve:
-- Atender ao que foi proposto no [Desafio](https://github.com/dorotech/frontend-test#Desafio).
-- Utilização de pré-processadores CSS (Sass, Less).
-- Interfaces responsivas para desktop, tablets e smartphones.
-- Compatibilidade entre browsers.
-- Padrão de escrita CSS (BEM, OOCSS, SMACSS).
-- Código TS escrito com base em algum guia de estilos: [AirBnB Standards](https://github.com/airbnb/javascript) ou [TypeScript Google Guide](https://google.github.io/styleguide/tsguide.html).
-- Utilizar padrões semânticos em mensagens de commit. (Gostamos do padrão de commits do repositório [AngularJS](http://karma-runner.github.io/3.0/dev/git-commit-msg.html))
-- Projeto feito upload: [Firebase hosting](https://firebase.google.com/docs/hosting/quickstart?hl=pt-br) ou [GitHub Pages](https://pages.github.com/).
-- Caso você nao consiga completar tudo e tenha algum receio, não se preocupe, iremos avaliar o que foi entregue, mesmo com pendências.
-- O diferencial para este desafio: layout, ux e ui, bem como implementação de boas práticas de segurança, performance e/ou estrutura.
-- [JSDOC](https://jsdoc.app/) nos principais itens do projeto. 
-
-
-## Dicas e Informações Valiosas
-
-#### O que gostaríamos de ver em seu teste:
-- Upload do projeto em um seviço de hospedagem.
-- Convenção de nome em classes, objetos, variáveis, métodos e etc.
-- Layout encantador
-- Faça commits regulares. Eles são melhores do que um commit gigantesco. Gostaríamos de ver commits organizados e padronizados, então capriche neles!
-- Uso de libs como bootstrap, material, Evergreen e etc...
-- Hooks é bem-vindo.
-- Animações, Sobras, Menus, componentes de Libs de UX implementados. 
-- Projeto feito usando TypeScript
-- **Bônus 1** Dark Mode, implementação sendo um botão que mude o padrão de cores da pagina para escuro e claro com 1 click. 
-- **Bônus 2** QueryParams para buscas, quando uma busca e realizada, exibir na URL o parâmetro da busca realizado, caso recaregar a página com a URL, usar o parâmetro para preencher os itens da pagina.
-- **Bônus 3** Listagem de favoritos, com algum mecanismo de cache.
-- **Bônus 4** Outros filtros além dos sugeridos na descrição inicial
-- **Bônus 5** GitHub action como serviço de publicação do projeto pronto.
-
-**Observação:** Nenhum dos itens acima é obrigatório.
-
-#### O que o seu Teste não deve ter:
-- Saber que não foi você quem implementou o projeto.
-- Varias bibliotecas instaladas sem uso.
-- Falta de organização de código.
-- Falta de documentação.
-- Nome de variáveis sem sentido ou sem padrão de nomes.
-- Histórico de commits desorganizado e despadronizado.
-
-## Boa Sorte!! 
+ - [QueryParams – Next.js 14](https://nextjs.org/docs/14/app/api-reference/functions/use-search-params)
+  - [Missing Suspense – Next.js](https://nextjs.org/docs/messages/missing-suspense-with-csr-bailout)

rick-morty-portal/.env

@@ -0,0 +1,4 @@
+# Este arquivo serveria para não expor a rota da api diretamente no código
+# assim criando uma variavel de ambiente para esta e/ou demais configurações
+NEXT_PUBLIC_URL_API=https://rickandmortyapi.com/api/
+NEXT_PUBLIC_HOSTNAME=rickandmortyapi.com

rick-morty-portal/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": ["next/core-web-vitals", "next/typescript"]
+}

rick-morty-portal/.gitignore

@@ -0,0 +1,33 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

rick-morty-portal/README.md

@@ -0,0 +1,36 @@
+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).
+
+## Getting Started
+
+First, run the development server:
+
+```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.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [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
+
+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.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

rick-morty-portal/components.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "src/app/globals.css",
+    "baseColor": "zinc",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}

rick-morty-portal/next.config.mjs

@@ -0,0 +1,13 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+images: {
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname: `${process.env.NEXT_PUBLIC_HOSTNAME}`,
+      },
+    ],
+  },
+};
+
+export default nextConfig;