NextJS Templates
Meeting Room Booking App Tutorial with Back4App, Next.js and Vercel

23min
In this tutorial, you will build Bookit, a meeting room booking system using Next.js as the frontend framework and Back4App as the backend service. You will implement user authentication, room management, and booking functionality, and deploy the app on Vercel.
1. Prerequisites
To complete this tutorial, you will need:
A Back4App account (sign up at Back4App)
A Back4App project (follow this guide)
Node.js installed on your local machine (Installation guide)
Basic knowledge of JavaScript, Next.js, and REST APIs (if needed, see JavaScript Fundamentals)
2. Setting Up Back4App
Log in to your Back4App account and navigate to your project dashboard.
In the left sidebar, click Database to access the Data Browser.
You will need to create the following classes to model the data:
2.1. Create the User Class
By default, Parse handles user authentication, so no need to create this class manually. Parse automatically manages the following fields for you:
email: Email address for login
password: Password (hashed)
username: Optional username
2.2. Create the Room Class
In the Data Browser, click Create a Class, select Custom, and name the class Room.
Add the following columns:
Column Name
Type
Description
name
String
Room name
description
String
Room description
capacity
Number
Number of people the room can hold
amenities
Array
List of amenities (TV, WiFi, etc.)
price
Number
Price per hour
image
File
Image URL
owner
Pointer
Points to the User class
2.3. Create the Booking Class
Create another custom class named Booking.
Add the following columns:
Column Name
Type
Description
room
Pointer
Points to the Room class
user
Pointer
Points to the User class
checkIn
Date
Start date/time of the booking
checkOut
Date
End date/time of the booking
3. Setting Up Next.js and Parse SDK
Create a new Next.js project:
Bash
npx create-next-app bookit-app
cd bookit-app
npx create-next-app bookit-app
cd bookit-app
﻿
Install Parse JS SDK:
Bash
npm install parse
npm install parse
﻿
In the pages/_app.js file, initialize Parse with your Back4App credentials:
JS
import Parse from 'parse';

Parse.initialize('YOUR_APP_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = 'https://parseapi.back4app.com';

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp;
import Parse from 'parse';

Parse.initialize('YOUR_APP_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = 'https://parseapi.back4app.com';

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp;
﻿
Replace 'YOUR_APP_ID' and 'YOUR_JAVASCRIPT_KEY' with your Back4App app credentials.
4. Implementing User Authentication
4.1. User Registration
Create a new page pages/signup.js with a registration form:
JS
import { useState } from 'react';
import Parse from 'parse';

export default function Signup() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleSignup = async (e) => {
    e.preventDefault();
    const user = new Parse.User();
    user.set('username', email);
    user.set('email', email);
    user.set('password', password);

    try {
      await user.signUp();
      alert('Signup successful!');
    } catch (error) {
      alert('Error: ' + error.message);
    }
  };

  return (
    <form onSubmit={handleSignup}>
      <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="Email" />
      <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} placeholder="Password" />
      <button type="submit">Sign Up</button>
    </form>
  );
}
import { useState } from 'react';
import Parse from 'parse';

export default function Signup() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleSignup = async (e) => {
    e.preventDefault();
    const user = new Parse.User();
    user.set('username', email);
    user.set('email', email);
    user.set('password', password);

    try {
      await user.signUp();
      alert('Signup successful!');
    } catch (error) {
      alert('Error: ' + error.message);
    }
  };

  return (
    <form onSubmit={handleSignup}>
      <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="Email" />
      <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} placeholder="Password" />
      <button type="submit">Sign Up</button>
    </form>
  );
}
﻿
4.2. User Login
Create pages/login.js for user login:
JS
import { useState } from 'react';
import Parse from 'parse';

export default function Login() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleLogin = async (e) => {
    e.preventDefault();
    try {
      await Parse.User.logIn(email, password);
      alert('Login successful!');
    } catch (error) {
      alert('Error: ' + error.message);
    }
  };

  return (
    <form onSubmit={handleLogin}>
      <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="Email" />
      <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} placeholder="Password" />
      <button type="submit">Login</button>
    </form>
  );
}
import { useState } from 'react';
import Parse from 'parse';

export default function Login() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleLogin = async (e) => {
    e.preventDefault();
    try {
      await Parse.User.logIn(email, password);
      alert('Login successful!');
    } catch (error) {
      alert('Error: ' + error.message);
    }
  };

  return (
    <form onSubmit={handleLogin}>
      <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="Email" />
      <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} placeholder="Password" />
      <button type="submit">Login</button>
    </form>
  );
}
﻿
4.3. Protected Routes
For protected routes, you can use Next.js API routes and check if the user is authenticated:
JS
import Parse from 'parse';

export default async function handler(req, res) {
  const user = Parse.User.current();
  if (!user) {
    return res.status(401).json({ message: 'Unauthorized' });
  }
  // Proceed with the request
}
import Parse from 'parse';

export default async function handler(req, res) {
  const user = Parse.User.current();
  if (!user) {
    return res.status(401).json({ message: 'Unauthorized' });
  }
  // Proceed with the request
}
﻿
5. Room Management
5.1. Displaying Available Rooms
Create pages/index.js to list available rooms:
JS
import { useEffect, useState } from 'react';
import Parse from 'parse';

export default function Home() {
  const [rooms, setRooms] = useState([]);

  useEffect(() => {
    const fetchRooms = async () => {
      const Room = Parse.Object.extend('Room');
      const query = new Parse.Query(Room);
      const results = await query.find();
      setRooms(results);
    };
    fetchRooms();
  }, []);

  return (
    <div>
      <h1>Available Rooms</h1>
      {rooms.map(room => (
        <div key={room.id}>
          <h2>{room.get('name')}</h2>
          <img src={room.get('image').url()} alt={room.get('name')} />
          <p>Capacity: {room.get('capacity')}</p>
          <p>Price: ${room.get('price')} per hour</p>
        </div>
      ))}
    </div>
  );
}
import { useEffect, useState } from 'react';
import Parse from 'parse';

export default function Home() {
  const [rooms, setRooms] = useState([]);

  useEffect(() => {
    const fetchRooms = async () => {
      const Room = Parse.Object.extend('Room');
      const query = new Parse.Query(Room);
      const results = await query.find();
      setRooms(results);
    };
    fetchRooms();
  }, []);

  return (
    <div>
      <h1>Available Rooms</h1>
      {rooms.map(room => (
        <div key={room.id}>
          <h2>{room.get('name')}</h2>
          <img src={room.get('image').url()} alt={room.get('name')} />
          <p>Capacity: {room.get('capacity')}</p>
          <p>Price: ${room.get('price')} per hour</p>
        </div>
      ))}
    </div>
  );
}
﻿
5.2. Adding a Room
Create pages/add-room.js for adding new rooms (for authorized users):
JS
import { useState } from 'react';
import Parse from 'parse';

export default function AddRoom() {
  const [name, setName] = useState('');
  const [description, setDescription] = useState('');
  const [capacity, setCapacity] = useState(0);
  const [price, setPrice] = useState(0);

  const handleAddRoom = async (e) => {
    e.preventDefault();
    const Room = Parse.Object.extend('Room');
    const room = new Room();
    room.set('name', name);
    room.set('description', description);
    room.set('capacity', capacity);
    room.set('price', price);

    try {
      await room.save();
      alert('Room added successfully!');
    } catch (error) {
      alert('Error: ' + error.message);
    }
  };

  return (
    <form onSubmit={handleAddRoom}>
      <input type="text" value={name} onChange={(e) => setName(e.target.value)} placeholder="Room Name" />
      <textarea value={description} onChange={(e) => setDescription(e.target.value)} placeholder="Description"></textarea>
      <input type="number" value={capacity} onChange={(e) => setCapacity(parseInt(e.target.value))} placeholder="Capacity" />
      <input type="number" value={price} onChange={(e) => setPrice(parseInt(e.target.value))} placeholder="Price" />
      <button type="submit">Add Room</button>
    </form>
  );
}
import { useState } from 'react';
import Parse from 'parse';

export default function AddRoom() {
  const [name, setName] = useState('');
  const [description, setDescription] = useState('');
  const [capacity, setCapacity] = useState(0);
  const [price, setPrice] = useState(0);

  const handleAddRoom = async (e) => {
    e.preventDefault();
    const Room = Parse.Object.extend('Room');
    const room = new Room();
    room.set('name', name);
    room.set('description', description);
    room.set('capacity', capacity);
    room.set('price', price);

    try {
      await room.save();
      alert('Room added successfully!');
    } catch (error) {
      alert('Error: ' + error.message);
    }
  };

  return (
    <form onSubmit={handleAddRoom}>
      <input type="text" value={name} onChange={(e) => setName(e.target.value)} placeholder="Room Name" />
      <textarea value={description} onChange={(e) => setDescription(e.target.value)} placeholder="Description"></textarea>
      <input type="number" value={capacity} onChange={(e) => setCapacity(parseInt(e.target.value))} placeholder="Capacity" />
      <input type="number" value={price} onChange={(e) => setPrice(parseInt(e.target.value))} placeholder="Price" />
      <button type="submit">Add Room</button>
    </form>
  );
}
﻿
5.3. Room Details
Create pages/rooms/[id].js to view detailed information about a room:
JS
import { useRouter } from 'next/router';
import { useEffect, useState } from 'react';
import Parse from 'parse';

export default function RoomDetails() {
  const router = useRouter();
  const { id } = router.query;
  const

 [room, setRoom] = useState(null);

  useEffect(() => {
    if (!id) return;
    const fetchRoom = async () => {
      const Room = Parse.Object.extend('Room');
      const query = new Parse.Query(Room);
      query.equalTo('objectId', id);
      const result = await query.first();
      setRoom(result);
    };
    fetchRoom();
  }, [id]);

  if (!room) return <div>Loading...</div>;

  return (
    <div>
      <h1>{room.get('name')}</h1>
      <img src={room.get('image').url()} alt={room.get('name')} />
      <p>{room.get('description')}</p>
      <p>Capacity: {room.get('capacity')}</p>
      <p>Price: ${room.get('price')} per hour</p>
    </div>
  );
}
import { useRouter } from 'next/router';
import { useEffect, useState } from 'react';
import Parse from 'parse';

export default function RoomDetails() {
  const router = useRouter();
  const { id } = router.query;
  const

 [room, setRoom] = useState(null);

  useEffect(() => {
    if (!id) return;
    const fetchRoom = async () => {
      const Room = Parse.Object.extend('Room');
      const query = new Parse.Query(Room);
      query.equalTo('objectId', id);
      const result = await query.first();
      setRoom(result);
    };
    fetchRoom();
  }, [id]);

  if (!room) return <div>Loading...</div>;

  return (
    <div>
      <h1>{room.get('name')}</h1>
      <img src={room.get('image').url()} alt={room.get('name')} />
      <p>{room.get('description')}</p>
      <p>Capacity: {room.get('capacity')}</p>
      <p>Price: ${room.get('price')} per hour</p>
    </div>
  );
}
﻿
6. Booking System
6.1. Booking a Room
Add booking functionality in pages/rooms/[id].js by adding a booking form:
JS
const [checkIn, setCheckIn] = useState('');
const [checkOut, setCheckOut] = useState('');

const handleBooking = async () => {
  const Booking = Parse.Object.extend('Booking');
  const booking = new Booking();
  booking.set('room', room);
  booking.set('user', Parse.User.current());
  booking.set('checkIn', new Date(checkIn));
  booking.set('checkOut', new Date(checkOut));

  // Check for double booking (example logic)
  const query = new Parse.Query(Booking);
  query.equalTo('room', room);
  query.greaterThanOrEqualTo('checkIn', new Date(checkIn));
  query.lessThanOrEqualTo('checkOut', new Date(checkOut));
  const overlap = await query.first();

  if (!overlap) {
    try {
      await booking.save();
      alert('Booking successful!');
    } catch (error) {
      alert('Error: ' + error.message);
    }
  } else {
    alert('Room is already booked for the selected time range.');
  }
};
const [checkIn, setCheckIn] = useState('');
const [checkOut, setCheckOut] = useState('');

const handleBooking = async () => {
  const Booking = Parse.Object.extend('Booking');
  const booking = new Booking();
  booking.set('room', room);
  booking.set('user', Parse.User.current());
  booking.set('checkIn', new Date(checkIn));
  booking.set('checkOut', new Date(checkOut));

  // Check for double booking (example logic)
  const query = new Parse.Query(Booking);
  query.equalTo('room', room);
  query.greaterThanOrEqualTo('checkIn', new Date(checkIn));
  query.lessThanOrEqualTo('checkOut', new Date(checkOut));
  const overlap = await query.first();

  if (!overlap) {
    try {
      await booking.save();
      alert('Booking successful!');
    } catch (error) {
      alert('Error: ' + error.message);
    }
  } else {
    alert('Room is already booked for the selected time range.');
  }
};
﻿
6.2. Viewing and Canceling Bookings
Create pages/my-bookings.js to view and cancel bookings:
JS
import { useEffect, useState } from 'react';
import Parse from 'parse';

export default function MyBookings() {
  const [bookings, setBookings] = useState([]);

  useEffect(() => {
    const fetchBookings = async () => {
      const Booking = Parse.Object.extend('Booking');
      const query = new Parse.Query(Booking);
      query.equalTo('user', Parse.User.current());
      const results = await query.find();
      setBookings(results);
    };
    fetchBookings();
  }, []);

  const handleCancel = async (id) => {
    const booking = bookings.find(b => b.id === id);
    if (booking) {
      await booking.destroy();
      setBookings(bookings.filter(b => b.id !== id));
    }
  };

  return (
    <div>
      <h1>My Bookings</h1>
      {bookings.map(booking => (
        <div key={booking.id}>
          <p>Room: {booking.get('room').get('name')}</p>
          <p>Check-In: {new Date(booking.get('checkIn')).toLocaleString()}</p>
          <p>Check-Out: {new Date(booking.get('checkOut')).toLocaleString()}</p>
          <button onClick={() => handleCancel(booking.id)}>Cancel Booking</button>
        </div>
      ))}
    </div>
  );
}
import { useEffect, useState } from 'react';
import Parse from 'parse';

export default function MyBookings() {
  const [bookings, setBookings] = useState([]);

  useEffect(() => {
    const fetchBookings = async () => {
      const Booking = Parse.Object.extend('Booking');
      const query = new Parse.Query(Booking);
      query.equalTo('user', Parse.User.current());
      const results = await query.find();
      setBookings(results);
    };
    fetchBookings();
  }, []);

  const handleCancel = async (id) => {
    const booking = bookings.find(b => b.id === id);
    if (booking) {
      await booking.destroy();
      setBookings(bookings.filter(b => b.id !== id));
    }
  };

  return (
    <div>
      <h1>My Bookings</h1>
      {bookings.map(booking => (
        <div key={booking.id}>
          <p>Room: {booking.get('room').get('name')}</p>
          <p>Check-In: {new Date(booking.get('checkIn')).toLocaleString()}</p>
          <p>Check-Out: {new Date(booking.get('checkOut')).toLocaleString()}</p>
          <button onClick={() => handleCancel(booking.id)}>Cancel Booking</button>
        </div>
      ))}
    </div>
  );
}
﻿
7. Deploying to Vercel
Install the Vercel CLI:
Bash
npm install -g vercel
npm install -g vercel
﻿
Deploy your Next.js app with:
Bash
vercel
vercel
﻿
Follow the prompts to deploy your app to Vercel. Once deployed, your app will be live on a public URL.
8. Conclusion
In this tutorial, you built a Bookit app with Next.js for the frontend and Back4App as the backend. You implemented user authentication, room management, and booking functionality. Finally, you deployed the app on Vercel. You can now expand the app with additional features like search, payment integration, or notifications.
Column Name	Type	Description
name	String	Room name
description	String	Room description
capacity	Number	Number of people the room can hold
amenities	Array	List of amenities (TV, WiFi, etc.)
price	Number	Price per hour
image	File	Image URL
owner	Pointer	Points to the User class
Column Name	Type	Description
room	Pointer	Points to the Room class
user	Pointer	Points to the User class
checkIn	Date	Start date/time of the booking
checkOut	Date	End date/time of the booking
Updated 08 Oct 2024
Did this page help you?
Invoicing App Tutorial with Next.js, Vercel & Back4app
Building a Multiplatform Game Using Flutter and Back4app