inflearn logo

It’s OK if you only know HTML/CSS/JS! A hands-on project completed with React and Firebase

This course guides you through building a web application that implements core features used in real-world services, including login, post management, file uploads, and profile management, using React and Firebase. You will progressively build a complete web service by implementing email and social login with Firebase Authentication, Firestore-based data storage and real-time data processing, file uploads using Firebase Storage, and profile management. This course is designed to help those learning frontend development understand how to quickly build web services with Firebase without the complexity of setting up a server.

18 learners are taking this course

Level Basic

Course period Unlimited

React
React
Firebase
Firebase
firebase-database
firebase-database
firebase-firestore
firebase-firestore
React
React
Firebase
Firebase
firebase-database
firebase-database
firebase-firestore
firebase-firestore

What you will gain after the course

  • You can understand how to set up the development environment, including creating and configuring a Firebase project.

  • You can learn how to integrate a React application with Firebase services.

  • You can implement sign-up and login functionality using Firebase Authentication.

  • You can learn how to implement social login features such as Google login.

  • You can implement functionality to create, retrieve, update, and delete posts using Firestore.

  • You can implement image previews and file upload functionality using Firebase Storage.

  • You can try implementing user profile editing and profile timeline features.

  • You can also gain experience in deploying a completed web application.

"You’ll miss out if you don’t claim it now! Just subscribe to YouTube and pay half the course fee"

Subscribe & Like & Comment Event

Complete a simple mission and receive a 50% discount coupon instantly. Don’t miss this incredible limited-time offer—claim it now!

Participate in the YouTube subscription & comment verification event: https://forms.gle/wcD2wRVeaG7B7fSj7

At a glance

In this course, you will build a fully functional web application from start to finish using React and Firebase.

Implement core features used in real-world services step by step: user registration and login using Firebase Authentication,
creating, viewing, editing, and deleting posts with Firestore Database,
image upload functionality using Firebase Storage,
and user profile management.

You will also experience the process of deploying the completed application as a real web service using Firebase Hosting.

This course is suitable for those who want to learn how to quickly build web services using only React + Firebase without setting up a complex server.

Through this course, you will complete a social media-style web application with a login feature yourself.

Here are the main learning points for each section.

Section 1. Getting Started with React, Firebase, and Your First Project

First, we will look at the overall structure and features of the web application you will complete in this course.
You will understand the overall process of implementing commonly used features in real-world services, such as user login, creating and viewing posts, file uploads, and profile management.

Next, you will create a Firebase project and complete the basic setup.
Using the Firebase console, you will create a project and configure it so that Firebase can be used in a web application.

You will also learn how to create a React application and integrate it with Firebase.
Understand the environment setup and initial structure to prepare for using Firebase features naturally in subsequent exercises.

Section 2. From Login to Logout! Complete User Authentication

Implement a user login system using Firebase Authentication.

First, understand the basic concepts of Firebase Auth and implement email-based login functionality.
Create a login form in React and handle the actual login process through the Firebase Authentication API.

You will also learn how to improve user convenience by implementing social login features such as Google account sign-in.
By implementing login state management and logout functionality, you can experience the authentication flow used in real-world services.

Firebase Login: Set Up Email/Password and Google Sign-In

Section 3. Complete Post CRUD! Handling Real-Time Data

Implement the post feature using the Firebase Firestore database.

Implement functionality to save user-entered posts to the database and display the saved post list on the screen.
We will also use Firebase's real-time data functionality to automatically update the screen whenever a post is added.

You will also implement functionality to edit or delete posts written by the user.
In particular, you will learn how to manage permissions so that users can only edit or delete their own posts.

Through this process, you will practice the basic CRUD (Create, read, update, delete) functionality using Firebase Firestore.


Attach text and images, then click the Send button to execute the post creation function.

The post is saved to the Firebase database.

Section 4. Upgrade the Post Functionality with Image Uploads!

Implement file upload functionality using Firebase Storage.

Implement a feature that provides a preview before uploading when the user attaches an image.
You will then learn how to upload the selected file to Firebase Storage and save the URL of the uploaded file along with the data.

You will also implement a way to delete unnecessary files.
You will learn the basics of managing files in a web application using Firebase Storage.

Preview the attached image using the FileReader API.

File Preview

Section 5. Complete Your Own Profile and Timeline

Implement user profile management functionality.

Users can upload their profile image and edit their profile information.
Uploaded images are stored in Firebase Storage, and the user profile is updated using the image URL.

Learn how to change the username and profile photo using Firebase's updateProfile API.
You will also learn how to process uploaded images so that they are reflected in the actual user information.


This enables you to implement user account-based personalization features.

Change the Profile Image

Implement a timeline feature that allows logged-in users to view the posts they have written on their profile page.

Learn how to use Firebase Firestore’s query functionality to retrieve only the data created by a specific user (uid).
You will also learn how to sort data using orderBy and where and retrieve only the data you need.

Through this, you can understand how to retrieve data for each user and sort the data.

Retrieve data using `where` and `orderBy`.

Section 6. Publish Your Web App to the World and Wrap Up the Project!

In the final section, you will deploy the completed React application using Firebase Hosting.

You will practice installing the Firebase CLI, initializing the project, and deploying the built React application to Firebase Hosting.

Firebase Hosting is CDN-based, enabling fast service delivery, and provides free SSL certificates, making it easy to set up secure connections.

Through this course, you can experience the entire process of making the web application you developed publicly available as a real service.

Deploy using Firebase Hosting.

Why should you take this course?

1️⃣ Build a fully featured Firebase-based web app yourself.

Rather than simply explaining features,
you will complete a web application with the structure of a real service that includes login, posts, file uploads, and profile management.


2️⃣ You can build a web service without a backend.

With Firebase, you can implement everything from
authentication, databases, and file storage to deployment without separate server development.

Even beginners can relatively easily gain full-stack web development experience.


3️⃣ You can naturally learn practical React patterns.

As you progress through the course, you will also learn the following practical patterns.

  • React component structure design

  • State management and data flow

  • Real-time data processing

  • User permission handling

  • File upload handling


4️⃣ Experience the process all the way through deploying a real service

It doesn’t end with development.
You will deploy the completed web application yourself using Firebase Hosting.

Through this, you can experience the entire process from development to making the service public.


5️⃣ A step-by-step hands-on course for beginners

Even those encountering Firebase and React for the first time can follow along as we
carefully explain each step, from environment setup through deployment.

Important Notes Before Enrolling

1. How Practice Source Code Is Provided for Each Lesson

This course is practice-oriented, so completed source code for each lesson is not provided separately.
Therefore, we recommend writing the code yourself while watching the lectures.

However, to allow you to review the overall structure after completing the course, the final source code from the stage immediately before deployment is provided.

The source files from the pre-deployment stage are provided in Lesson 17.

2. Lecture Notes Provided

The key content covered in each lesson is provided in the form of lecture notes.
The notes used to explain the material in the videos are provided as lecture notes.

Lecture Notes Provided

3. Information on Firebase Billing Setup

When creating a Firebase project, you may need to set up billing.
No actual charges will be incurred during the usual course exercises.

However, when implementing the file upload feature (Firebase Storage),
you need to switch to the paid plan (Blaze Plan).

In this case, actual charges may be incurred depending on usage, so we recommend the following.

  • If you do not use the file upload feature, you do not need to upgrade your plan.

  • If you no longer plan to use the project after completing the course exercises,
    we recommend deleting or closing the Firebase project.

The Blaze plan is required to implement the file upload feature.

Practice Environment Guide

Operating system

  • Windows

  • macOS

(Most steps can also be carried out in a Linux environment.)

Development Tools

The hands-on exercises will be conducted using the following tools.

  • Node.js (LTS version)

  • npm

  • Visual Studio Code; other editors are also supported

  • Google Chrome

Key Technologies Used

The core technologies used in the course are as follows.

  • React

  • Firebase Authentication

  • Firebase Firestore Database

  • Firebase Storage

  • Firebase Hosting

Firebase Account

You need a Google account for the course exercises.
You will use your Google account to log in when creating a Firebase project.

Recommended for
these people

Who is this course right for?

  • Those who want to build a real web application using React

  • Those who want to learn how to build web services without a backend using Firebase

  • Those who want to directly implement actual service features such as login, bulletin boards, and file uploads.

  • Those who want to create a web application project for their portfolio

  • Those who want to learn frontend development while also gaining experience with basic backend functionality.

  • Those who want to experience the web service development process based on Firebase from the beginning

Need to know before starting?

  • It would be good if you understand the basics of HTML/CSS syntax.

  • It will be helpful if you are familiar with basic JavaScript syntax.

  • A basic understanding of React concepts (components, state, and props) will be helpful for taking this course.

Hello
This is ezweb

Career Verified

3,001

Learners

77

Reviews

4

Answers

4.9

Rating

15

Courses

I am a web front-end instructor specializing in everything from practical front-end training and on-site lectures for companies and institutions to producing online courses.

■ Specialized Front-End Courses
HTML/CSS, JavaScript, React, Firebase, Figma, AI-assisted web development, and more
I provide step-by-step training from web publishing to practical front-end development.

■ Available to lecture at companies, organizations, and educational institutions
Training for corporate practitioners, KDT programs, university and academy special lectures, etc.
Curricula can be tailored to the target audience and their skill level, and on-site lectures can be provided.

■ Online course design and production available
From planning online lecture curricula to creating teaching materials, PPTs, hands-on materials, and sample code,
we can handle the entire process of producing online educational content, including lecture filming and content delivery.

■ Both online and offline classes available
In addition to offline academy classes, we offer various formats tailored to the educational environment,
including live online classes and recorded content production.


■ Key Activities

  • ESTSOFT KDT Frontend Course

  • Green Computer Academy Web Publishing and Front-End Courses

  • Runs the web publishing YouTube channel ‘ezweb’.

  • Authored books on web publishing and web design


■ Books
2021.07 / The Complete Guide to Using Figma for Web Design & Web Publishing / BJ Public

2022.08 / Web Publishing for Those New to Coding  / Youngjin Publishing

2023.10 / 2024 SD Edu Yuseonbae Web Design Craftsman Practical Exam Tutoring Notes / Sidaegosi Planning

2024.11 / 2025 SD Edu Yuseonbae Web Design Technician Practical Exam Tutoring Notes / Sidae Exam Planning

2025.11 / 2026 SD Edu Yoo Seon-bae Web Design Craftsman Practical Exam Tutoring Notes / SidaeGosi Planning

 

More

Curriculum

All

18 lectures ∙ (5hr 11min)

Course Materials:

Lecture resources
Published: 
Last updated: 

Reviews

Not enough reviews.
Please write a valuable review that helps everyone!

ezweb's other courses

Check out other courses by the instructor!

Similar courses

Explore other courses in the same field!

25% off for new members

$15.40

25%

$15.40