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 Software Architect Mindset (COMPLETE)

The Software Architect Mindset (COMPLETE)

Sources: ArjanCodes
The course "The Software Architect Mindset" teaches the fundamentals of software architecture and provides practical advice on creating software products...
12 hours 6 minutes 39 seconds
MERN 2024 Edition - MongoDB, Express, React and NodeJS

MERN 2024 Edition - MongoDB, Express, React and NodeJS

Sources: udemy
Welcome to the immersion in the MERN Stack! This course will help you master all aspects of building a fully functional "Jobify" application using MongoDB.
19 hours 7 minutes
Build a React & Redux App w CircleCI CICD, AWS & Terraform

Build a React & Redux App w CircleCI CICD, AWS & Terraform

Sources: udemy
React is one of the most popular library's for building client apps with HTML, CSS and JavaScript. If you want to establish yourself as a front-end or full-stack developer, you ...
25 hours 45 minutes 21 seconds
Make 20 React Apps

Make 20 React Apps

Sources: Chris Sev
Learn React best practices and concepts that you can use on the job, in side projects, and in any React app.
12 hours 20 minutes 3 seconds
React Router v4

React Router v4

Sources: ui.dev (ex. Tyler McGinnis)
For good reason, React Router is the most popular 3rd party library in the React ecosystem. If you're using React, odds are you're also using React Router. React Router v4 intro...
6 hours 44 minutes 1 second