Projeto feito durante a NLW (Next Level Week) eSports. O objetivo era construir uma aplicação completa (com backend, web e mobile) que permita ao usuário compartilhar um anúncio para encontrar um duo (parceiro) para jogar online. Utilizamos NodeJS com Prisma e SQLite para o backend, ReactJS para web e React Native para mobile. Além das funções implementadas durante o evento, adicionei algumas coisas para tornar a aplicação mais completa.
Mais detalhes nas próximas seções.
- Garanta que possui o yarn (ou NPM) instalado e rode o comando
yarnna raiz da pastawebpara baixar as dependências.
- Criação da tela inicial com lista de anúncios.
- Estilização dos componentes com Tailwind.
- GET da quantidade de anúncios e dos games (Axios).
- POST dos dados de anúncios (Axios).
- Criação do modal que contem o formulário de inserção usando componente primitivo Dialog do Radix.
- Formulário de criação de anúncio, utilizando também alguns componentes primitivos do Radix(Checkbox, Select e ToggleGroup).
- Utilização do React Hook Form para fazer a validação dos dados do anúncio antes de realizar o POST.
- Criação de um Carousel para melhorar a exibição de anúncios.
- Criação de toast para dar uma resposta visual ao usuário se o anúncio foi criado com sucesso (Utilizando Toast do Radix).
- Criação de algumas animações para tornar a navegação mais suave (no Modal, Toast e etc).
- Algumas partes do site já estão responsivos(ainda faltam alguns ajustes).