Technologies   |    Project   |    Getting Started   |    Todo   |    Roadmap   |    Contributing   |    License

🧪 Technologies

This project was developed using the following technologies:

• React
  • [Awesome NodeJS Tools](https://github.com/artesdosul/awesome-nodejs/tree/master
• Sass
• Firebase
• TypeScript

🔎 Project

Letmeasak! This is a project developed during the Next Level Week Together, presented by @diego3g CTO at @rocketseat during June 2021. Tool that has the purpose of solving questions during a live class. With it you can create private rooms where only those who have the room ID can access, participants can ask questions with Google Account, like on them. The room creator can mark the questions as answered, highlight and remove questions, the room can be closed.

Code room ReactJS:

-Md-otlvCJyPPoCBbprh

Link Demo room

Demo project home here.

🚀 Getting started

$ git clone https://github.com/araguaci/nlw-together-reactjs.git
$ cd nlw-together-reactjs

Follow the steps below:

# Install the dependencies
$ yarn

# Start the project
$ yarn start

The app will be available for access on your browser at http://localhost:3000

Note: to use the project on your own machine or deploy, it is necessary to follow the Firebase configuration rules below.

• Create a new project in Firebase (click here);
• On the project's configuration page, copy the string values ​​from firebaseConfig;
• Create a .env.local file for environment variables, copy the variables prefixed with REACT_APP from firebaseConfig in the firebase.ts file in the services folder and paste in the .env.local file;
• Assign string values ​​that were copied from the Firebase project to these variables;
• In RealTime Database, enter the following rules:

{
  "rules": {
    "rooms": {
      ".read": false,
      ".write": false,
      "$roomId": {
        ".read": "!root.child('/rooms/' + $roomId + '/endedAt').exists() || data.child('authorId').val() == auth.uid ",
        ".write": "auth != null && (!data.exists() || data.child('authorId').val() == auth.uid)",
        "questions": {
          ".read": "!root.child('/rooms/' + $roomId + '/endedAt').exists()",
          ".write": false,
            "$questionId":{
              ".read": true,
                  ".write": "auth != null && !root.child('/rooms/' + $roomId + '/endedAt').exists() && (!data.exists() || data.child('author/id').val() == auth.uid)",
              "likes": {
                ".read": true,
                ".write": "auth != null",  
              }
            }
        }
      }
    }
  }
}

• If you are going to use the Firebase hosting service, delete these files: .firebase folder, .github\workflows folder, .firebaserc, firebase.json and database.rules.json and follow the deployment instructions from the official Firebase documentation here;
• If you use your GitHub project to deploy, put the Firebase environment variables on the GitHub platform, follow the documentation here.

Todo

• Enviroment
• Layout
• Autentication Firebase
• Firebase Roles
• Create Room
• Create Questions
• Levels Admin/User
• Features Admin Rooms
• Deploy Firebase

Next Level

• Theme Dark/Light
• Responsible mode
• New features coming soon
• Login link for unregister user

Roadmap

• Stage 1 => together

  • fundamentos ReactJS

• Stage 2 => unidade

  • imutabilidade
  • ContextAPI
  • UseState => leaft state up
  • spreadprops => elements

• Stage 3 => em busca de evolução

  • firebase autorização: 32:48
  • montando tela para criar sala: 44:29
  • montando tela para criar pergunta: 1:01:28
  • consumindo perguntas firebase: 1:13:47

• Stage 4 => legado

  • themecontextprovider
  • componente criando perguntas: 8:32
    • desestruturando objetos para consumir: 10:23
    • JSON.stringify{objeto}
    • algoritmo de reconciliação: 18:30
  • criando hook para consumir sala: 21:50
  • montagem de sala admin: 26:55
  • encerrando sala +plus (gap): 30:16
  • aprendendo uns segredos (restoperator): 30:30
  • montando like/funcionalidades para perguntas: 30:40
    • slint => verificação de objetos dentro de objetos
    • dependência de hooks / unsubscribe: 51:55
  • remoção de pergunta: 1:02:27
  • encerrar sala: 1:06:54

• Stage 5 => juntos no próximo nível

  • sass rules
  • firebase-tools
  • firebase deploy

Tips

• Record para tipar objetos
• Sass rules
• useEffect / Hooks
• Spreadprops

Contributing

Thank you for being interested in making this package better. We encourage everyone to help improve this project with new features, bug fixes, or performance improvements. Please take a little bit of your time to read our guide to make this process faster and easier.

• Clone this repository: git clone https://github.com/araguaci/nlw-together-reactjs.git
• Create a branch with your feature: git checkout -b my-feature;
• Commit your changes: git commit -m 'feat | my new feature';
• Push to your branch: git push origin my-feature.

License

MIT License | Made by: Araguaci