mauricioromagnollo/proffy

👨‍🏫🧑‍🎓 Projeto Open Source desenvolvido utilizando React, Node e React Native, de uma plataforma de estudos online, onde conseguimos conectar alunos e professores para ter aulas online.

Projeto Open Source desenvolvido na #NextLevelWeek da Rocketseat, utilizando TypeScript, React, React Native e Node.

🚀 OBJETIVO

O objetivo do projeto é criar uma plataforma de estudos, onde conseguimos conectar alunos e professores para realizarem aulas online.

📝 DESENVOLVIMENTO

• ✅ Análise de Requisitos
• 🏗️ Arquitetura do Repositório
• 💾 Modelagem dos Dados
• 📦 Packages

💻 TECNOLOGIAS

Website (React + TypeScript)

• React Router Dom
• Axios

* Veja o arquivo package.json do projeto Web.

Server (NodeJS + TypeScript)

• Express
• DotEnv
• Knex

* Veja o arquivo package.json do projeto Server.

Mobile (Expo + TypeScript)

• Axios
• Expo Google Fonts
• React Navigation
• Expo Async Storage

* Veja o arquivo package.json do projeto Mobile.

Utilitários

• Protótipo: Figma | Protótipo(Web) | Protótipo(Mobile) |
• Editor: Visual Studio Code → Extensions: VSCode_Plugin_SQLite
• Markdown: StackEdit
• Commit Conventional: Commitlint
• Teste de API: Insomnia
• Fontes: Google Fonts - Archivo | Google Fonts - Poppins
• Emojis: Emojipedia | Markdown Emoji
• Wireframe Editor: Whimsical
• Anotações / Checklist: Notion
• Ícones: Ionicons | Feather Icons

🔧 CONFIGURAÇÃO DO AMBIENTE

Veja o arquivo de configuração do ambiente para saber como configurar corretamente a sua máquina para utilizar o projeto.

🍷 COMO UTILIZAR

Utilizando o Web

# Abrindo o diretório Web no terminal:
$ cd ./packages/web

# Instalando as dependências do package.json:
$ yarn

# Iniciando o projeto utilizando o script 'start' do package.json:
$ yarn start

O projeto será aberto em http://localhost:3000;

Utilizando o Server

Você precisa renomear o arquivo .env-example para .env e inserir as informações que condizem com o seu host:

$ cd ./packages/server
$ mv .env-example .env

# Abrindo o diretório do Server no terminal:
$ cd ./packages/server

# Instalando as dependências contidas no package.json:
$ yarn

# Iniciando o Server utilizando o script 'start' do package.json:
$ yarn start

# Instanciando as tabelas do banco de dados:
$ yarn knex:migrate

# Voltando a última alteração feita na tabela:
$ yarn knex:migrate:rollback

Utilizando o Mobile

Instale o aplicativo Expo no seu smartphone.

# Abrindo o terminal no diretório do mobile:
$ cd ./packages/mobile

# Executando o mobile no modo de desenvolvimento:
$ yarn start

Agora, abra o aplicativo do expo e no modo LAN faça o scan do QRCode.

Se tiver algum problema para executar o aplicativo nesse modo, tente desabilitar o firewall da sua máquina.

COMO CONTRIBUIR

Siga as instruções do arquivo como contribuir para contribuir corretamente.

🌟 AGRADECIMENTOS

Next Level Week	Rocketseat	diego3g	maykbrito

📚 REFERÊNCIAS

• React + TypeScript Cheat Sheet
• ReactJS | ReactJS pt-BR
• TypeScript
• dotenv & Typescript

📃 LICENÇA

Esse repositório está licenciado pela MIT LICENSE. Para mais informações detalhadas, leia o arquivo LICENSE contido nesse repositório.

Feito com ❤️ por Maurício Romagnoli

proffy's Issues

#Feat: Proffy profile

After authenticating a teacher in the WEB application, you must allow him to view his profile and also allow him to edit some of his registration information;

To do this, implement a route on your backend to change the profile. He must be able to change the following information:

• Change hours / days availability;
• Change whatsapp number;
• Change your bio;
• Change your hourly value per class;

The user's profile will always appear in the data he registered on the page, "Give Classes", so always when entering your profile, fetch this information from the database to display it in the fields.

#Architecture: Turn the entire project into a monorepo

• https://www.youtube.com/watch?v=k5TkBcUTJus&t=3282s

#Feat: Add option for the teacher to remove a schedule

#Fix: User being registered more than once in the system

• Solve the problem on the server to not allow the same user to be registered more than once;
• Use some unique ID to check if a user has already been registered;

#Feat: Application logout

• Implement a logout function in the application, so that the user can switch accounts if desired.

Autenticação no React Native / ReactJS com Context API & Hooks | Masterclass #12

#Feat: Stylization of buttons and links

- Remove the click outline:

.page-header .top-bar-container a {
  outline: none;
}
.page-header .top-bar-container a {
  background: color....;
}

- Add a shadow effect when the button is clicked, giving depth effect

Example:

button {
  box-shadow: 2px 4px #000;
}
button:active {
   box-shadow: none;
}

#Feat: Deploy the application

https://www.notion.so/Deploy-NLW-56f2a980c20e41d6b1dd22a4d1348e6e

#Feat: Viewing available teacher schedules

In your list of proffys, if you look at the layout, you will notice that all available teachers' schedules are displayed just below their bio. Implement this functionality.

For this, you need to bring, along with the teacher's data, the information of your available days making a join with the CLASS_SCHEDULE table to return this data along with the listing.

SQL no Node.js com Knex.js | Masterclass #13

#Feat: Mobile Splash Screen

• Gerando APK (Android) e IPA (iOS) com React Native & Expo | Code/Drops #15;

#Feat: add ESLint and Prettier (Airbnb)

#Doc: Add documentation cover image

• Develop image in Photoshop with project printing in web, mobile and Tablets / iPads;

# Commitlint

Add Commitlint to the repository to standardize commits.

#Feat: New screens for the web application

• The screens are drawn in the figma file inside the directory:
  ./layouts/fig/Proffy_Web_2.0.fig

#Feat: Add React Native env variables

#Fix: add styling to Firefox

#Feat: User authentication

Step by step

• Create server functionality for the user to register by entering email and password;

  • Before saving the user's password to the database, remember to encrypt the password to keep it secure. For this, you can use the bcrypt library;

• After allowing the creation of a password for all registered users, a route for user login is required. This route should validate the user's password in the database and a good strategy to keep the user logged in for a certain time is to use JWT tokens.

  • To keep the user logged on the cell phone, if he clicks the "Remember me" option, you can save the JWT token in the LocalStorage (Web) or AsyncStorage browser on your mobile application. If he does not select Remember, you can just keep him authenticated during a session (until you close the application).

References

• Vídeo: Autenticação no React Native / ReactJS com Context API & Hooks | Masterclass #12
• Blog: Autenticação JWT no React Native com API REST em NodeJS
• Blog: Fluxo de autenticação com Token JWT no React Native

#Feat: Write Unit and Integration tests

• Write tests using Jest;
• Add "coverage" badge to the documentation;
• Write the integration tests according to the User Stories;

#Feat: New screens for the mobile application

• The screens are drawn in the figma file inside the directory:
  ./layouts/fig/Proffy_Mobile_2.0.fig

#Feat: Saving your favorite proffys to the database

Now, you must save your favorite proffys to the database! For this, you can create a FAVORITES table that will save the id of your logged in user and the id of your favorite proffy.

So, every time you enter the favorite proffys page, you will have updated your favorite proffys.

#Feat: Password recovery

• Create password recovery functionality on the login screen;

References

• Recuperação de senha e envio de e-mail no Adonis | Behind the Code #02
• [API NodeJS + Express + Mongo] Recuperação de senha com NodeMailer | Diego Fernandes

#Feat: Add Input type select on Mobile

https://github.com/react-native-community/react-native-picker

#Feat: Pagination in the listing of proffys

The user connected to the application can view all available teachers on the platform, but displaying all teachers at once can be quite detrimental to the performance of your application.

To solve this problem, implement a pagination in the list of available teachers. This pagination must be done when searching for items in your api, and you can send information through the body of the request, for example "page": 1 so that you know which items to return from the database.

https://blog.rocketseat.com.br/scroll-infinito-no-react-native/

#Bug: Mobile keyboard overlaying the interface