Understanding the Application

Let's learn a bit about the application we'll build in this course!

We'll cover the following

Building an app

Before we start talking about front-end structure, we need to have an app to attach the front-end structure to.

We’ve created a sample app for a fictional music festival called “North By”, where multiple bands will perform at various concerts. This app contains a schedule of all the concerts.

There isn’t much in this app. We simply used Rails scaffolding to give us the minimal amount of structure required to access the two pages we’ll be managing in this course: the “schedule” page and the “concert display” page.

The schedule page shows the times of all concerts in the festival. We’ll be adding features to this for inline editing, date filters, and search. We’ll let users list favorite concerts and, eventually, the page will show up-to-date information on how many tickets have been purchased.

The concert page lets the user see a simplified theater diagram for each concert and lets them select seats based on their ticket type. On this page, users can select seats and see their subtotal increase or search for a block of seats and see which seats are available.

The data model for the app looks like this:

  • Each concert in the festival starts at a specific time.
  • Each concert is performed at a venue and each venue has a number of rows and a number of seats per row.
  • Each concert has one or more sets that make up the concert.
  • Each concert consists of one or more bands at a venue and each has a designated order and duration.
  • Each concert has many sold tickets, each of which links a user to a particular row and seat at the venue.
  • A user can have tickets and a list of favorite concerts.

Here’s a diagram of the data model:


The app uses the Tailwind CSS framework. That being said, when we talk about cascading style sheets (CSS) later in the course, we’ll generally be writing our own CSS.

See the application in action

Here’s the application we’ll build at the beginning of the course. Click on the “Run” button and then click on the link next to “Your app can be found at:” once the server starts.

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/typography'),
    require('@tailwindcss/aspect-ratio'),
  ],
}

Note: You can see the application interface on the link once the terminal tab shows the following Rails server running message: