CineVault

Java . JavaScript . AJAX . JQuery . HTML . CSS

This application follows modern web application framework using a lightweight Javascript front end (client) supplying the GUI and a REST API feeding the requested data.

The end solution was hosted in AWS using TomCat a popular web server for Java applications.

CineVault is your personal collection of all the films that have made you laugh, cry, and turn the TV off. This application allows you to create, read, update, and if you feel that strongly about how bad the film was; delete it. Your collection is stored in a database accessed through a RESTful API hosted in the cloud.

However, I don’t expect you to learn how to send RESTful requests of JSON, XML, or Custom Text data that would not be a good user experience. Instead I have built frontend using JavaScript, jQuery, and AJAX which makes managing your collection easy. You’re welcome. Although, if you are interested in the how the application has been implemented you’re in the right place.

This is a portfolio of a software engineer after all…

Architecture

Client -> Server

Client <- Server

The solution follows a very popular architecture of Client and Server used in many big companies today such as Netflix, Uber, and Facebook. The Client is the requester and the Sever is the responder. In this case the server hosts a RESTful API which can serve multiple applications often referred to as a Microservice.

This can be directly interacted with or used to serve a front end application.

Backend (REST API)

The API follows the RESTFul framework with 5 functions using GET, POST, PUT, and DELETE methods. Functions accept JSON, XML, and a custom text format and can also return data in these formats when requested using the ‘Accept’ header.

The solution is built in Java and hosted on AWS using TomCat.

The custom format uses # as a deliminator with each film separated by a new line.

Each film has a unique ID, title, year, director, stars (cast), genre, and a rating. Check out the Postman collection with examples.

Functions

GET: Get All Films

This REST API endpoint allows the user to retrieve all films from a database in the format of their choice - JSON, XML, or TEXT. To specify the desired data format, the user should include an "Accept" header in their HTTP request, with the value set to the desired format. The APi will then return a list of all films in the format chosen.

GET: Search Films

This endpoint allows users to retrieve a series of films in the format they require by adding a header Accept with the data format they want. The API supports two query parameters of searchBy and searchString. searchBy is the what type of data you are querying this includes id, title, year, director, stars, genre adn rating. searchString is the value you are. looking for such as the title of 'Batman'. The resulting films will be returned in the requested format, whether it be JSON, XML, or TEXT.

POST: Add Film

This endpoint allows users to add a film to the database by sending a request with the necessary details in the body of the request. Users can send the details of the new film in the JSON, XML, or TEXT format by specifying the format in the Content-Type header. The body of the request should include details like the film's title, year, director, stars, review, genre, and rating in the format specified in the header. Once the API receives the request, it will process the data and add the new film to the database.

PUT: Update Film

This REST API endpoint updates an existing film in the database by including the ID of the film in the request body along with all fields must have a value or it will be removed. The format of the request body must be specified with the Content-Type header, and it can be either JSON, XML, or TEXT. The request body must include the ID of the film to update and any parameters to modify, such as title, year, director, stars, review, genre, and rating.

DELETE: Delete Film

This endpoint allows users to delete a film from the database by sending a request with the ID of the film to be deleted in the body. The body must be in JSON, XML, or TEXT format, and the Content-Type header must be set to the corresponding data type. Only the ID of the film to be deleted should be included in the body. Once the request is received, the API will find the corresponding film in the database and delete it.

Frontend

The JavaScript client consumes the web service (REST API) and presents the film data to the user in a cohesive manner.

The client includes features for browsing and searching the database and provide options for inserting, updating, and deleting films.

This solution utilises AJAX which stands for Asynchronous JavaScript and XML. This is a web development technique that allows web pages to update asynchronously by exchanging small amounts of data with the server in the background. This means that parts of a web page can be updated without needing to reload the entire page, providing a more dynamic and responsive user experience.

Previous
Previous

Visualising Conversational AI App

Next
Next

Car MOT Desktop App