Building Appointment Scheduler App in React and NodeJS

We will be creating an appointment scheduler that enables users to schedule appointments by selecting date and time and providing their user information(name, email, phone numbers). A confirmation is sent to the user’s phone via text to confirm the appointment.

Upgrade your JavaScript skills. Learn React.js in just a couple of afternoons.

A premium step-by-step training course by Wes Bos to get you building real-world React.js + Firebase apps and website components. START LEARNING NOW

A premium training course to strengthen your core JavaScript skills<br> and master all that ES6 has to offer. Join 22,120 in Learning Now →

See preview below:

We are going to concentrate on the following:

Backend (Part 1)

  1. Creating a template Express Web app
  2. MongoDB database configuration
  3. Creating a Nexmo account
  4. Creating routes, model, and controllers for Express web app
  5. Testing Express Web App with Postman

Frontend (Part 2)

  1. Creating a template React App
  2. Creating Views for React
  3. App Functionality in Depth.

See here for source code

Backend with Nodejs

For the Backend we are going to use the following Frameworks:

Express is a fast, flexible modular Node.js web application framework that provides a robust set of features for web and mobile applications.

Nexmo helps growing startups and agile enterprises enhance their customer experience — and realize new business outcomes at scale. Nexmo has an SMS service which we will use to send messages to the users.

MongoDB is a free document-oriented database program. it’s regarded as a NoSQL database program, MongoDB uses JSON-like documents with schemas.

Mongoose models MongoDB objects for node.js, for this demo it will enable us to model MongoDB objects for our express app.

NPM and Node Install<br> The installation of Node and npm is required before anything reasonable can be achieved. Installing Node automatically installs npm as well. Node can be installed from the installation instructions (basically download and install) from the website. Skip this step if you already have the installation both packages.)

After download, check if node and npm were installed via command line(CLI):

node -v

npm -v

Creating a template Express Web App<br> Create a folder named “appointment-scheduler-web-react-app”

From your Command Line access your “ appointment-scheduler-web-react-app” folder, proceed to the api folder like this:

cd appointment-scheduler-web-react-app

install the express CLI (Command Line Interface) tools globally:

npm install express-generator -g

To create a new express project:

express --view=ejs api

The generator creates a new express app called api. The — view flag tells the generator to use ejs template engine for the view files.

Access your folder:

cd api<br> Folder structure should look like this:

+---bin<br> +---public<br> +---routes<br> +---views<br> +---app.js<br> +---package.json

Next, install the following dependencies in your new api folder via Command line(CLI):

npm install

npm install mongoose

Mongoose will be used to create MongoDB objects and connect them to the MongoDB database.

Your app.js file should look like this:

Creating a Nexmo Account<br> We are going to use Nexmo to send a text message to user’s mobile phone number after scheduling the appointment.

We are going to create a Nexmo account, signup here

if you get error on nexmo I’ve recive comment from Nexmo crew

To install Nexmo via CLI:

npm install nexmo

After account setup make sure you get the following from the console dashboard

1.API Key<br> 2. API Secret

Copy them to somewhere safe, we will need it later to create the nexmo object in file, controllers/appointments.js.

Creating a MongoDB Database<br> MongoDB is an open-source cross-platform document-oriented database program. Classified as a NoSQL database program, MongoDB uses JSON-like documents with schemas.

MongoDB instance can be downloaded and installed in your machine, see link for more, but for this tutorial, we are interested in the cloud option where we can connect our express app to the database via the Mongoose connection string.

Now let’s create a MongoDB database via MongoLab, Mongolab is free tier and easy to set up.

To start:

Create a MongoLab account<br> Create a new database as shown in the image below:

Click on the SandBox option above to create a free tier

Next, for the AWS Region below choose US East (Virginia) (us-east -1) option:

Below, type “appointments” as database name

Click continue and you are done. Congrats you have completed the database creation process. below is a preview of your database.You should see your database listed on the MongoDB deployments:

Creating routes, models, and controllers for the Express Web App<br> We are now going to build express app features. Our express app is will enable the appointment scheduler app to interact with the MongoDB we created earlier.

The express app requires the following:

Models: To access the MongoDB database using mongoose, we need to define schemas and models. schemas and models convey to mongoose a simplified representation of the data structure comprising of fields and data types.

Routes: Express makes use of routes to handle request and responses from the client app (appointment scheduler in this case) and MongoDB.

Controllers: Controllers are actually callback functions. Moving forward appointmentController.all, slotController.all and appointmentController.create are callback functions which we are referring to as controllers.

First, we have to edit the app.js file to add our mongoose connection:

Create a models/index.js file in your base api folder:

Controllers for Express App

Create a controllers/appointments.js file in your base api folder

Create a controllers/slot.js file in your base api folder

Routing for Express App

Edit the routes/index.js file to look like this:

The express router is responsible for navigation within the app, from above it gets and displays the express app default page located in path views/index .ejs.

Let’s continue by creating our own route. Create a routes/api/index.js

Both the express and react apps use the port 3000 in development mode. so we are a going to change the localhost port value to 8083

Go to bin/js in your express app

change port from 3000 to 8083

Stop express app with Ctrl C(for windows), Ctrl Z(for mac), rerun with:

npm start

Go to localhost:8083 using your browser:

Now we are done with our express app creation. Let’s see if we can post and get values using our express app.

Upgrade your JavaScript skills.<br> Learn React.js in just a couple of

afternoons.

A premium step-by-step training course by Wes Bos to get you building real-world React.js + Firebase apps and website components. START LEARNING NOW

Testing with Postman

Since we don’t have a form to send values, Postman is a utility tool for testing APIs is ideal to run tests, with Postman we can post and get values to and from the database using the routes we created earlier, let’s proceed:

You need to download and install Postman

Let’s start testing locally, with posting appointments:

Followed by, retrieving slots:

Front end with React App

Now access your command line Interface (CLI) and use the following command to create react app globally using npm:

For npm version 5.1 or earlier<br> npm install -g create-react-app

To create our appointment scheduler app, run a single command<br> npm install create-react-app appointment-scheduler

For npm version 5.2+ and higher<br> npx install -g create-react-app

To create our appointment scheduler app, run a single command<br> npx install create-react-app appointment-scheduler

A directory called appointment-scheduler is created at the current directory. Inside the folder you should see the following transitive dependencies<br> appointment-scheduler<br> ├── README.md<br> ├── node_modules<br> ├── package.json<br> ├── .gitignore<br> ├── public<br> │ └── favicon.ico<br> │ └── index.html<br> │ └── manifest.json<br> └── src<br> └── App.css<br> └── App.js<br> └── App.test.js<br> └── index.css<br> └── index.js<br> └── logo.svg<br> └── registerServiceWorker.js

To start the project in development mode via CLI<br> npm start

Access your app directory using:<br> cd appointment-scheduler

Install the following dependencies:<br> npm install material-ui

npm install axios

Creating Views for Appointment Scheduler App

We will start by creating a components folder:

Create a folder with the name “components” in your “src” folder directory of your appointment-scheduler app. see below:

appointment-scheduler/src/components

Create AppointmentApp.js in the components folder with the following code:

update your src/App.js

Notice that we imported the AppointmentApp component and included a MuiThemeProvider component. The appointmentApp component is enclosed inside the MuiThemeProvider to inject material-ui theme into your application context. Following that, you can use any of the components in the material-ui documentation.

App Functionality In Depth

App state Description<br> The app loads data from an database via the express app

  • Our appointment scheduling process we’ll take place in three steps: selecting a date, selecting a time slot, and filling out personal information. We need to track which step the user is on, the date and time they’ve selected, their contact details, and we also need to validate their email address and phone number.
  • We’ll be loading scheduled appointments slots that we’d benefit from when the user is selecting available slot times. A slot time that has already been selected by a previous user cannot be selected again.
  • As our user proceeds through the scheduling steps, after selecting the date in step 1 the application will proceed to step 2 where the user will select either AM or PM which will display the available appointment times (slot times), when that is done the demo will proceed to step 3 where the user will enter their details and schedule the appointment.
  • A modal will display the appointment date and time for user confirmation.
  • Finally, a snackbar will display a message indicating appointment success or failure.

Method Description of AppointmentApp Component

Because the AppointmentApp component is over four hundred lines of code. we are going to divide and explain each chunk of code as we progress. See here for a complete version of source code.

Various components are imported from respective frameworks/libraries we installed. the state of various fields such as firstName, lastName are set using this.state.<br> For the componentWillMount lifecycle method below, previous scheduled appointments slots are retrieved from the database via the express app.

The handleNext method moves the stepper to the next position using the stepIndex field.<br> The handlePrev method moves the stepper to the previous position using the stepIndex field.

The validateEmail method checks the email parameter and returns true if the email value is valid or false if it is not.

The validatePhone method checks the phone parameter and returns true if phone value is valid or false if it is not.

The renderStepActions method renders the Next, finish and Back Buttons.

The handleSetAppointmentDate method is used to set the state of the appointmentDate field.<br> The handleSetAppointmentSlot method is used to set the state of the appointmentSlot field.<br> The handleSetAppointmentMeridiem method is used to set the state of the appointmentMeridiem field.

The checkDisableDate method passes disabled dates to the date picker component.

The handleDBResponse method handles the appointment slot data from the database.

The renderAppointmentTimes method renders available time slots to user and disables the rest if any.

The renderAppointmentConfirmation method display a modal with the user’s inputted information and asks th user to confirm, before saving to database.

The handleSubmit method is used to pass user data to the database via the express app. it will display a snackbar message if the data is successfully saved in the database or if it fails.

The render method renders all components to the virtual DOM(Document Object Model).

update your AppointmentApp.js with source code, run your app via Command line using:

npm start

Make sure both the express and appointment-scheduler apps are running, test to see if working properly.

Conclusion

Now we are done with our apps, congratulations!, I know it was challenging, but you have created two app demos. WELL DONE…

Upgrade your JavaScript skills. Learn React.js in just a couple of

afternoons.

A premium step-by-step training course by Wes Bos to get you building real-world React.js + Firebase apps and website components. START LEARNING NOW

Disclaimer

This post contains affiliate links to products. We may receive a commission for purchases made through these links.

just a duck developer

Write your comment…

Be the first one to comment