Raro Class is a web application built with React that provides online classes and educational resources to students. This repository contains the frontend codebase for the application.
The application includes the following features:
- User authentication and authorization
- Course listing and filtering
- Video lessons playback
- Discussion forum for each course
- Quizzes with multiple-choice questions
- Leaderboards to show top performers
To run the application locally, follow these steps:
-
Clone the repository:
git clone https://github.com/eduardo-borges-goncalves/Raro-Class.git -
Install the dependencies:
npm install -
Start the development server:
npm start
The application should now be running on http://localhost:3000.
The following technologies were used to build the application:
- React
- React Router
- Redux
- Axios
- Bootstrap
- Font Awesome
Contributions are welcome! If you find any bugs or have suggestions for new features, please open an issue or submit a pull request.
This project is licensed under the MIT License.
Este projeto foi criado visando permitir aos alunos dos cursos da Raro Academy poderem assistir as gravações das aulas, além de disponibilizar para toda comunidade aulões públicos.
Para começar, baixe o projeto para sua máquina utilizando o git. Caso não tenha o git instalado, baixe aqui 🔗
git clone https://github.com/rarolabs/raro-academy-react-grupo-4.git
Por conseguinte, caso ainda não tenha o node instalado, baixe primeiro o programa aqui 🔗. Após a instalação, abra a pasta em que você baixou o projeto no terminal e baixe as dependências com o seguinte comando:
npm install
Se tudo correu bem, é hora de rodar o projeto, digite no terminal o seguinte comando:
npm start
Novamente, se tudo deu certo, você já pode começar a se divertir! 🎉
- 📁 Public
- 📁 Src
- 🔧 Configurações
- 📘 Documentação
- README.md
A priori, esse sistema foi construído com React, e, por isso, tem uma estrutura flexível, sendo implementada de acordo com as boas práticas vigentes e à medida que foi sendo percebida a necessidade de determinadas pastas. Por conseguinte, ele usa algumas bibliotecas para facilitar seu desenvolvimento, entre elas: react router, styled components, js-cookies, axios, zustand, além de claro, react-dom. Assim,
-
O roteamento é feito pelo React-Router, usando a tag BrowserRouter na raíz do projeto, o que permite a divisão em rotas com as tags Routes, Route e Links.
-
Os estados globais são configurados na pasta Context, usando Context.
-
A conexão com a API é realizada por meio do Axios, que é configurado na pasta services, em api-client.ts. Essa configuração permite deixar o código mais legível.
-
O estilo é feito com as bibliotecas Styled Components e Material UI, que permite a edição de CSS em arquivos JS/TS, facilitando a reutilização de componentes.
-
A linguagem usada é o TypeScript.
-
A autenticação é realizada com Cookies, por meio da lib Js-Cookies.
A pasta public contém os assets necessários ao sistema, ou seja, imagens, logos e coisas do tipo, além de possuir o único arquivo html em que será renderizada toda a aplicação. Foco especial na div id="root" , que é capturada pelo index.tsx, document.getElementById('root'), sendo esta a raíz do nosso sistema.
Já a pasta src contém toda a parte lógica do projeto, além da estilização.
As Rotas são configuradas no app.tsx e no index.tsx, passando as páginas por meio de suas propriedades element.
O Estilo é configurado globalmente na pasta Styles e individualmente em cada pasta dos componentes. Utilizamos também a lib Material UI, nos inputs e icons do projeto.
A aplicação é divida em Componentes, para facilitar sua legibilidade e manutenção. As páginas estão intuitivamente na pasta Pages, ao passo que seus componentes menores e reaproveitáveis estão contidos na pasta Components.
Nesta pasta, temos hooks próprios da aplicação, como o useLogin, que é aproveitado em mais de uma página.
A pasta Types contém os tipos criados e reutilizados na aplicação.
O arquivo .gitignore é voltado às configurações do Git, sendo bastante útil para conseguir ignorar alguns arquivos como o node_modules na hora de enviar o projeto para GitHub 
, por exemplo.
Os arquivos index.d.ts e tsconfig.json servem guardam as configurações do TypesScript. O arquivo index.d.ts tem a finalidade de declarar tipos para aplicações ou bibliotecas originalmente feitas em JavaScript.
Os arquivos package são configurações do projeto.
A aplicação conta com cinco páginas, a saber:
- Login
- Register
- Recovery Password
- **Home **
- Video
Utiliza o hook useLogin para autenticar o usuário na API, guardar o token e o id do usuário nos cookies por meio da função handleAuthUser. Esta, segue o padrão de nomenclatura da comunidade react, em que as funções chamadas por um usuário iniciam-se pelo termo handle. Além disso, recebe o evento criado pelo clique no botão de entrar, e passa à API os valores guardados nos estados de email e senha.
O RegisterPassword, ou SignUp possui uma função para validação dos dados do usuário, exigindo que o nome e a senha possuam no mínimo 3 e 6 caracteres respectivamente. Por conseguinte, confirma se as duas senhas são iguais e chama a função responsável por cadastrar o usuário, registerUser(). Essa passa nome, email, senha e código de acesso para a API, além de alterar o texto do botão para "cadastrando". Em caso de erro, é alterado o estado de erro e mostrado na tela para o usuário.
Esta página serve para o usuário criar uma nova senha, caso tenha esquecido a sua. É realizado envio de um código para o email cadastrado pelo usuário, para que a partir da validação deste código, o usuário possa redefinir sua senha.
Esta é a página principal do site, que exibe a lista de vídeos públicos (caso usuário não esteja logado), e a lista completa de todos os vídeos, organizados em sessões, contendo seu tempo de duração e a opção de favoritar o vídeo, facilitando a navegação do usuário.
A página de detalhe do vídeo é o local onde o usuário vai conseguir assistir os vídeos, receber sugestões de vídeos para assistir em sequência, ler os comentários dos outros usuários, reagir aos mesmos e deixar seus próprios comentários. Vale lembrar que essas funcionalidades somente são exibidas se o usuário estiver logado. Caso contrário, só poderá assistir aos vídeos públicos.
-Bernardo Andrade
-Eduardo Borges
-Jonathan Marvin Chu
-Luciana Moreira
-Marlon Lamartine