Build Product Hunt with ReactJS and Firebase

4h 47m 27s
English
Paid

Course description

In this course, you will be learning how to build ReactJS app in ES6 syntax (a modern version of Javascript) with Firebase, a real-time back-end by cloning Product Hunt. Also, after this course, you will know how to design and architect a React app in Flux architecture with Alt. React JS is a Javascript library for building user interfaces. It's flexible, fast, easy to learn and fun to work with. Reactjs is designed to make the process of building modular, reusable user interface components simple and intuitive.

Read more about the course

React was developed at Facebook and focuses on the 'View' aspect of MVC in web applications. React was built for the purpose of developing applications that are large in nature and have to deal with time changing data.

What skills will we learn during this project?

  • Learn how to design and build React components

  • Learn how to reuse and nest components.

  • Working with ES6 - a modern version of Javascript. Most of tutorials on the market are in ES5.

  • Learn how to create your own style with CSS.

  • How to work with Real-time database Firebase 2 & 3

  • How to architect and build your application with Flux design in mind using Alt.

  • How to connect front-end with real-time back-end.

What features will we build in this project?

  • Authenticate user with Facebook popup.

  • Home page listing all products in real-time.

  • Page to create/edit a product.

  • Navbar showing Popup menu and User profile.

  • Getting data from Real-time database from Firebase.

  • Voting function for products.

  • Commenting function for products.

Prerequisites/Requirements

  • You should understand basic of HTML and CSS.

  • Know what function is in Javascript.

  • Basic understand of how State and Props works in React. Check my ReactJS for Newbies course.

  • You want to learn ReactJS :)

Watch Online

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 43 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: What's about this project

All Course Lessons (43)

#Lesson TitleDurationAccess
1
What's about this project Demo
01:44
2
Tech stacks we're going to use
01:48
3
Firebase
01:12
4
NodeJS
02:12
5
Atom
01:46
6
Create project from empty folder
05:54
7
Our first React app
09:37
8
Create Home Page component
07:24
9
Add style to the home page
04:59
10
Update Home page component
10:50
11
Add Style
08:01
12
Create Product List component
05:03
13
Create Product Item component
08:00
14
Refactor Product Item component
03:46
15
Create Navbar component
11:03
16
Create Popup component
06:35
17
Refactor Popup component
06:43
18
Create Login Popup component
09:33
19
Create PostPopup component
05:12
20
Add PostPopup to Navbar
07:09
21
Add Style to PostPopup component
06:22
22
Create ProfieMenu component
08:17
23
Handle Profile Menu events
07:02
24
Create Product Popup component
05:27
25
Add Header to Product Popup
10:54
26
Add Comment box to Product Popup
06:40
27
Add Comments to Product Popup
07:14
28
Install and Setting up Firebase
02:52
29
Get Product List from server
05:03
30
Create Facebook app
03:25
31
Login with Facebook
06:36
32
Flux Struture
06:21
33
Get Started with Alt
13:15
34
Refactor Login process
08:34
35
Session and Logout
09:40
36
Refactor Product List
07:54
37
Post Product to database
07:55
38
Fixing Product List
05:54
39
Up vote
10:36
40
Fixing Up vote logic
06:50
41
Create Upvote component
06:04
42
Add Comments
08:51
43
Display Comments
07:10

Unlock unlimited learning

Get instant access to all 42 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

The Ultimate React Course 2024: React, Redux & More

The Ultimate React Course 2024: React, Redux & More

Sources: udemy
In 2023, React is still the #1 skill to learn if you want to become a successful front-end developer! But it can be hard. There are so many moving parts, so ma
67 hours 14 minutes 41 seconds
React Three Fiber: The Ultimate Guide to 3D Web Developmen

React Three Fiber: The Ultimate Guide to 3D Web Developmen

Sources: Wawa Sensei
3D development is a vast field with many different techniques. This comprehensive guide will provide you with the necessary tools to get started and the...
9 hours 18 minutes 15 seconds
React Data Fetching: Beyond the Basics

React Data Fetching: Beyond the Basics

Sources: fullstack.io
This course will teach you how to efficiently load data in React without using third-party libraries or the useEffect hook. We will create our own library for..
2 hours 40 minutes 15 seconds
Python/Django + React QR Digital Menu Builder

Python/Django + React QR Digital Menu Builder

Sources: PythonYoga
Made for restaurants, cafes, pubs and hotels. Your customers can order from their table or from their couch at home.
10 hours 49 minutes 22 seconds
Flutter & Firebase Masterclass (COMPLETE PACKAGE)

Flutter & Firebase Masterclass (COMPLETE PACKAGE)

Sources: Code With Andrea
Learn about Firebase Auth, Cloud Firestore, Cloud Functions, Stripe payments, and much more by building a full-stack eCommerce app with Flutter & Firebase.
11 hours 38 minutes 25 seconds