Build Product Hunt with ReactJS and Firebase

Leotrieu

Leo Trieu

Producthunt

Full Source Code

Discussion Support

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.
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 :)


Sample Videos

Video # 1
 
Video # 2
 
Video # 3
 
  • 36068681?v=4

    Balance-Sun

    Really enjoying this so far. Thanks Leo. Hope there will be more !

  • 7eb4b59219a58d0a376a1f2b6d74c132

    Rodelio

    Thank you Leo! this is really fun, building a real app!

  • Picture

    Miriam Esp Jorrin

    Thank you so much Leo! I really enjoyed the course, looking forward for more courses like this!!

  • 66c1577211706310e2e5cce158b19703

    Shuzo

    Thanks a lot Leo !! this course helped me a lot to learn React basics, but I just wondered why not using Redux, which would help a lot more heap of sheep in a modern dev env. Leo, Could you please update this with Redux ?

  • 88abcc6cff01a43faf90fdafb9164699

    Jimmy

    Great course! You will learn a lot, and most importantly, you will build something!

  • 462ad61e09bf6127913998955eaaf575

    charbel

    It's such a chance to have in one single course the awesomeness of ES6, React JS, Flux and Firebase. Definitely love it. Thanks Leo!

  • 0fee1f7e75bb26049ff8244120f33262

    poligen

    This is good course with ES6 and alt(flux) features. With all features and hands on practice. I learn a lot. Thank you

  • Photo

    Phil Alekseev

    I really enjoyed this course as you put together a lot of missing pieces for me for building React applications. I appreciated that Leo used ES6 features and helped strengthen my knowledge in Actions and Stores for the Flux architecture. I also liked how he tried to keep it as simple as possible and built and refactored everything from the ground up. I just have one small suggestion to add a production deployment section! An excellent course otherwise!

  • B856d9e8fbffb8dbd7468df550955f71

    HassanE

    Awesome!

  • Getting Started

    In this project, you’ll be learning how to build a Single Page Application with ReactJS and Firebase by cloning Product Hunt. Unlike the Free course where you were working with Javascript ES5 version, this time, you will be working with the modern...

    • What's about this project? 1:44  
    • Tech stacks we're going to use 1:48  
    • Firebase 1:12  
    • NodeJS 2:12  
    • Atom 1:46  
  • Task 1: Build basic project

    We start off this project by creating a general folder structure for our application. You will be learning how to setup the develop environment to work with ReactJS ES6.

    • Create project from empty folder 5:54  
    • Our first React app 9:37  
  • Task 2: Home Page

    In this task, we’re going to create the home page. So the first thing we want to do is to create a HomePage component. As we’re going to create a mock up with dummy data at first, we need some images and stylesheet for that.

    • Create Home Page component 7:24  
    • Add style to the home page 4:59  
    • Update Home page component 10:50  
    • Add Style 8:01  
  • Task 3: Create Product

    In the previous task, we created the HomePage component and everything working as expected but the code looks a bit mess and there are few parts that we can break into smaller component that we can reuse in later stage. Let say if we want to...

    • Create Product List component 5:03  
    • Create Product Item component 8:00  
    • Refactor Product Item component 3:46  
  • Task 4: Navbar

    In this task, we’re going add the Navbar to the Home page. So we have a textbox for searching on the left hand side, logo in the middle and the Login link on the right hand side.

    • Create Navbar component 11:03  
    • Create Popup component 6:35  
  • Task 5: Login Popup

    In the last task, we created the base Popup component. In this task, we’re going to apply that to create the LoginPopup component but first, let make some changes to the Navbar so we can control when to show and when to hide the Popup.

    • Refactor Popup component 6:43  
    • Create Login Popup component 9:33  
  • Task 6: Post Popup

    In this task, we’re going to create a Popup having a form for user to fill in and then submit a new product. We also want to add our popup to the Navbar and make some style changes.

    • Create PostPopup component 5:12  
    • Add PostPopup to Navbar 7:09  
    • Add Style to PostPopup component 6:22  
  • Task 7: Profile Menu

    In this task, we’re going to create the ProfileMenu component so when user logged in, on the right hand side of the Navbar, we should display user’s avatar and if we click on it, there will be a menu with two options: Profile and Logout. You will...

    • Create ProfieMenu component 8:17  
    • Handle Profile Menu events 7:02  
  • Task 8: Product Popup

    In this task, we’re going to create the basic ProductPopup component so when users click on the Product Name, there will be a popup showing details of that product including all discussion about it.

    • Create Product Popup component 5:27  
    • Add Header to Product Popup 10:54  
    • Add Comment box to Product Popup 6:40  
    • Add Comments to Product Popup 7:14  
  • Task 9: Working with Firebase

    From this task, we will be working with back-end and I will show you how we can connect our front-end with a back-end framework or technology. The back-end framework we’re going to use in this course is Firebase. I’m going to show you how to...

    • Install and Setting up Firebase - [Notes Updated] 2:52  
    • Get Product List from server - [Notes Updated] 5:04  
    • Create Facebook app - [Notes Updated] 3:25  
    • Login with Facebook - [Notes Updated] 6:36  
  • Task 10: Flux

    In this task, we're going to talk about Flux architecture and a few of other libraries that make our lives would be easier when working with Flux. Among those, I piked up Alt as it’s lightweight and support ES6. I’ve been working with Alt for a...

    • Flux Struture 6:21  
    • Get Started with Alt - [Notes Updated] 13:15  
    • Refactor Login process - [Notes Updated] 8:34  
    • Session and Logout - [Notes Updated] 9:40  
    • Refactor Product List - [Notes Updated] 7:54  
  • Task 11: Dynamic Products

    At the moment, we’re working with data on the server but they are just dummy data that we imported from JSON file. We need a way for user to post new product from client to server. To do that, we first need to create new action to work with...

    • Post Product to database 7:55  
    • Fixing Product List 5:54  
  • Task 12: Voting function

    In this task, we’re going to create the voting function so user can vote for a product by clicking on the vote button on the Home page or open a Product, and vote from here. Of course, they can vote once only.

    • Up vote - [Notes Updated] 10:36  
    • Fixing Up vote logic - [Notes Updated] 6:50  
    • Create Upvote component 6:04  
  • Task 13: Comments

    In this task, we’ll be working on adding comments and displaying list of comments. So in our ProductPopup, we can type comment for a product and immediately, without refreshing the page.

    • Add Comments - [Notes Updated] 8:51  
    • Display Comments - [Notes Updated] 7:10