Scribd
Upload
337 views12 pages

Build Product Hunt With ReactJS - Code4Startup

This document outlines tasks for building a Product Hunt clone app with ReactJS and Firebase. It describes setting up the project, creating components for the home page, products, navbar, login/posting popups, and working with Firebase for user authentication, data storage and retrieval. Later tasks involve implementing features like voting, comments and refactoring code using Flux architecture.

Uploaded by

Patito Feo
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
337 views12 pages

Build Product Hunt With ReactJS - Code4Startup

This document outlines tasks for building a Product Hunt clone app with ReactJS and Firebase. It describes setting up the project, creating components for the home page, products, navbar, login/posting popups, and working with Firebase for user authentication, data storage and retrieval. Later tasks involve implementing features like voting, comments and refactoring code using Flux architecture.

Uploaded by

Patito Feo
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 12

Build Product Hunt with ReactJS

Leo Trieu
Pre­Order our PREMIUM Course Now to Save $300 ×

9 
Shares

nero

 Full Source Code

 Discussion Support
 Mobile Ability

OVERVIEW TASKS   14 REVIEWS   4

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? (/projects/build-product-hunt-with-


reactjs/tasks/what-s-about-this-project) 1:44

   Tech stacks we're going to use (/projects/build-product-hunt-with-


reactjs/tasks/tech-stacks-we-re-going-to-use) 1:48

   Firebase (/projects/build-product-hunt-with-
reactjs/tasks/ rebase-bb6 48a-0624-47b3-ae29-06da654fb4cf) 1:12

   NodeJS (/projects/build-product-hunt-with-reactjs/tasks/nodejs-
c4e27c53-a864-4be3-a27b-ef8ba56d3864) 2:12

   Atom (/projects/build-product-hunt-with-reactjs/tasks/atom) 1:46


Task 1: Build basic project
 We start o 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 (/projects/build-product-hunt-


with-reactjs/tasks/create-project-from-empty-folder) 5:54

   Our rst React app (/projects/build-product-hunt-with-


reactjs/tasks/our- rst-react-app) 9:37

Task 2: Home Page


 In this task, we’re going to create the home page. So the rst thing we
want to do is to create a HomePage component. As we’re going to
create a mock up with dummy data at rst, we need some images and
stylesheet for that.
   Create Home Page component (/projects/build-product-hunt-with-
reactjs/tasks/create-home-page-component) 7:24

   Add style to the home page (/projects/build-product-hunt-with-


reactjs/tasks/add-style-to-the-home-page) 4:59

   Update Home page component (/projects/build-product-hunt-with-


reactjs/tasks/update-home-page-component) 10:50

   Add Style (/projects/build-product-hunt-with-reactjs/tasks/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 (/projects/build-product-hunt-with-


reactjs/tasks/create-product-list-component) 5:03

   Create Product Item component (/projects/build-product-hunt-with-


reactjs/tasks/create-product-item-component) 8:00
   Refactor Product Item component (/projects/build-product-hunt-
with-reactjs/tasks/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 (/projects/build-product-hunt-with-


reactjs/tasks/create-navbar-component) 11:03

   Create Popup component (/projects/build-product-hunt-with-


reactjs/tasks/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
rst, let make some changes to the Navbar so we can control when to
show and when to hide the Popup.

   Refactor Popup component (/projects/build-product-hunt-with-


reactjs/tasks/refactor-popup-component) 6:43

   Create Login Popup component (/projects/build-product-hunt-with-


reactjs/tasks/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 ll
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 (/projects/build-product-hunt-with-


reactjs/tasks/create-postpopup-component) 5:12

   Add PostPopup to Navbar (/projects/build-product-hunt-with-


reactjs/tasks/add-postpopup-to-navbar) 7:09

   Add Style to PostPopup component (/projects/build-product-hunt-


with-reactjs/tasks/add-style-to-postpopup-component) 6:22
Task 7: Pro le Menu
 In this task, we’re going to create the Pro leMenu 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: Pro le and Logout. You will...

   Create Pro eMenu component (/projects/build-product-hunt-with-


reactjs/tasks/create-pro emenu-component) 8:17

   Handle Pro le Menu events (/projects/build-product-hunt-with-


reactjs/tasks/handle-pro le-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 (/projects/build-product-hunt-


with-reactjs/tasks/create-product-popup-component) 5:27
   Add Header to Product Popup (/projects/build-product-hunt-with-
reactjs/tasks/add-header-to-product-popup) 10:54

   Add Comment box to Product Popup (/projects/build-product-hunt-


with-reactjs/tasks/add-comment-box-to-product-popup) 6:40

   Add Comments to Product Popup (/projects/build-product-hunt-


with-reactjs/tasks/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 (/projects/build-product-hunt-with-


reactjs/tasks/install-and-setting-up- rebase) 2:52

   Get Product List from server (/projects/build-product-hunt-with-


reactjs/tasks/get-product-list-from-server) 5:04

   Create Facebook app (/projects/build-product-hunt-with-


reactjs/tasks/create-facebook-app) 3:25
   Login with Facebook (/projects/build-product-hunt-with-
reactjs/tasks/login-with-facebook) 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 (/projects/build-product-hunt-with-


reactjs/tasks/ ux-struture) 6:21

   Get Started with Alt (/projects/build-product-hunt-with-


reactjs/tasks/get-started-with-alt) 13:15

   Refactor Login proces (/projects/build-product-hunt-with-


reactjs/tasks/refactor-login-proces) 8:34

   Session and Logout (/projects/build-product-hunt-with-


reactjs/tasks/session-and-logout) 9:40

   Refactor Product List (/projects/build-product-hunt-with-


reactjs/tasks/refactor-product-list) 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 le. We need a way for user
to post new product from client to server. To do that, we rst need to
create new action to work with...

   Post Product to database (/projects/build-product-hunt-with-


reactjs/tasks/post-product-to-database) 7:55

   Fixing Product List (/projects/build-product-hunt-with-


reactjs/tasks/ xing-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 (/projects/build-product-hunt-with-reactjs/tasks/up-vote)
10:36

   Fixing Up vote logic (/projects/build-product-hunt-with-


reactjs/tasks/ xing-up-vote-logic) 6:50

   Create Upvote component (/projects/build-product-hunt-with-


reactjs/tasks/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 (/projects/build-product-hunt-with-


reactjs/tasks/add-comments) 8:51

   Display Comments (/projects/build-product-hunt-with-


reactjs/tasks/display-comments) 7:10
(/)

© 2016 Code4Startup, All Rights Reserved.

Blog (/startuphack) - Terms (/terms) - Privacy (/privacy-policy)

Contact us at
[email protected] (mailto:[email protected]?Subject=Support)

(https://twitter.com/Code4Startup) (https://www.facebook.com/code4startup)

(https://github.com/leotrieu) (https://www.youtube.com/channel/UCStIVSuXRCDGHDM99S-nqkg)

You might also like