Enhancement Gallery
From C++ grocery tracker using text file to a full stack application with Java, Spring boot, MySQL, and Angular
The Grocery Tracker is a web-based application designed to monitor and track the frequency of product
purchases from a store, while also providing insights on sales trends. The original version of this
artifact
was created in C++ and focused on reading and analyzing data from text files generated by a store. This
enhanced version, built with Java Spring Boot for the backend, MySQL for the database, and Angular for
the
frontend, introduces a robust user interface, product management features, and visual representations of
sales data, such as product frequency charts.
The artifact was initiated as part of a project for the CS210 course in 2023.
I decided to include this artifact because it highlights my strengths in database management, backend
development, and data visualization, all important components of software engineering.
The Grocery Tracker project provided an opportunity to showcase a comprehensive set of skills,
particularly in the design and management of relational databases, integration between backend and
frontend systems, and the implementation of advanced SQL queries. The following outcomes highlight
how I
applied these skills while enhancing the functionality of the application:
Employ strategies for building collaborative environments that enable diverse audiences to support organizational decision-making in computer science. The Grocery Tracker project is designed to facilitate collaboration and provide decision-making support to various users, such as store managers, sales teams, and business analysts. The dashboard feature in the application allows users to easily access and analyze sales data, including top-selling products, sales by category, and store locations with the highest purchases. I designed the database schema and user interface to be user-friendly and accessible, ensuring that users can navigate the system and make data-driven decisions. The reports generated by the system help stakeholders track product performance and identify trends that impact purchasing strategies. This collaborative approach to sharing data across departments supports organizational goals and decision-making processes.
Design, develop, and deliver professional-quality oral, written, and visual communications that are coherent, technically sound, and appropriately adapted to specific audiences and contexts. A key part of this project involved creating clear and effective ways for users to interact with the underlying data. I designed a “custom Angular form” that allowed users to add and manage grocery items, ensuring a smooth user experience. The form includes input validation, preventing users from entering incorrect data, and it connects seamlessly to the backend for product management. Additionally, I provided users with a “dashboard” that visualizes key sales data, including top-selling products, sales by category, and store locations with the most purchases. I used charts and graphs to present this data, making it easy for users to understand sales trends and performance. Next to each chart, I added text boxes with chart summary and detailed explanation of the chart data. The dashboard automatically updates based on the data returned from SQL queries, demonstrating how technical information can be visually communicated to support decision-making. Clear instructions and documentation were also provided in the README file to guide users and developers through installing and using the system.
Design and evaluate computing solutions that solve a given problem using algorithmic
principles and
computer science practices and standards appropriate to its solution, while managing the
trade-offs
involved in design choices.
The backend of the system, built using Spring Boot and MySQL, serves as the foundation of
the Grocery
Tracker project. One of the most significant challenges was designing the database schema to
track
products, categories, store locations, and sales. I designed a relational database that
includes
many-to-one relationships between products and categories, and products and store locations,
which
ensures efficient organization of the data.
Advanced SQL queries were used to retrieve and manipulate data for reporting. For
example, I used
queries such as “SUM()” to calculate the total sales of each product, “COUNT()” to determine
the number
of times each product was purchased, “GROUP BY()” to group the sales by product name, and
“ORDER BY” to
sort the sales in descending order. These queries formed the basis of the Top Selling
Products chart on
the dashboard, where I Used “JOIN()” to join the sales and products tables to display the
product names
alongside the sales figures. This merging of tables allowed me to present meaningful
insights, helping
users quickly identify high-performing products. The database queries were optimized for
performance,
ensuring that the system could handle large datasets while maintaining responsiveness in the
user
interface.
Demonstrate an ability to use well-founded and innovative techniques, skills, and tools in
computing
practices for the purpose of implementing computer solutions that deliver value and
accomplish
industry-specific goals.
One of the most important innovations in the Grocery Tracker project was the creation of a
modular
backend architecture that separates concerns and makes the system scalable. By organizing
the backend
into distinct controllers like ProductController, CategoryController, SalesController, and
LocationController, I ensured that each component could be developed and maintained
independently,
making the system more efficient and easier to update as new features are added.
The artifact frontend was built using Angular, which helped me create a dynamic and
interactive user
interface for users to track product sales visually. This choice demonstrated my ability to
use modern
front-end frameworks that meet industry standards for responsive and user-friendly
interfaces. I used
HTML and CSS, along with Angular material to create a sharedUI component to centralize all
UI elements,
such as buttons, tables, forms, and labels. This design allows future developers to modify
the UI
without disrupting the core functionality of the system. Additionally, I integrated modern
web
technologies and visualization tools such as the JavaScript library “Chart.js” with the
Angular wrapper
“ng2-charts” to create bar and pie type charts to visualize product sales data.
Develop a security mindset that anticipates adversarial exploits in software architecture
and designs to
expose potential vulnerabilities, mitigate design flaws, and ensure privacy and enhanced
security of
data and resources.
Security was a critical focus during the development of this project. I implemented Spring
Security to
enforce user authentication and protect access to sensitive areas of the system. Users must
authenticate
before being able to view sales data or add new products to the tracker, ensuring only
authorized
personnel can modify or access the data.
To further enhance security, I created a WebSecurityConfig class that handles CORS
(Cross-Origin
Resource Sharing) issues, ensuring that the frontend can securely communicate with the
backend while
mitigating risks such as cross-site scripting (XSS). This configuration also ensures that
unauthorized
requests from untrusted origins are blocked.
Additionally, parameterized SQL queries were employed throughout the project to protect
against SQL
injection attacks. By using parameterized queries, user inputs are safely handled and passed
to the
database, preventing malicious actors from injecting harmful SQL code into the system.
These security enhancements demonstrate a proactive approach to safeguarding the
application from
potential exploits, ensuring that user data and business information remain secure. The use
of
authentication, CORS handling, and query protection reflects industry best practices for
building
secure and reliable applications.