Skip to main content

Create a meeting

In the previous lesson we have learnt how to create a simple server. Now it's time to start building the frontend. The first thing that we need to do is to define a React component that will create a meeting to which other users can join.

You can download the starter code from Step.02-Exercise-Create-a-meeting.

CreateMeeting component​

We will modify the file ./client/src/CreateMeeting/CreateMeeting.tsx and define what happens when the user clicks on the Create Meeting button.

First, we need to import two libraries:

import {useNavigate} from 'react-router-dom';
import {config} from '../config';

And now, inside the CreateMeeting component, we define the navigate function and the handler for the onClick event:

const navigate = useNavigate();

const handleClick = async (): Promise<void> => {
  const url = config.server;
  try {
    const response = await fetch(`${url}/meetings`, {
      method: 'POST',
    });
    const data = await response.json();
    navigate(`/meetings/${data.id}`);
  } catch (e) {
    console.error('Cannot create the meeting');
  }
};

Once the user clicks on the button, a POST request will be trigger to our backend server and it will get a new meetingId. After that, the application will navigate to that meeting.

Run the app​

If you want to run the application, you will need to launch the server and the client at the same time.

We start by launching the server:

$ cd server
$ npm start

And in another terminal we launch the client:

$ cd client
$ npm start

The browser will be opened automatically with the URL https://localhost:4000 and we will see the following panel:

Create a meeting

Once we click on the button, we will see a blank screen, but the noteworthy part is that the URL will contain the meetingId, e.g. https://localhost:4000/meetings/mcrmpgxgzui65ayti3tjbkgzay.

You can compare your code with the solution in Step.02-Solution-Create-a-meeting. You can also check the differences with the previous lesson in the git diff.