ITC_Holiday_Card

Web Applications Development – Na Matho - Documentation

Web Application Architecture and Technologies

Technologies

When building the Holiday Card Maker web application we decided to use the MERN Stack. MERN Stack comprises of four technologies namely: MongoDB, Express.js, React.js and Node.js. We chose this stack because of its easy and fast deployment.

MERN Stack

Architecture

The illustration below is an example of how the different systems interact with one another. The user uploads a photo and React stores the image on Googe Firebase, in addition, sends to the server Express.js/Node.js which then stores the image’s metadata in MongoDB.

</img>

Backend Development

Node JS

Node.js is an open source JavaScript runtime environment built on Chrome’s V8 JS engine. It allows users to run code on the server(outside the browser). Node.js will be used to run Express and serve as the backend API code to handle HTTP requests/response. Because of Nodes popularity and community base, Node Pack Manager ( npm ) allows users to choose from thousands of free packages ( node modules ) to download.

Express JS

A web framework built for Node.js. Express makes it simpler and easier to write backend code. Express helps in designing APIs and handle HTTP modules. We used express to run on a port that we specify and make requests and responses. The following code creates a server where browsers can connect to. Once we are connected to localhost:5000. We can perform CRUD operations. In express, we can handle GET request with the get method.

</img>

Multer

For uploading files we used multer to indicate the destination and the filename. Code below

</img>

MongoDB

MongoDB is a document based open source database. Data is stored in the form of JSON style documents, which makes structuring of a single object clear.

Below is an example of an image file metadata in JSON documented format. With MongoDB we used GridFS to storing files that may exceed the BSON size limit of 16 MB. </img>

The following code below uses the GridFS to connect to our database and divides the file into parts or chunks or binary and file’s metadata. Click GridFS for more details.

</img>

Frontend Development

Semantic UI Design

For web design we used Semantic UI because of its sleek and modern design. Semantic UI is a front end framework that works very well with React. It allowed us to add multiple design components and elements to our page with ease. We also implemented the image-picker package in order to create a simple template selection which showcases the full image overlay once the user selects their desired design.

</img>

React JS

The following code displays React event handling. When the user uploads a photo, the function handleUpload() performs two tasks. One the image file gets sent to Google Firebase for storing and also sends the image back for previewing. Second, it sends the file to backend server (Express/Node). From there it GridFS divides the file into parts and stores the files in JSON documented format in MongoDB.

</img> </img>

Google Firebase

Google firebase stored user images and would be sent back to the client for previewing.

</img>