main menu of application management dashboard search and filter orders function product management function reporting function interactive reporting chart

Category

Full-stack application

Front-end

JSP, CSS3, JavaScript

Back-end

Java Spring Boot, Gmail API, Paypal API, mySQL, Docker

Project Summary

An all-in-one application specifically designed for street vendors, featuring a user-friendly interface and intuitive functionalities. This application enables vendors to easily take and process orders while efficiently managing back-of-house tasks such as register new employee and manage existing employee details, manage product list and categories, manage product and sub-product details ( product images, size, price), generate reports for sales and orders.

01. The Challenge

Database design: This is the most important phase of the project. This phase's challenges include drafting Entity-Relationship Diagram, identifying the application functionalities, requirements and estimating timelines for project development stages.

Session management: the application can be used by multiple users at the same time and proceed multiple orders.

Login function: It was an intensive process of self-exploring fundamental web technologies (API concepts, REST API, session management) and advanced topics such as persistent cookies (server-side cookies), role-based access control. Only management and owner of the shop can access management dashboard while employee user is redirected to menu function.

API integration: The application was intentionally built as all-in-one including order taking, payment processing with cash or card for street vendors, hence it requires integration of different payment methods. The application also requires function to send confirmation emails with verification token and link to register new employee.

Image data management: the application allows users to upload their images when adding new product into product list. The new image is added to the main menu once uploaded. Challenges arised when deciding image size, type of image data for storage, ability to retrieve image data efficiently.

Navigation : the application has ability to track previously visited page correctly and allows smooth navigation experience. This is integrated with Spring security to allow access based on user's role.

0.2 The Solution

Database design: Implemented a phased approach over 1.5 months, encompassing object definition, ERD creation, and schema optimization for efficient data handling. Utilized Docker containers for MySQL to ensure consistent database environments across development and production stages.

Session management: Implemented centralized session handling, leveraging Spring's capabilities to ensure data integrity and user isolation, supporting concurrent users and multiple order processing.

Login function:Utilized Spring Security for robust authentication and authorization, featuring customized access denied and login pages. Implemented role-based access control with enhanced security through persistent token-based RememberMe cookies and password encoding.

API integration: Developed a modular architecture integrating various payment methods via RESTful APIs. Implemented JavaMail library and Gmail API for password recovery and user registration functionalities.

Image data management: Utilized BLOB data type for efficient image storage, implementing compression techniques to reduce data load. Employed Base64 encoding for image retrieval and display, with server-side processing to convert BLOB data to Base64-encoded strings.

Navigation: Developed a custom breadcrumb system using stack data structure, integrated with Spring Security, to enhance user experience and facilitate easy backtracking while maintaining role-based access control.

The result

This project enhanced both technical skills and practical experience in developing user-centric, secure, and scalable web applications

➢ Learned Spring Framework, database design, Docker containerization, and RESTful API integration.

➢ Gained comprehensive skills in backend (Java, Spring) and frontend (HTML/JSP, CSS, JavaScript) technologies.

➢ Implemented advanced features like role-based access control and persistent token-based authentication.

➢ Learned techniques for efficient image storage and retrieval using BLOB data types and Base64 encoding.