rogeriocassares/rocketseat-nlw-06-reactjs-letmeask

NextLevelWeek 6 - ReactJS Tech Trail

by roger10cassares

Arise, shine, for your light has come, and the glory of the Lord has risen upon you. - Isaiah 60:1

This is a ReactJs Project Developing During the 6th Edition of the Next Level Week event promoted by Rocketseat

Check It Out!

You can easily test thiss App deployed at Firebase Hosting Service! The App bellow was deployed at the https://letmeask-106bd.web.app.

This is the iframe of the App:

<iframe src="https://letmeask-106bd.web.app/" title="W3Schools Free Online Web Tutorials" width="400" height="600"> </iframe>

Quick Start

Prerequisites

• Node >= 10.16
• npm >= 5.6
• yarn = 1.x
• Firebase Account
• git
• VSCode (optional)

Make sure Nodejs, NPM, Yarn and Git are correctly installed running the following commands in the Terminal

node -v
----
v14.16.0
----

npm -v
----
6.14.8
----

yarn -v
----
1.22.5
----

git --version
---
git version 2.25.1
---

Clone this repository

Type in the Terminal:

git clone https://github.com/roger10cassares/njs_letmeask-nlw6.git

Go to this repository

Type in the Terminal:

cd njs_letmeask-nlw6

Install the Dependencies

Type in the Terminal:

yarn

Start the Project:

Type in the Terminal:

yarn start

Go to the Running Web App

If you have not chossen an specific port, the default nodejs project port is the 3000. So, just following the link bellow to go to your Home Web Page. In most cases you shall be automatically redirected when execute the yarn start command.

http://127.0.0.1:3000

.env.local

PLEASE, NEVER PUBLIC YOUR ENVIRONMENT KEYS!

This project has created a sinple App account. If you need just test the App, you can use this keys, creating ans .env.local file at the top level directory of this project with this content:

# Firebase
REACT_APP_API_KEY="AIzaSyAY72ikjriVeip7A5ia8197Bm0ipO_OLYI"
REACT_APP_AUTH_DOMAIN="letmeask-106bd.firebaseapp.com"
REACT_APP_DATABASE_URL="https://letmeask-106bd-default-rtdb.firebaseio.com"
REACT_APP_PROJECT_ID="letmeask-106bd"
REACT_APP_STORAGE_BUCKET="letmeask-106bd.appspot.com"
REACT_APP_MESSAGING_SENDER_ID="88274146668"
REACT_APP_APP_ID="1:88274146668:web:7975975f1ef73ec3408f49"

s a single test account a

If you need tje .

Next Level Steps

[ ] Make it Responsive!

<iframe width="560" height="315" src="https://www.youtube.com/embed/H91DhKPjhPk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

[ ] Use styled-components

<iframe width="560" height="315" src="https://www.youtube.com/embed/R3S8DEzEn6s" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

[ ] Make some ESLint and Prettier configs

<iframe width="560" height="315" src="https://www.youtube.com/embed/1nVUfZg2dSA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

[ ] Genarate a PWA [Progressive Web Application]

PLease, access https://blog.rocketseat.com.br/pwa-o-que-e-quando-utilizar/

<iframe src="https://blog.rocketseat.com.br/pwa-o-que-e-quando-utilizar/" title="W3Schools Free Online Web Tutorials" width="400" height="600"> </iframe>

[ ] Create a Light /Dark Theme Feature

<iframe width="560" height="315" src="https://www.youtube.com/embed/ngVU74daJ8Y" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

[ ] Test with another databases

• firestore database
• supabase (Open Source)
• faunadb