1. What We're Building

Welcome! In this course, we’ll be building Hunt. a full-stack app that will teach you React by building Product Hunt. We’ll be building the main product feed, a product page with upvoting and commenting, a trending page that sorts products by upvotes, a search page for searching products by text, and a comprehensive authentication system to gate access.


Hunt is an app that works on web, iOS, Android, Mac, and Windows.


We’ll be shipping all of these apps with React and with one shared code base by using two tools:


The first is Ionic, a UI toolkit for building performant, high-quality web, mobile, and desktop apps.


And the second is Firebase, a serverless framework that will handle our server-side infrastructure and deployments.


This means we can focus just on React while building and deploying a cross-platform experience working on web, mobile, and desktop

Product Hunt

Buy nowLearn more

Welcome

  • 1. What We're Building4

Tooling

  • 2. Installing Hyper
  • 3. Installing Node
  • 4. Installing VSCode
  • 5. Installing Ionic
  • 6. Installing Firebase
  • 7. Installing GitHub

Architecture

  • 8. Project Start
  • 9. Assets and Theme
  • 10. Routing and Tabs
  • 11. Header Components1
  • 12. Firebase Setup

Authentication

  • 13. Firebase Authentication
  • 14. Authentication Pages
  • 15. useForm Hook
  • 16. Signup Page and Validation
  • 17. Login Page and Validation
  • 18. Reset Password Page and Validation
  • 19. useAuth and UserContext
  • 20. Profile Page
  • 21. Edit Profile Page and Validation2

Products

  • 22. Submit Products with Firebase Firestore
  • 23. Firebase Storage and File Uploads5
  • 24. Product List
  • 25. Product Item
  • 26. Product Page

Upvotes and Comments

  • 27. Product Upvotes7
  • 28. Product Comments

Search

  • 29. Search Page

Deployment

  • 30. Web App Deployment with Firebase Hosting
  • 31. iOS Deployment with Capacitor
  • 32. Android Deployment with Capacitor
  • 33. Mac and Windows Deployment with Electron and Capacitor

Certificate of Completion

  • Apply for a Certificate of Completion (Membership Required)