learn hapi

Build Your Own Netflix-Like Streaming Platform — “Futureflix”

You don’t necessarily see yourself as a hapi expert. But know you that learning the insights of this framework is helping you grow.

You’ll get to know the details of hapi and parts of its plugin ecosystem by working on a larger project.

In learn hapi, you’ll implement a complete platform from start to end.

Curriculum

 

Take Off

  • In this part, you’ll get the ball rollin’. Get a grasp on what you’ll build and that’s all theory. Really. Within the second tutorial, you’ll already dive into the practical part and prepare your project and stack. Use environment variables and keep secrets outside the repository. You’ll benefit from environment variables while setting up MongoDB!
  • 01

    Get a grasp on Futureflix and what this project is about. Also, you’ll see the topics and concepts covered within this learning path.

  • 02

    This is all about preparing your project and stack. Get to know the stack of choice. Then it’s enough theory, you’re jumping right into the project’s structure and install the first NPM dependencies. When finishing all tasks in this tutorial, you’ll already have a minimal Futureflix running on your system 📺

  • 03

    Don’t store sensitive data within your project’s code base! We’re talking about API keys, database credentials, OAuth client IDs and secrets, etc. You know the importantance to keep secrets outside your repository.

  • 04

    MongoDB is the data store for Futureflix. Bootstrap a database instance using an Ubuntu Vagrant box. Define the environment variables to connect from your hapi project using Mongoose.

Base Components

  • This part includes the components that will help you keep your app organized.It’s about the details. Having a nice looking 404 page isn’t a must have, but helps your user to keep context. You’ll create a plugin that adds the user for quick-access to request.user within route handlers.
  • 05

    A common error scenario is an unavailable page on your platform. Use this missing piece as a chance to help the user to keep context and a route back to safe lands.

  • 06

    What if you could access the requesting user data via request.user? That would remove some extra lines of code within multiple route handlers and still keep the code readability. Also, it’s a short statement and you can immediately recognize what user data is accessed.

Developer Goodies

  • Take a second and think about your development flow. Are there repeating tasks? Can you simplify your flow by implementing a helping hand? Follow these tutorials to improve your productivity.
  • 07

    We’ve developed hapi-dev-errors to skip the the command line lookup for 500 errors. You’ll increase your productivity by using an elegant and expressive error view in the browser.

User Authentication & Accounts

  • Account handling, the sign up and login flow, user profile editing and password reset are common functionality you’d expect on nowadays web apps. You’re right, these are important features and that’s the reason you’re implementing them 🤘
  • 08

    A sign up flow with email address and password is one of the de-facto features web apps implement. Assumingly, every web developer has implemented this part of a boilerplate themselves. You know what? That’s totally fine, because it’s important to know the fundamentals of all this and that there’s more involved than a web view with a form.

  • 09

    Add the second part that belongs to user onboarding: the login flow. The current setup of your Futureflix instance allows users to sign up. You’ll add the missing login by following this tutorial. On top of that, you’ll remember the user with a cookie-based session.

  • 10

    At work, you may need to change your password every 45 or 90 days. I guess you’ve a password with an increment at the beginning or end 😉 Not that I’d do that 😏 Following this tutorial, you’ll implement a complete password reset flow with an email notification including password reset instructions for the user.

  • 11

    You’ll make use of Gravatar and grab the user’s profile picture. This personal touch helps the user to identify with your Futureflix platform. It also shows your effort to fetch the picture, even though you might fall back to a default one.

  • 12

    Let users choose their unique username in your Futureflix app. With additional fields, like their Twitter handle or personal homepage, individual users can highlight themselves on your platform.

  • 13

    Auto-generate a username based on the user’s email address when saving a new user in MongoDB. Because usernames should be unique throughout your platform, you’ll take care of duplicates and generate a funky alternative 😉

  • 14

    Add a watchlist to Futureflix to save movies and shows for later. It’s easier to decide on a Friday night movie from less choices 😁

Security

  • Up to this point, you rely on hapi’s built-in security mechanisms. We didn’t care about adding custom protection yet (which is totally fine). That changes now.
  • 15

    Protect your app against cross-site request forgery, in short CSRF. It’s an attack against your website where another website sends unauthorized commands from a user’s account.
    Fun fact: CSRF is called sea-surf.

Pagination

  • Pagination is an essential part of web applications to split large data sets into chunks. Pagination is like the penguins in the Madagascar movie: a secret star. You couldn’t live with it while having a minor role in the play.
  • 16

    With growing data sets in your Futureflix app, you don’t want to deliver all documents at once. This puts a ton of load onto your database, your application and the user’s browser to display everything. Implement pagination for the movies overview page to show a maximum of eight items at once.

APIs with hapi

  • At some point you want to expand your platform from browsers to other clients. This could be native apps for Android and iOS. Or you want to shift gears and level up your web frontend with a client-side framework that communicates via JSON data instead of HTML.
  • 17

    This is the starting point to extend your existing Futureflix app with a REST API serving JSON endpoints 🚀

  • 18

    While creating the Futureflix API, you noticed that JSON responses contain the _id and version key __v. The _id field feels wrong due to the underscore prefix, so let’s remove it and keep only the id field. The version key __v isn’t necessary in the response at all and you want to remove it from the JSON as well.

  • 19

    Returning ALL data for requests isn’t a good practice. With a growing set of TV shows, your API response will grow respectively. Instead, let users fetch data when needed and reduce the amount of outgoing JSON data with pagination

  • 20

    Let users customize the result of API endpoints with query parameters. Implement the functionality to extend JSON responses for TV shows gradually with seasons or seasons and episodes.

  • 21

    hapi generalizes error messages for failed validations and only tells you the source of the issue, like “Invalid request query input”. This isn’t helpful for requests containing multiple query parameter values. Make it approachable for developers to find the issue with detailed error messages.

  • 22

    Validating incoming user data is an important piece of your API. On your end, provide helpful error messages for faulty validations. Let developers find their problems with your API by pointing them directly to the issue and a helpful resource to find more details, like the API documentation.

  • 23

    Your Futureflix API grows in functionality and only you know how to use it. It’s important to document endpoints as early as possible so that external developers get a grasp on using it.

  • 24

    Your initial API documentation for Futureflix uses hapi-swagger to generate an endpoint overview from your project configuration. By default, hapi-swagger registers the /documentation route. If you want another path, like /docs, you can customize it. You’ll do that in a minute 😉

  • 25

    Your Swagger API documentation becomes a beneficial place for developers. The integrated Swagger UI allows anyone to send sample requests against your endpoints. It’s a good way to see the actual response format and data of endpoints.

  • 26

    With the username and password login, you’ll create a user-specific JSON web token (JWT). You’ll use this JWT in the second tutorial on API authentication where you’ll proceed with the authentication handling and switching endpoints from public to private.

  • 27

    In this tutorial you’ll make the switch for all endpoints from publicly available to require JSON web token (JWT) authentication to access the endpoints.

  • 28

    In this tutorial, you’ll configure Swagger to support API key authentication. This allows users to authenticate requests with their personal JWT in the Swagger UI.

  • 29

    Imagine the flow to check the response for an endpoint that requires authentication. You need a JWT which requires you to log in first. Then copy and paste over the token value for the actual request. It ends up sending subsequent requests including authentication for that quick test. There’s a much better way using Postman, an API development and testing tool.

Sending Emails

  • In situations where a user signs up or wants to reset the password, sending emails from your application is a beneficial feature 😉 Use the user’s attention for good with a targeted email. You’ll add a solid mail sending process in Node.js to your Futureflix app. In later tutorials, you’ll refactor the mailer to rely on a queue for the mail sending process.
  • 30

    A Node.js mailer sending emails to welcome a new user on your platform is nice onboarding experience. A more critical part is a mail to reset a user’s password. This is what you’ll add to your Futureflix app. With an existing sign up functionality, you’ll use the opportunity to send a welcoming email for your platform.

  • 🎯

What Setup Do I Need?

The tools, frameworks & basics you need

FAQ

 

Who is this learning path for?

It’s an advanced path and requires basic knowledge about hapi. If you’re familiar with the concepts of plugins in hapi, routing, view handling & template rendering, you’re ready to rock 🤘

Does this learning path expire?

No expiration date. No plans to retire it. At some point, we might update or extend it though!

Is there a cost attached to this learning path?

Indirectly. Some of the tutorials are only available for Future Students. That means, you need to enroll in the University to access the related content.