Airbnb clone, create the models and move data to the db

Join the 2022 Full-Stack Web Dev Bootcamp!


This post is part of a new series where we build a clone of Airbnb with Next.js. See the first post here.

The first thing we’re going to do is to move the houses from the simple JSON file we now have in houses.js to the new Postgres database we defined, by first creating the Sequelize models for the data, and then letting Sequelize create the tables for us.

The file houses.js currently hosts this content, which forms all our application data so far:

houses.js

export default [
  {
    id: 1,
    picture: '/img/1.jpg',
    type: 'Entire house',
    town: 'New York',
    title: 'Beautiful flat in New York!',
    price: '150.00',
    description:
      'Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur',
    guests: 4
  },
  {
    id: 2,
    picture: '/img/2.jpg',
    type: 'Entire house',
    town: 'Amsterdam',
    title: 'A flat in Amsterdam with a great view',
    price: '90.00',
    description:
      'Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur',
    guests: 4
  }
]

Let’s move this to a Sequelize model in model.js. You can add this code at the bottom of the file, before the export { sequelize, User } line:

class House extends Sequelize.Model {}

House.init(
  {
    id: {
      type: Sequelize.DataTypes.INTEGER,
      autoIncrement: true,
      primaryKey: true
    },
    picture: { type: Sequelize.DataTypes.STRING, allowNull: false },
    type: { type: Sequelize.DataTypes.STRING, allowNull: false },
    town: { type: Sequelize.DataTypes.STRING, allowNull: false },
    title: { type: Sequelize.DataTypes.STRING, allowNull: false },
    price: { type: Sequelize.DataTypes.INTEGER, allowNull: false },
    owner: { type: Sequelize.DataTypes.INTEGER, allowNull: false }
  },
  {
    sequelize,
    modelName: 'house',
    timestamps: false
  }
)

The owner field will contain a reference to a user.

Then add House to the list of exports:

export { sequelize, User, House }

Now we can make Sequelize automatically create the houses table by calling House.sync(). We can add this call into an API call, for example in pages/api/auth/login.js, temporarily:

import { User, House, sequelize } from '../../../model.js'

//...

export default async (req, res) => {
  if (req.method !== 'POST') {
    res.status(405).end() //Method Not Allowed
    return
  }
  House.sync()
  ...

After you call the API once you can remove this line.

You can now see the table in the database:

It’s a nice feature that allows us to avoid creating the table separately.

Once you hit the endpoint, you can remove the code from that file, as the table has been created.

If you modify a model, you can call this sync() model method again to keep the table in sync with the model, with the alter property:

User.sync({ alter: true })
House.sync({ alter: true })

You can add this line at the end of the model.js file.

The alter: true option makes sure tables are updated when we change the model, something very useful as we build the app.

See the code on GitHub

Next part: Use the database instead of the file

Want to become a better Web Developer? Join the 2022 Web Development Bootcamp!

⭐️⭐️⭐️ Join the 2022 Web Development Bootcamp ⭐️⭐️⭐️