CRUD Web Application

info

What is it about?

The purpose of this project was to build a dynamic web application with full CRUD capabilities, using Node.js and MySQL. This application is designed to manage and display travel packages and bookings, allowing users (admins) to perform various operations interactively. The goal was to create a user-friendly platform inspired by popular travel booking sites.

Tools and Technologies used:

HTML

CSS

JavaScript

Bootstrap

Node.js

Express.js

MySQL

What features does it have?

Core Features (CRUD Operations)

Create: Admins can add new travel packages and services to the platform.
Retrieve: Users can view available travel packages and bookings.
Update: Admins can modify details of travel packages, user profiles, and bookings.
Delete: Admins can remove unwanted packages and bookings.

How is the development process?

Proposal, Planning and Design:

I was inspired by the Klook website and wanted to recreate its user-friendly experience. I defined my target audience as travelers looking to explore travel options and admins managing travel services. I then created a timeline and organized tasks to keep the project on track. Using Figma, I designed mockups with a clean, intuitive layout, focusing on easy navigation and clear presentation of information, similar to popular travel booking platforms.

Here is a few pictures of the design mockups:

Implementation

The application's backend was built using Node.js and Express.js. I set up a MySQL database schema that included tables for users, travel packages, bookings, and reviews. Each table was carefully designed with the necessary fields to support CRUD operations and manage relationships between different data entities. For the backend logic, I implemented RESTful routes to handle data requests, ensuring smooth interaction between the application and the database.

Challenges and Solutions

Challenges

During the development, I ran into a few issues. One major problem was an error that said "destination is not defined" when I tried to load the update page. This meant the data for the destination wasn't reaching the template properly, preventing it from displaying the information needed to update the package. I spent time debugging and found that the error was due to the way I was passing the data from the backend to the frontend template.

Another challenge was getting dynamic routes, like /editProduct/:id, to work correctly. This route needed to handle each unique package ID so that each entry could be accessed individually. Initially, the setup didn't work as expected, which caused issues with retrieving and updating specific items.

Solutions

To fix the "destination is not defined" error, I carefully checked how the data was being passed to the template. After making sure the destination data was correctly sent, the information displayed as expected, allowing users to see and edit details for each package on the update page.

For the dynamic routes, I adjusted the route definition to correctly recognize and handle unique IDs. By specifying the format accurately, I was able to retrieve and update each package individually, making the application function as intended for specific entries.

celebration

Final Outcome

Testing & Feedback

Testing

After developing the core features, I conducted thorough testing on each CRUD function—Create, Retrieve, Update, and Delete. This involved adding new travel packages, viewing them, modifying package details, and deleting entries. I verified that all actions were reflected accurately within the application, ensuring smooth and reliable functionality across the platform.

Feedback

Initially, the platform didn't include password protection for adding, updating, or deleting products. My lecturer provided feedback to enhance this by adding an admin password feature. Taking this suggestion on board, I implemented a password requirement for these admin operations. This added security layer ensures that only authorized users can perform these changes, making the platform more secure and controlled.

cognition_2

Reflections & Possible Enhancements

Learning Outcome

Through this project, I gained hands-on experience with full-stack development, deepening my understanding of CRUD operations and enhancing my knowledge of Node.js and MySQL. I also learned the importance of careful database design to support complex application features and ensure efficient data management.

Possible Enhancements

There is potential to introduce more advanced features, such as user authentication and personalized recommendations, to enhance the platform's functionality. Additionally, implementing a refined search and filtering system could improve user experience by making it easier to find specific travel options. Gathering user feedback for further UI/UX improvements is also a valuable next step, ensuring the platform evolves to meet users' needs effectively.