luizwhite / iliketomoveit-nextjs-nlw04

An exercise incentivation app developed during #NLW4

I.like.to.move.it

📖 Sobre

ILikeToMoveIt é uma aplicação que possui uma simples interface de desafios, a qual traz a técnica de pomodoro para um painel interativo. À medida em que os desafios ― exercícios físicos ou de relaxamento ― são completados, fornecem experiência em um sistema de level-up simplificado.

Foi desenvolvido durante a semana NLW04, na trilha ReactJS da Rocketseat Education, em que foi visto e desenvolvido: Components, Context API, Modal e Notification API, em um ambiente com Next.js e Typescript, caracterizado por SSR e SSG

🔨 Funcionalidades

Além do conteúdo passado na semana (move.it 1.0), este projeto foi incrementado com:

→ Styled Components

→ React Modal Library

→ Mais estilização nos botões e no Modal

→ Login OAuth2 no Github e Logout utilizando NextAuth.js

→ Persistência dos dados no MongoDB Atlas

→ Persistência em sessão jwt de dados estáticos (nome, url da imagem de perfil, email, username)

→ Leaderboard

→ Compartilhar level no Twitter (thumb generator)

→ Theme Toggler - light/dark

→ Responsividade - 🚧 em desenvolvimento 🚧

🚀 Tecnologias e Ferramentas

→ Next.JS

→ ReactJS

→ TypeScript

→ MongoDB

→ NextAuth.js

🖌️ Layout de Referência

→ move.it 2.0

→ move.it 1.0

---

Repositório

GitHub: https://github.com/luizwhite/iliketomoveit-nextjs-nlw04

Deploy

Vercel: https://iliketomoveit-two.vercel.app

Instalação

# Abra um terminal e clone este repositório
$ git clone https://github.com/luizwhite/iliketomoveit-nextjs-nlw04.git

# Crie um arquivo .env.local e um arquivo .env.development e inclua as váriáveis de ambiente
# baseado no arquivo .env.example na raiz do projeto

# Instale as dependências
$ yarn

# Inicie a aplicação
$ yarn start

Bugs - NextAuth

Conforme essa issue, em produção (build) o NextAuth.js cria uma collection userUsers ao invés de users, então se estiver em desenvolvimento local utilize a collection users para persistir os dados (em ./src/pages/api/[...nextauth].js e na rota api challenges.ts, é onde encontrará o nome da collection)

Um workaround foi incluir uma env variable NEXTAUTH_COLLECTION ao arquivo .env.development para execuções em desenvolvimento (confira o arquivo .env.example)