Appointment Booking using AngularJS, NodeJS, MongoDB

In this tutorial, we will create a simple, real and single page Appointment Booking web application using Javascript Fullstack or MEAN Stack (MongoDB + Express + AngualrJS + NodeJS) which can also be used as an Event Scheduler.

  • The Javascript fullstack will have both Client and Server architecture and will share the same JSON (Javascript Simple Object Notation) format across Client, Server and Database.
  • The code will be fast, modular and less redundant.
  • We will integrate Google Material Design guidelines into our code for a better UI experience.
  • We will use document based no-sql database named MongoDB

Appointment Booking using AngularJS, NodeJS, MongoDB

Live Demo Download

Installation

Install Required Softwares

NodeJS (http://nodejs.org)

NodeJS is a non blocking, event-driven javascript framework for building network based applications. This comes with Node Package Manager. (npm)

Install NodeJS and run node

MongoDB (http://mongodb.org)

MongoDB is a Javascript based cross-platform document-oriented NoSQL database.

Install MongoDB and run mongod in a separate shell to keep an instance of the MongoDB Daemon running

Start the application

Open Command Prompt / Terminal and Run the following commands

Open your web browser and point to http://localhost:8080

Project Structure

The web application code is mainly separated into 2 parts (Client and Server).

package.json: Contains node dependencies that are required for this application.
public
index.html : The starting point for our application front end
app.js: Initializes the angular module and injects the required external dependencies.
app

customer.html : The customer information popup resides here.

main.css: All required css files for main.html saved here.

main.html: The front end of our app.

main.js: Creates a component named main and implements required logic.

server
api

appointment

          –index.js: Generates the appointments ReST API routes.

          –model.js: The database model.

index.js: The starting point for our server. This defines database connection and creates web server.

Code

index.html

The starting point for our application front end.

app.js

It starts the angular module and links the required external dependencies.

customer.html

Appointment details with customer information.

main.css

All css files for main.html.

main.html

Application’s front end.

main.js

It implements required logics.

server/index.js

It creates the appointments ReST API routes.

package.json

It carries node dependencies which are required for this application.

Print Friendly

Related Posts

Written By: