remember

Um aplicativo voltado para casais que desejam guardar momentos especiais e lembranças de sua história e poder ver tudo isso em uma linha do tempo.

Este projeto oferece uma interface de usuário desenvolvida com Next.js e Tailwind para a API de uma página de linha do tempo em Node.js para a disciplina de Desenvolvimento Full Stack Avançado do programa de pós-graduação em Desenvolvimento Full Stack da PUC-Rio.

Screenshots

Design da UI no Figma

Clique aqui para visualizar o design da interface no Figma.

Technologias

• React
• TypeScript
• Next.js
• Tailwind
• Axios
• GitHub OAuth

Como executar

Pré-requisitos

Antes de começar, você precisará ter as seguintes ferramentas instaladas em sua máquina: Git, Node.js e uma conta no Github. Além disto é bom ter um editor para trabalhar com o código como VSCode

Rodando a aplicação

# Clone este repositório
$ git clone https://github.com/eliasmatheus/remember-app-web

# Acesse a pasta do projeto no terminal/cmd
$ cd remember-app-web

# Instale as dependências
$ npm install

# Copie o arquivo .env.example e renomeie para .env.local
$ cp .env.example .env.local

# Preencha o arquivo .env.local com o Client ID do seu Github OAuth App, conforme instruções abaixo em "Conectando o frontend com o backend"

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

# A aplicação inciará na porta:3000

Abra o endereço http://localhost:3000/ para acessar a aplicação.

Rodando o backend

Para rodar o servidor, acesse o repositório do backend e siga as instruções.

Conectando o frontend com o backend

Para conectar o frontend com o backend, é necessário criar um arquivo .env.local na raiz do projeto de acordo com o arquivo .env.example e preencher a variável NEXT_PUBLIC_GITHUB_CLIENT_ID com o Client ID do seu Github OAuth App.

Para conseguir um Client ID do Github OAuth App, siga as instruções deste link.

⚠️ Atenção

O campo Authorization callback URL deve ser preenchido com o endereço de autenticação da aplicação (api/auth/callback). Este é o endereço que para o qual o Github irá redirecionar o usuário após a autenticação.

Se o frontend estiver rodando em localhost:3000, a URL deve ser: http://localhost:3000/api/auth/callback.

Após criado, seu Client ID estará disponível na página do seu OAuth App. Copie e cole o valor do Client ID no arquivo .env.local:

NEXT_PUBLIC_GITHUB_CLIENT_ID=cole-aqui-o-client-id

A variável NEXT_PUBLIC_API_URL já vem preenchida com o endereço da API do backend rodando na porta 3333:

NEXT_PUBLIC_API_URL=http://localhost:3333

Altere esta variável caso a API esteja rodando em outra porta ou endereço.