Projeto | Tecnologias | Layout | Licença
Projeto desenvolvido para fazer um esquenta pre-eventos. O projeto é um mural de depoimentos, expectativa e mensagens em geral. Projeto realizado na Next Level Week #7 @Rocketseat.
- Chat em tempo real
- Bate-papo pre-evento
- App responsivo
- Light/Dark mode
- Restrição de (158) palavras de 'baixo escalão'
- SQLite
Desafios
GERAL:
✔ - Documentar bem o projeto
[2/3] - Migração de npm para yarn (WEB: y; MOBILE: n; NODE: y; ELIXIR: nil)
DESKTOP:
✔ - NO AR (Online / Vercel)
✔ - SEO:
✔ - Texto para <noscript />
✔ - Shortcut icon
✔ - Meta tags:
✔ - Facebook (og:~)
✔ - Twitter (twitter:~)
✔ - Sitemap (sitemap.xml / automatico com 'next-sitemap')
✔ - Robots (robots.txt / automatico com 'next-sitemap')
- Melhorar o estilo:
✔ - Mobile First
✔ - Responsividade
✔ - Design
✔ - Trocar o tema da aplicação:
✔ - Light
✔ - Dark
✔ - Imagens adaptadas para o 'light e dark'
✔ - +Animações (framer-motion)
- Cores:
✔ - Seleção do mouse (:selection)
✖ - Adaptadas para daltônicos
✔ - Toast
✔ - ER (Expressão Regular) no input para restringir palavras proibidas
✔ - Perfil no 'head' da web
✔ - Ponteiro do mouse personalizado
✔ - Telas:
✔ - Home
✔ - Home/Logged
✔ - 404
MOBILE:
✖ - NO AR (Online / Apple Store && Google Play)
- Melhorar o estilo:
✖ - Design
✖ - Trocar o tema da aplicação:
✖ - Light
✖ - Dark
✖ - Imagens adaptadas para o 'light e dark'
✔ - +Animações (framer-motion)
✖ - Cores:
✖ - Adaptadas para daltônicos
✔ - Telas:
✔ - splash
✔ - Home
✔ - Home/Logged
✖ - ER (Expressão Regular) no input para restringir palavras proibidas
NODE:
✔ - NO AR (Online / Heroku)
✔ - oAuth github
[2/3] - Identificar de onde vem as requisições (WEB: y; MOBILE: y; NODE: ~dev...; ELIXIR: nil)
✔ - ORM (Prisma)
- Banco de dados:
✔ - SQLite *Banco atual*
✖ - Migrar banco de dados de 'SQLite' para 'MongoDB'
✖ - MongoDB:
✖ - Guardar dados
✖ - Alterar dados
✖ - Deletar dados
ELIXIR:
✖ - NO AR (Online / ~)
✔ - Separar a mensagem de 150 caracteres em palavras
✔ - Contar a ocorrência de cara palavra
✔ - Processamento concorrente
✔ - Agendador de geração de relatórios
✔ - Rodando todo dia a meia noite (-e["0 0 * * *"] ou @daily)
✖ - Validação de erros (fallback_controller)
✖ - Word Cloud:
✖ - Gerar imagem com python
✖ - Enviar e-mail com a 'WordCloud' do dia (Bamboo)
Esse projeto foi desenvolvido com as seguintes tecnologias:
MOBILE___
React-native | sdk-42.0.0React | 16.13.1
Expo | ~42.0.1
Moti | ^0.16.0
Typescript | ~4.0.0
Socket.io | ^4.3.1
NODE___
NodeJS | ^14.17.3Express | ^4.17.1
Prisma | ^3.3.0
Typescript | ^4.4.4
SQLite | ^3.36.0
JWT | ^8.5.1
ELIXIR___
Elixir | 1.11.2 / OTP 21Phoenix | ~> 1.6.2
Jason | ~> 1.2
Swoosh | ~> 1.3
Quantum | ~> 3.0
💬 Site hospedado na Vercel 🤸♀️
Dependências
------- NODE -------
"dependencies": {
"@prisma/client": "^3.3.0",
"axios": "^0.23.0",
"cors": "^2.8.5",
"dotenv": "^10.0.0",
"express": "^4.17.1",
"jsonwebtoken": "^8.5.1",
"socket.io": "^4.3.1",
"ts-node": "^10.4.0"
},
"devDependencies": {
"@types/axios": "^0.14.0",
"@types/cors": "^2.8.12",
"@types/express": "^4.17.13",
"@types/jsonwebtoken": "^8.5.5",
"@types/node": "^16.11.4",
"@types/socket.io": "^3.0.2",
"prisma": "^3.3.0",
"ts-node-dev": "^1.1.8",
"typescript": "^4.4.4"
}
------- WEB -------
"dependencies": {
"axios": "^0.23.0",
"framer-motion": "^4.1.17",
"next": "11.1.2",
"next-themes": "^0.0.15",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-icons": "^4.3.1",
"react-toast-notifications": "^2.5.1",
"sass": "^1.43.3",
"socket.io-client": "^4.3.2"
},
"devDependencies": {
"@types/react": "17.0.31",
"@types/react-dom": "^17.0.10",
"eslint": "8.0.1",
"eslint-config-next": "11.1.2",
"next-sitemap": "^1.6.192",
"typescript": "4.4.4"
}
------- MOBILE -------
"dependencies": {
"@expo-google-fonts/roboto": "^0.2.0",
"axios": "^0.23.0",
"expo": "~42.0.1",
"expo-app-loading": "1.1.2",
"expo-auth-session": "~3.3.1",
"expo-font": "~9.2.1",
"expo-linear-gradient": "~9.2.0",
"expo-random": "~11.2.0",
"expo-status-bar": "~1.0.4",
"moti": "^0.16.0",
"react": "16.13.1",
"react-dom": "16.13.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-42.0.0.tar.gz",
"react-native-iphone-x-helper": "^1.3.1",
"react-native-reanimated": "~2.2.0",
"react-native-svg": "12.1.1",
"react-native-web": "^0.17.5",
"socket.io-client": "^4.3.2",
"@react-native-async-storage/async-storage": "~1.15.0"
},
"devDependencies": {
"@babel/core": "^7.9.0",
"@types/react": "~16.9.35",
"@types/react-native": "~0.63.2",
"react-native-svg-transformer": "^0.14.3",
"typescript": "~4.0.0"
}Ex:
$ npm install _____ou$ yarn add _____para instalar as dependências
Utilize a tag
-Dpara instalar as dependências de desenvolvimento. Utilize a tag@typespara instalar o suporte a Typescript. Utilize a tag@latestpara instalar a versão mais recente.
------- ELIXIR -------
defp deps do
[
{:phoenix, "~> 1.6.2"},
{:phoenix_ecto, "~> 4.4"},
{:ecto_sql, "~> 3.6"},
{:postgrex, ">= 0.0.0"},
{:phoenix_live_dashboard, "~> 0.5"},
{:swoosh, "~> 1.3"},
{:telemetry_metrics, "~> 0.6"},
{:telemetry_poller, "~> 1.0"},
{:gettext, "~> 0.18"},
{:jason, "~> 1.2"},
{:plug_cowboy, "~> 2.5"},
{:quantum, "~> 3.0"}
]
endEx:
$ mix deps.getpara instalar as dependências
# Clone o repositório
$ git clone https://github.com/NyctibiusVII/HeatsUp.git
# Acesse a pasta do projeto no terminal
$ cd heatsup
# Acesse a pasta do sub-projeto no terminal:
$ cd node # Projeto NodeJS
$ cd web # Projeto NextJS
$ cd mobile # Projeto React Native
$ cd wordcloud # Projeto Elixir
# Instale as dependências
$ npm install / yarn add # Serve para NodeJS, NextJS e React Native
$ mix deps.get # Serve para Elixir
# Execute o sub-projeto:
# --------- PARA NODE ---------- #
$ npx prisma generate # Para criar o banco de dados
$ npm run dev / yarn dev # Para rodar o projeto Node (Backend)
# ---------- PARA WEB ---------- #
$ npm run dev / yarn dev # Para rodar o projeto Web (Frontend)
# -------- PARA MOBILE --------- #
$ npm run start / yarn start # Para o projeto Mobile (Frontend Mobile)
# ------- PARA WORDCLOUD ------- #
# DISCLAIMER 1: Instale o Elixir e o Phoenix no terminal, isso não será explicado aqui.
# DISCLAIMER 2: Configure seu banco de dados no arquivo `config/dev.exs`
$ mix ecto.create # Para criar o banco de dados
$ mix phx.server # Para rodar o projeto Elixir (Backend)
# O NodeJS roda na porta: 4000
# O NextJS roda na porta: 3000
# O React Native roda na porta: 19002
# O Elixir roda na porta: 4000
# Acesse http://localhost:$PORT *Ex: Cuidado para não ligar dois ou mais projetos na mesma porta, pois o servidor pode não iniciar.Para construir essa aplicação tive a ajuda dos professores Daniele Leão, Diego Fernandes, Rodrigo Gonçalves e Rafael Camarda da Rocketseat que disponibilizou video aulas do projeto HeatsUp e ajudaram no ensino das respectivas linguagens { NodeJS, ReactJS, React Native, Elixir } além também de ter a ajuda desta grande comunidade que a Rocketseat construiu no Discord. Feito com ♥ by Rocketseat 👋 Participe da nossa comunidade!
| Dias | Hashtags |
|---|---|
| Dia 1 | #RumoAoPróximoNível |
| Dia 2 | #Protagonistas |
| Dia 3 | #ImaginarConstruirTransformar |
| Dia 4 | #SemLimites |
| Dia 5 | #BuildTheFuture |
Este projeto está sob a licença do MIT. Veja o arquivo LICENSE para mais detalhes.
 @MatheusVidigal🦊 |
|---|
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent