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

Watch Online Build Product Hunt with ReactJS and Firebase

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

Project React. Build a complex React project as a total beginner

Project React. Build a complex React project as a total beginner

Sources: Cosden Solutions
Project React is a course featuring a unique application that will guide you step by step in creating large and complex applications using React. No prior exper
16 hours 31 minutes 5 seconds
REACT ROUTER (v6)

REACT ROUTER (v6)

Sources: ui.dev (ex. Tyler McGinnis)
There’s an easier way to master React Router. Our linear course is like having a smart, experienced friend sit down next to you, walk you through each concept, and apply what yo...
3 hours 15 minutes 27 seconds
Firebase Security Course

Firebase Security Course

Sources: fireship.io
Firebase Security - The Full Course will teach you how to write, organize, and test Firestore security rules. The goal is to prepare developers for the safe and secure launch of...
54 minutes 6 seconds
Full Stack Spring Boot & React

Full Stack Spring Boot & React

Sources: Amigoscode (Nelson Djalo)
Netflix recently switched their entire backend to Spring Boot 2. It was a no brainer really. Spring Boot 2 is the best framework to build applications. Weather you build a small...
10 hours 1 minute 23 seconds
Doctor Appointment Booking App with React ,Firebase , ANT D

Doctor Appointment Booking App with React ,Firebase , ANT D

Sources: udemy
The course covers many aspects of application development, including Firebase integration, user authentication, creating separate user interfaces for administrators and regular ...
5 hours 45 minutes 20 seconds