Build Product Hunt with ReactJS and Firebase

4h 47m 27s
English
Paid

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 Build Product Hunt with ReactJS and Firebase

Join premium to watch
Go to premium
# Title Duration
1 What's about this project 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

Similar courses to Build Product Hunt with ReactJS and Firebase

Build a Spotify Connected App

Build a Spotify Connected Appfullstack.io

Category: React.js, Node.js
Duration 3 hours 47 minutes 28 seconds
React Data Fetching: Beyond the Basics

React Data Fetching: Beyond the Basicsfullstack.io

Category: React.js
Duration 2 hours 40 minutes 15 seconds
Server side rendering with Next + React

Server side rendering with Next + Reactudemy

Category: React.js, Next.js, MongoDB, OpenGL Shading Language (GLSL)
Duration 29 hours 43 minutes 19 seconds
Build a Youtube Clone

Build a Youtube CloneCode With Antonio

Category: React.js, Next.js
Duration 23 hours 42 minutes 10 seconds
Build a Realtime App with React Hooks and GraphQL

Build a Realtime App with React Hooks and GraphQLudemy

Category: React.js, MongoDB
Duration 4 hours 32 minutes 39 seconds
Understanding React | Don’t Imitate Understand

Understanding React | Don’t Imitate UnderstandAnthony Alicea

Category: React.js
Duration 17 hours 3 minutes 45 seconds
Next.js 14 & React - The Complete Guide

Next.js 14 & React - The Complete GuideudemyAcademind Pro

Category: React.js, Next.js
Duration 36 hours 13 minutes 15 seconds
Full Stack HATEOAS: Spring Boot 2.1, ReactJS, Redux

Full Stack HATEOAS: Spring Boot 2.1, ReactJS, Reduxudemy

Category: React.js, Spring Boot, Redux, Spring, Spring HATEOAS
Duration 5 hours 51 minutes 37 seconds
The Joy of React

The Joy of ReactJosh Comeau

Category: React.js, Next.js
Duration 25 hours 35 minutes 33 seconds
CodeFast | Learn to code in weeks, not months.

CodeFast | Learn to code in weeks, not months.Marc Lou

Category: React.js, Next.js
Duration 11 hours 38 minutes 42 seconds