Eu preciso de um site em ReactJs

Sobre nós

A ****** é uma plataforma online que facilita o aluguel de objetos entre usuários. Conectamos pessoas interessadas em economizar alugando objetos ao invés de comprar, com pessoas que possuem objetos não utilizado e que que desejam ganhar dinheiro extra.

Somos uma startup brasileira iniciando uma plataforma online. Talvez o escopo do projeto e todas as informações não estejam da melhor forma, mas fizemos o melhor até aqui para auxiliar quem for desenvolver.

O que precisamos

Páginas desenvolvidas em ReactJs conforme o projeto do Figma e documentação que está no Notion, utilizando as melhores práticas do mercado de desenvolvimento. Aceitamos sugestões para ajustes e melhorias no projeto. Talvez o projeto no Figma, não esteja com a melhor estrutura pois somos iniciantes, mas elaboramos uma maneira para que seja fácil identificar as tarefas.

Nossa plataforma terá 20 páginas, mas 60% com componentes reutilizáveis do ReactJS
O site deve ter uma performance aceitável para os padrões de internet de hoje (carregamento em até 3 segundos)
O site não terá animações 3D ou vídeos.

Autenticação

Usamos JWT para autenticação e autorização de usuários.


O QUE NÃO PRECISA FAZER

Desenvolvimento BackEnd NodeJs
• Não é necessário desenvolver o backend em NodeJs. Temos desenvolvedores próprios

Conexão com o banco de dados
• Não é necessário desenvolver a estrutura do banco de dados, como tabelas ou conexões MySQL

Servidor
• Não é necessário desenvolver ou estruturar qualquer configuração cloud para servidor BackEnd, FrontEnd

Design UI/UX
• Não é necessário desenvolver o design. Temos o layout de cada página no Figma, com estrutura necessária para o desenvolvimento.
• Guia de Estilo: Paleta de cores, tipografia, espaçamentos, e componentes visuais padrão


API
• Não é necessário desenvolver API. Somente as chamadas para os endpoints

Checkout de pagamento
• Não é necessário desenvolver o checkout de pagamento. Somente as chamadas para os endpoints


O QUE PRECISAMOS FAZER

Páginas em ReactJs
• Páginas da plataforma desenvolvidas em ReactJs

Estruturar JWT – Token
• Armazenamento do Token:
 Armazenar o token JWT no localStorage ou sessionStorage do navegador
• Intercepção de Requisições HTTP:
 Usar interceptores do Axios para adicionar o token JWT no header de todas as requisições.

Tratamento de Mensagens de ERRO e SUCESSO com Pop-ups
• Erro
• Sucesso

Tokenização do Cartão de Crédito no Front End
• Usar API da ************ para tokenizar informações de cartões de crédito antes de enviá-las ao backend

Responsividade para Dispositivos
• Celular
• Desktop
• Notebook
• Monitores WideScreen
• Tablets

Paginação dos Cards da Página HOME e Página de RESULTADOS DE BUSCA
• Implementação de Paginação: Usar uma biblioteca de paginação como react-paginate.

Organização dos Cards, conforme os Filtros Utilizados nos Resultados da Busca
• Filtros Disponíveis:
 Categoria
 Preço
 Localização
 Disponibilidade
• Ordenação:
 Relevância
 Preço (menor para maior/maior para menor)
 Avaliação dos usuários

Proteção contra XSS
• Sanitizar todas as entradas de usuários.
• Usar bibliotecas como DOMPurify

Compatibilidade com os Principais Navegadores
• Google Chrome
• Mozilla Firefox
• Safari
• Microsoft Edge

Utilizar o Framework Next.JS
• Diretório pages/ para definir rotas.
• Diretório components/ para componentes reutilizáveis.
• Diretório public/ para arquivos estáticos.
• Diretório styles/ para arquivos de estilo global e modular.

Requisições para a API
• Requests HTTP: Axios

Comentários e sinalizações importantes no código


Tecnologias e Ferramentas opcionais, mas recomendadas
• Frameworks e Bibliotecas:
 Styling: Styled-components, SASS/SCSS
 Gerenciamento de Estado: Redux ou Context API
 Routing: React Router
 Formulários: Formik, Yup (para validação)
• Versionamento: GitHub
• Ferramentas de Build: Webpack, Babel
• Testes: Jest, React Testing Library

Estrutura do Projeto – Sugestão
• src/
• ├── components/ # Componentes reutilizáveis
• ├── pages/ # Páginas da aplicação
• ├── services/ # Serviços e integrações com API
• ├── store/ # Gerenciamento de estado (Redux/Context)
• ├── styles/ # Arquivos de estilo global e modular
• ├── utils/ # Funções utilitárias
• └── App.js # Componente principal da aplicação