Projeto: Sharing Talks
Plataforma que conecta eventos da comunidade a voluntários(as).
Desenvolvedoras: Alessandra, Isabella, Kathleen, Mariana e Olívia.
Orientadoras: Adriele, Becca, Laís e Marília
React bootcamp @WoMakersCode 🦄
Sobre o projeto ⭐️
Principais funcionalidades:
- Gerenciamento de eventos da comunidade;
- Visualização e submissão de palestras;
- Criação de grupos.
Wireframe:
Para ver as definições das páginas, clique em aqui e aqui.
Tecnologias usadas:
- React;
- React Router;
- React Hooks;
- Ant Design;
- Formik;
- Node;
- Nodemailer;
- Express;
- Jest;
- Export Excel;
- React Login Facebook;
Como instalar e rodar ? 🚀
Pré-requisitos:
-
Clonar o repositório em sua máquina, usando comando abaixo em seu terminal:
git clone https://github.com/React-Bootcamp-WoMarkersCode/call-of-papers.git
- Agora basta instalar as dependências do seu projeto, digitando no terminal:
npm install
- Adcione um arquivo .env na raiz do projeto com as seguintes configurações:
NODE_PATH=src/
SKIP_PREFLIGHT_CHECK=true
PASSWORD_EMAIL= ***
REACT_APP_FACEBOOK_ID = ***
REACT_APP_GOOGLE_ID= ***
REACT_APP_CIPHER_KEY= **
- E por ultimo dar o comando para rodar seu projeto:
npm start
Obs: O projeto irá abrir em seu navegador, rodando no http://localhost:3000
Como funciona Json-server ? 🚀
Baseado em um único json que contém events, lectures e profile. Pode-se efetuar o GET,POST, PUT e DELETE. Basta apenas escrever http://localhost:3001/events, como por exemplo.
Obs.: Ao rodar o projeto, ele irá criar uma API fake em http://localhost:3001/ e o front http://localhost:3000/
Exemplo:
| Request | URL | Detalhes |
|---|---|---|
| GET | /events | Busca todos os eventos |
| GET | /events/1 | Busca um evento |
| GET | /events?local=Online | Busca um evento que seja online |
| GET | /events?_limit=2 | Busca apenas dois eventos |
| GET | /events?_limit=2&_page=1 | Busca apenas dois eventos por página |
| POST | /events | Salvar um evento |
| PUT | /events/1 | Editar os dados do evento |
| DELETE | /events/1 | Remove o evento |
Exemplo de filtro - Palestra:
/lectures?status=approved&_limit=10&_page=1
Obs.: Realiza filtro nas palestras aprovadas, trazendo apenas 10 por página
Como executar os testes usando o Jest ? 🚀
A aplicação possui um exemplo de teste utilizando Jest! O teste simula o cadastro de um novo evento. Para vê-lo em ação, basta executar o seguinte comando:
npm run test