NLW eSports é o projeto desenvolvido durante a trilha Ignite da Next Level Week, um evento online produzido pela Rocketseat.
Trata-se de um sistema que permite os usuários buscarem seu duo (dupla) em jogos online e publicar um anúncio para encontrar outros jogadores no jogo que desejar.
Na versão mobile, são exibidos os anúncios dos jogadores para os jogos cadastrados, e os usuários terão a possibilidade de se conectarem pelo discord para jogarem juntos.
- Mudança de ReactJS + NodeJS para NextJS (web)
- Listagem de games (web e mobile)
- Criação de um novo anúncio (web e mobile)
- Validação de autenticação com o discord (web e mobile)
- Validações de formulário com o Zod (web)
- Validações de formulário com o Yup (mobile)
- Combobox autocomplete com lista de games para seleção (web e mobile)
- Context API (web e mobile)
- Feedbacks para o usuário: loading durante criação, mudança de página, toast de sucesso e erro (web e mobile)
- Listagem de anúncios (web e mobile)
- Copiar o usuário do discord para a área de transferência (web e mobile)
- Página de erro 404 (web)
- Design totalmente responsivo (web)
- Javascript (https://www.javascript.com/)
- Typescript (https://www.typescriptlang.org/)
- ReactJS (https://reactjs.org/)
- NextJS (https://nextjs.org/)
- Tailwind CSS (https://tailwindcss.com/)
- Radix UI (https://www.radix-ui.com/)
- Axios (https://axios-http.com/ptbr/docs/intro)
- Prisma (https://prisma.io/)
- PostgreSQL (https://www.postgresql.org/)
- React Hook Form (https://react-hook-form.com/)
- Phosphor Icons (https://phosphoricons.com/)
- ZOD (https://zod.dev/)
- Next Auth (https://next-auth.js.org/)
- React Spring (https://react-spring.dev/)
- React Swiper (https://swiperjs.com/react)
- Vercel - Hospedagem Web (https://vercel.com/)
- Heroku - Hospedagem PostgreSQL (https://www.heroku.com/)
- React Native (https://reactnative.dev/)
- Expo (https://docs.expo.dev/)
- React Navigation (https://reactnavigation.org/)
- Phosphor Icons (https://phosphoricons.com/)
- Typescript (https://www.typescriptlang.org/)
- React Hook Form (https://react-hook-form.com/)
- Yup (https://github.com/jquense/yup)
- Toast Message (https://github.com/calintamas/react-native-toast-message#readme)
O layout das telas da aplicação NLW eSports foi desenvolvido pela equipe da Rocketseat através da ferramenta Figma, um software de prototipação voltado para UI Design (design de interfaces de usuário). Você pode acessar o layout através deste link: NLW eSports.
Para baixar o código-fonte do projeto em sua máquina, primeiramente terá que ter instalado o Git.
Com o Git instalado, em seu terminal execute o seguinte comando:
git clone https://github.com/brunofhorn/duo-esports.gitPara instalar as dependências e executar o projeto terá que ter instalado em sua máquina o Node.js, que vem acompanhado do NPM. Com ele instalado:
A versão web / server está na pasta web. Para testar, rode o seguinte comando:
npm installEm seguida execute o comando abaixo para rodar o projeto:
npm run devAbra http://localhost:3000 em seu navegador para ver o resultado.
Não esqueça de executar o prisma e gerar as tabelas. Você precisará criar um banco de dados e hospedá-lo (no caso do PostgreSQL) ou então utilizar o SQLite ou algum banco da sua preferência e vincular no arquivo .env.
Veja mais na documentação do Prisma.
Para testar o projeto na versão mobile, entre na pasta mobile e rode o seguinte comando:
npm installEm seguida, execute o comando abaixo para rodar a versão mobile (em um emulador ou direto no seu celular caso possua o app Expo Go):
npm start
Esse projeto está sob a licença MIT. Veja o arquivo LICENSE para mais detalhes.
English version
NLW eSports is the project developed during the Ignite track of Next Level Week, an online event produced by Rocketseat.
It is a system that allows users to search for their duo (duo) in online games and post an ad to find other players in the game they want.
In the mobile version, player ads are displayed for registered games, and users will be able to connect via discord to play together.
<img src="https://github.com/brunofhorn/nlw-esports/blob/main/.github/mobile-screens.jpg" alt="Telas do aplicativo mobile" /
- Moving from ReactJS + NodeJS to NextJS (web)
- Games listing (web and mobile)
- Creating a new ad (web and mobile)
- Authentication validation with discord (web and mobile)
- Form Validations with Zod (web)
- Form Validations with Yup (mobile)
- Combobox autocomplete with list of games for selection (web and mobile)
- Context API (web and mobile)
- User feedback: loading during creation, page change, success and error toast (web and mobile)
- Ads listing (web and mobile)
- Copy discord user to clipboard (web and mobile)
- 404 error page (web)
- Fully responsive design (web)
- Javascript (https://www.javascript.com/)
- Typescript (https://www.typescriptlang.org/)
- ReactJS (https://reactjs.org/)
- NextJS (https://nextjs.org/)
- Tailwind CSS (https://tailwindcss.com/)
- Radix UI (https://www.radix-ui.com/)
- Axios (https://axios-http.com/ptbr/docs/intro)
- Prisma (https://prisma.io/)
- PostgreSQL (https://www.postgresql.org/)
- React Hook Form (https://react-hook-form.com/)
- Phosphor Icons (https://phosphoricons.com/)
- ZOD (https://zod.dev/)
- Next Auth (https://next-auth.js.org/)
- React Spring (https://react-spring.dev/)
- React Swiper (https://swiperjs.com/react)
- Vercel - Web Hosting (https://vercel.com/)
- Heroku - PostgreSQL Hosting (https://www.heroku.com/)
- Javascript (https://www.javascript.com/)
- Typescript (https://www.typescriptlang.org/)
- React Native (https://reactnative.dev/)
- Expo (https://docs.expo.dev/)
- React Navigation (https://reactnavigation.org/)
- Phosphor Icons (https://phosphoricons.com/)
- React Hook Form (https://react-hook-form.com/)
- Yup (https://github.com/jquense/yup)
- Toast Message (https://github.com/calintamas/react-native-toast-message#readme)
The screen layout of the NLW eSports application was developed by the Rocketseat team through the tool Figma, a prototyping software aimed at UI Design (user interface design). You can access the layout through this link: NLW eSports.
To download the project's source code on your machine, you must first have Git installed.
With Git installed, in your terminal run the following command:
git clone https://github.com/brunofhorn/duo-esports.gitTo install the dependencies and run the project, you must have Node.js installed on your machine, which comes with NPM. With it installed:
The web/server version is in the web folder. To test, run the following command:
npm installThen run the command below to run the project:
npm run devOpen http://localhost:3000 in your browser to see the result.
Don't forget to run the prism and generate the tables. You will need to create a database and host it (in the case of PostgreSQL) or use SQLite or any database of your choice and link in the .env file.
See more in the Prisma documentation.
To test the project in the mobile version, enter the mobile folder and run the following command:
npm installThen, run the command below to run the mobile version (in an emulator or directly on your cell phone if you have the Expo Go app):
npm start
This project is under the MIT license. See the LICENSE file for more details.