Development of a Client-Side Interactive Recipe Web Application

This project focuses on the development of a client-side interactive recipe web application, utilizing HTML5, CSS, and AngularJS. The project aims to create a responsive design that functions across various devices, allowing users to view, add, edit, and delete recipes. The assignment includes database design considerations, specifically the use of MySQL, and emphasizes the importance of well-written JavaScript code for client-side validation. The project also involves server setup for deployment, utilizing a Tomcat server, and addresses potential issues such as 500 HTTP errors. The development process follows a structured approach, including project initiation, design, development, and testing phases, as outlined in a Gantt chart. The project's goal is to gain proficiency in web application development using the specified technologies. References to software requirements specification and Gantt chart resources are included.

Background
I am choosing client-side interactive web application as this is more important in modern world. As we
know now days all the web application is moving to mobile application. We are developing responsive
design for web application. Responsive web design makes our web page looks good on all the devices
like desktop, laptop and tabs and even mobile. For this purpose we are using HTML5 and CSS
technologies.
Online recipe system is an example for client-side interactive web application where we can displays the
list of all the recipes. We will handle below option for my online recipe system.
 Filter recipe based on recipe ID from the list of recipe
 Add the new recipe
 Edit the existing recipe
 Delete the recipe from the system
Problem
Here we need to take care of recipeID as we will do all the operation based on this key like adding,
editing or deleting any recipe.
Database design should be in normalised form and every table should have primary key. JavaScript code
should be well written with validation as this is backbone for any client side web application. We may
face issue in integration of the application with database connectivity to MySQL. Once our application is
completed we need to host into tomcat server so that user can use this remotely. Sometime we will face
server issue as it is unable to host and give 500 http codes so we need to troubleshoot this issue to run the
web application properly without any pain.
Aims
My aim to learn HTML5, CSS and AngularJS technologies as this is most demanding in interactive web
application development. In this development, I will design responsive web page so that it will run on any
devices with automatically resize. In this way anyone can see the recipe with steps and ingredients to
prepare food from any device as per availability. The recipe can be added, edited and deleted online. We
will learn different type of HTTP method concept like Get, Post, Put and Delete.

Hardware and Software Requirements
List of Hardware:
1. Window operating system
2. Internet
List of Software:
1. MySQL
2. AngularJS
3. HTML5
4. CSS
5. Java
6. Rest Web service
7. Tomcat server
Plan
Followings are the main tasks/phases of the project:
Initiate the project
In this phase we discuss with the stakeholder, define the scope of the project, define the project
requirement, and analyse the project.
Project design
In this phase we design the database, design the software etc.
Project development
In this phase we actually develop the system, followings are some development example for this project:
1. Create main.html
2. Page to display a recipe display.html
3. Add a recipe add.html
4. Edit a recipe edit.html
5. Create java script file ingredinet.js,recipe.js

6. Server setup for deployment
Testing
In this phase we perform the system testing, logged bugs and also fix the bug.
Gantt chart
Followings Gantt chart shows the project phases/task and their associated timescale:

References
[1]. Software requirements specification. (2018). Retrieved Oct 25, 2018, from
https://en.wikipedia.org/wiki/Software_requirements_specification.
[2]. WHAT IS A GANTT CHART? .(2018). Retrieved Oct 25, 2018, from
https://www.teamgantt.com/what-is-a-gantt-chart.