Read it in English
Links | Projeto | Features | Tecnologias | Layout | Instalação | Contribuição | Contato | Licença
O projeto pode ser acompanhado através do link: NLW eSports DUO.
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
- Faça um fork desse repositório;
- Crie um branch para a sua feature:
git checkout -b minha-feature; - Faça um commit com suas alterações:
git commit -m 'feat: Minha nova feature'; - Faça um push para a sua branch:
git push origin minha-feature; - Faça um pull request com sua feature;
Pull requests são sempre bem-vindos. Em caso de dúvidas ou sugestões, crie uma issue ou entre em contato comigo.
Entre em contato comigo por e-mail ou pelas minhas redes sociais:
Esse projeto está sob a licença MIT. Veja o arquivo LICENSE para mais detalhes.
English version
Links | Project | Features | Technologies | Layout | Installation | Contribution | Contact | License
The project can be followed through the link: DUO eSports.
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.
- 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
- Do a fork of that repository;
- Create a branch for your feature:
git checkout -b minha-feature; - Make a commit with your changes:
git commit -m 'feat: Minha nova feature'; - Make a push to your branch:
git push origin minha-feature; - Make a pull request with your feature;
Pull requests are always welcome. If you have any questions or suggestions, please create an issue or contact me.
Contact me by email or through my social networks:
This project is under the MIT license. See the LICENSE file for more details.
