Lessons Learned   |    Technologies   |    Environment Setup   |    Features

Application developed during sixth edition of Next Level Week, delivered by RocketSeat. The objective was to build a frontend React application integrating Firebase authentication and realtime database to connect content creators and their audience on a platform to exchange questions and answers.The idea was implemented using Create React App, but I've already upgrade it to use Next.js framework.

Check out the application running!

🏆 Lessons Learned

• Setting up Firebase;
• Adding Firebase authentication to a frontend application;
• Add event listeners to fetch realtime data from Firebase;

🚀 Technologies & Resources

Frontend:

• React.js
• Next.js

Frontend/Backend:

• Next.js
• Firebase

Development:

• Visual Studio Code
• Node.js routines with NPM
• TypeScript
• ESlint

🔨 Setting up the Environment

Make sure to have Node.js 14+ and Yarn (NPM will do the job as well) installed in your machine and its node and npm shortcuts available through the command line, then use the following command to install dependencies:

# using NPM
$ npm install

This action should also create a .env file in the root of the project. If it was not created, use .env.example as reference to create it. In this file, you should add all the metadata to connect to a Firebase app (create one here)

With the environment variables set, all the other routines can be run:

$ npm run dev     # run Next development server in port 8080
$ npm run build   # build Next project tp production
$ npm run prod    # run Next server on built files (in port 8080)

⚡ Features Implementations

The main idea of the project was developed during the week of the event and the result is the one found in release v1.0. Afterwards, any incoming commits are intended to be incremental updates to improve the application, as proposed at the end of the event.

Besides, base project layout & design is available at Figma.

• Create project using create-react-app;
• Create project using create-next-app;
• And support to TypeScript;
• And support to SASS;
• Define custom fonts based on Figma mock-ups;
• Create and configure a FIrebase app;
• Enable authentication with Google account;
• Configure firebase service in ReactNext.js project;
• Create React Context for authentication;
• Work with Firebase Realtime Database;
• Sort questions by likes count;
• Add loading placeholder animations;
• Make application responsive;
• Add animations and transitions;
• Add a dark theme;
• Convert application into a PWA;

---

Also checkout the project developed in NLW #2, NLW #3, NLW #4 and NLW #5.