Part 1: Introduction to Curi

In this set of tutorials, we will be building a single page application from scratch using Curi. The application will be a website for a book store. Users will be able to browse through books and "purchase" ones that they want.

Note: We will only be building the front end. Any time that we would need to add back end code for a "real" website, we will just simulate this with a fake API.

What is Curi?#

Before we get started, let's quickly define what Curi is and is not.

  1. Curi is an asynchronous single page application router.
    1. Being a single page application router means that with Curi, you can navigate to pages within your application without sending requests to the server.
    2. Being asynchronous means that you can load data (and code) prior to rendering a new page instead of rendering loading screens while you wait for data to be fetched.
  2. Curi is response based. Whenever navigation happens, Curi will create a new response object by matching itsroutes to the new location. The response will then be emitted so that the application can re-render using the new response.
  3. Curi is not framework specific. It does not matter to Curi how you render your application; Curi is only concerned with navigation and route matching. That said, there are a couple official framework specific packages (e.g. @curi/react and @curi/vue) that provide integration with Curi, but these are not required for you to be able to use Curi.


These tutorials aim to be quite easy to pick up without a lot of prior knowledge required. However, there are a couple things you should keep in mind.

  1. You should be familiar with JavaScript. We will be using ES6+ syntax (module import/export, arrow functions, Promises, etc.). You don't have to be a JavaScript master, but it still helps to be familiar with ES6.
  2. If you plan to follow along locally, you need to have Node/NPM installed.
  3. Again, if you plan to follow along locally, you should be comfortable with basic terminal (command line) usage. Nothing crazy, just commands like cd, touch, mkdir and running npm commands.
  4. You should be familiar with either React or Vue. These aren't the only frameworks that you can use with Curi, but they are the only ones that this tutorial is (currently) written for.


Let's dive in to the tutorials with Part 2: Setting up Curi.