What is it • Technologies • Using • Build yours • Author

•

Typescript React app:

le.Q

A webapp for collecting questions for answer live. Created in the NLW#6 event.

What is it

A React app developed in a online event NLW#6 (Next Level Week, 6th edition), by the online programming school Rocketseat.

What does it do?

• Large (desktop) size layout only

• Create rooms by authenticating with Google

• Access rooms by it's code

• View room freely

  • Copy room code on button

  • See all existent questions

  • questions highlights

  • questions like count

• Authenticaded user actions

  • Like other's not open questions

  • Can't like your own questions

• Room admin actions

  • Highlight one question at time

    • highlighting is a toggle action. Can undo

    • highlighting one, un-highlight the rest

  • Mark question as answered, closing it

    • definite action, can not be reopened

    • closing un-highlight question and disables this button

  • See question's like count

    • Can not like'm though

  • Delete any question. Then it's gone for good

  • Don't have access to rooms you create as a user view

  • So can't ask questions to your self'

  • Close rooms

    • Not more access to room with it's code
    • Rooms is not recoverable by user

You can check it running over here

What you will find in it

• Loging with other methods
  • Github
  • Apple
  • Microsoft
  • Phone
  • Passwordless email
• Responsiveness
• Unlogin/change account
• Direct share link option
• Dark theme
• Scroll all clients to the just highlighted question
• Allow installing as PWA

Using it

The most recent state of this project is automatically build to Vercel and Firebase too.

You can run it at any of those:

• https://le-q-736db.firebaseapp.com/

• https://le-q.vercel.app/

• https://le-q.herokuapp.com/

• https://le-q.netlify.com/

Integrated Technologies

This project has the following dependencies

production

• ReactJS
• Sass
• Firebase
• react-inlinesvg

development

• Typescript
• NodeJS
• Yarn or Npm
• classnames

Toolset usage

• Extensive use of React's State and Context APIs
• Using Effect APIs too.
• Creation of custom Hooks.
• Scss (Sass) for advanced styling.
• A colors "library" scss file.
• Css Flexbox.
• Svg icons as image and inline for dynamics.

Make yourself one of these

On github.dev

The fastest to see the code, is making use of new github.dev, that allow open a github repo on VS code in the browser.

Just hit . (dot) on this repo, and it's done.

Or you can also edit the url, to change github.com to github.dev

https://github.dev/JonatasAmaral/le.Q.git

It can't run the app though. There is no terminal.

On Gitpod

The easy way to get your dev enviroment runing it, is clone this repo to a cointainer in the cloud. If you already have an account:

On your local machine

To do it locally, you need to install git and NodeJS. I'm using yarn to build, though you can use npm.

# Clone this repo
$ git clone https://github.com/JonatasAmaral/le.Q.git

# Open folder (rename it before, if you want to)
$ cd le.Q

# Install/update the dependencies
$ yarn

# Or, for npm
$ npm install

# Get local API up in one terminal (make sure to set baseURL in /src/services/api.ts to htts://localhost:3000 for that to work)
$ yarn server

# Run app in a separate terminal
$ yarn dev

# Or
$ npm dev

# Access localhost
http://localhost:3000

About the author

Thank's and credits to Diego Fernandes and his team at Rocketseat.

Jonatas Amaral

Designer, Computer Engeneering student.

License

This project is under the MIT license.