Build Product Hunt with ReactJS and Firebase
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
| # | 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
Angular Architecture. How to Build Scalable Web Applicationsudemy
MERN eCommerce From ScratchudemyBrad Traversy
Build a Slack Chat App with React, Redux, and Firebaseudemy
React - The full coursefireship.io
Mastering Maintainable Reactudemy
Intro to Shopify App Development with React, Node & GraphQLudemy
React Js A-Z With Laravel - For Beginner to Advanced Leveludemy
React for Beginnerscodewithmosh (Mosh Hamedani)
