The nlw-copa from johnpetros

🖥️ 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)

Instalação e execução

Pré-requesitos

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

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

Faça um fork do projeto.
Crie uma nova branch com as suas alterações: git checkout -b my-feature
Salve as alterações e crie uma mensagem de commit contando o que você fez: git commit -m "feature: My new feature"
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 👋🏻

johnpetros / nlw-copa Goto Github PK

nlw-copa's Introduction