Projeto   |    Funcionalidades   |    Aprendizado   |    Tecnologias   |    Instalação e execução   |    Layout   |    Como Contribuir   |    Contato   |    Licença

🖥️ Projeto

Aplicação web/mobile com a temática da copa do mundo, que permitirá os usuários criarem seus próprios bolões da copa e compartilhá-los com seus amigos.
Projeto desenvolvido durante a 10ª edição da NLW na trilha ignite, evento online promovido pela Rocketseat 🚀.
a NLW (Next Level Week) é uma experiência online com muito conteúdo prático, desafios e hacks onde o conteúdo fica disponível durante uma semana.

Web

Mobile

---

✨ Funcionalidades

• Cadastro de usuários
• Busca de bolão por código
• Listagem de jogos da Copa do Mundo
• Criação de palpite para cada jogo
• Compartilhamento de bolão com amigos
• Criação de bolão
• Contagem de bolões, usuários e palpites cadastrados
• Acesso através da conta google do usuário

Diagrama entidade relacionamento(ER)

📖 Aprendizado

• Conceito de CORS, que é um mecanismo que permite que sistemas direfentes tenham acesso a uma dada aplicação back-end
• Biblioteca Fastify como alternativa ao Express para gerir APIs e servidores web
• O que são e para que servem middlewares
• Como fazer Schema validation com a biblioteca Zod
• Como fazer sistema de autentificação com JWT (Json Web Token)
• Como fazer relacionamento entre entidades com Prisma
• Como incluir massa de dados para teste com Prisma
• Como fazer queries relativamente complexas com Prisma
• Como trabalhar com variáveis de ambiente
• Mais sobre configuração de ambiente TypeScript com NodeJs
• O que é o framework NextJs, por qual motivo ele surgiu e como utilizá-lo
• Como trabalhar com a biblioteca Axios da maneira certa para lidar com requisições
• Como trabalhar com várias requisições de forma simultânea
• Mais sobre a biblioteca Tailwind para estilização
• Como fazer autentificação com a conta google do usuário
• Como trabalhar com SVG no React Native
• Como criar splash icones para aplicativos
• Como implementar Navegação de abas com React Navigation
• O que é e como usar o Context API do React para gerenciar estado global e compartilhar dados entre vários componentes
• Como criar hooks personalizados
• Biblioteca Native Base para criação de componentes em React Native
• Como fazer estilização condicional com Native base
• Como herdar tipagem de componentes com TypeScript
• Como trabalhar com dados que passam de componente a outro com TypeScript

🚀 Tecnologias

Esse projeto foi desenvolvido com as seguintes tecnologias

As seguintes ferramentas foram usadas na construção do projeto:

Back-end (NodeJS + TypeScript)

• Fastify
• Zod
• Short-Unique-Id
• Prisma
• SQLite

Front-end (Web) (Next + TypeScript)

• TailwindCSS
• PostCSS
• Axios

Mobile (React Native + TypeScript)

• Expo
• Expo Fonts
• Expo Google Fonts
• Expo Auth Session
• Expo Web Browser
• Native Base
• Phosphor React Native
• React Navigation
• React Native SVG
• React Native Country Flag
• Axios
• Country-List
• DayJS
• dotENV

Instalação e execução

Pré-requesitos

Antes de baixar o projeto você vai precisar ter instalado na sua máquina as seguintes ferramentas:

• Git
• NodeJS
• Yarn ou NPM

Além disto é bom ter um editor para trabalhar com o código como VSCode

📟 Rodando o Backend (servidor)

# Clone este repositório
$ git clone  https://github.com/JohnPetros/nlw-copa.git

# Acesse a pasta do projeto no terminal/cmd
$ cd nlw-copa

# Vá para a pasta server
$ cd server

# Instale as dependências
$ npm install

# Execute a aplicação em modo de desenvolvimento
$ npm run dev

# O servidor inciará na porta:3333 - acesse http://localhost:3333

💻 Rodando a aplicação web (Frontend)

# Vá para a pasta da aplicação Front End
$ cd web

# Instale as dependências
$ npm install

# Execute a aplicação em modo de desenvolvimento
$ npm run dev

# A aplicação será aberta na porta:3000 - acesse http://localhost:3000

📱 Rodando a aplicação mobile (Mobile)

# Vá para a pasta da aplicação mobile
$ cd mobile

# Instale as dependências
$ npm install

# Execute a aplicação em modo de desenvolvimento
$ npx expo start

---

🎨 Layout:

O layout das telas da aplicação NLW Copa foi desenvolvido pela equipe da Rocketseat através da ferramenta Figma. Você pode acessar o layout através deste link: NLW Copa. Lembrando que você precisa ter uma conta no Figma para acessá-lo.

💪 Como contribuir

1. Faça um fork do projeto.
2. Crie uma nova branch com as suas alterações: git checkout -b my-feature
3. Salve as alterações e crie uma mensagem de commit contando o que você fez: git commit -m "feature: My new feature"
4. Envie as suas alterações: git push origin my-feature

   Caso tenha alguma dúvida confira este guia de como contribuir no GitHub

---

📩 Contato

Entre em contato comigo por e-mail ou pelo meu LinkedIn:

📝 Licença

Esse projeto está sob a licença MIT. Veja o arquivo LICENSE para mais detalhes.

---

Feito com 💜 by João Pedro 👋🏻