August 30, 2021

React Tutorial – Build a Movie List Generator with React and HarperDB

Welcome to Community Posts
Click below to read the full article.
Summary of What to Expect
Table of Contents

In this tutorial, we are going to be building a simple movie generator which automatically generates a new movie every 40 seconds. It will also contain a button called “Generate New Movie” to display another movie on demand.

  1. Sign up for HarperDB Cloud Instance: Create an account, providing your name, email, and sub-domain name.
  2. Set up HarperDB Cloud Instance: Choose instance name, credentials, specifications, and region.
  3. Create React App: Use "npx create-react-app" to initialize the project.
  4. Install use-harperdb Hook: Add "use-harperdb" hook for connecting to the cloud instance.
  5. Set Up Environment Variables: Define credentials in the .env file.
  6. Wrap App with HarperDBProvider: Connect the app to the cloud instance.
  7. Populate the Database: Create a schema and table for movie data using HarperDB Studio.
  8. Build the User Interface: Create a Movie component to fetch and display movie data.
  9. Display Data in the Front End: Show movie information using data from HarperDB.
  10. Run the App: Start the development server to see the app in action.