A MINI PROJECT REPORT
On
Shoe Tracker System
Submitted in partial fulfillment of the requirement of
University of Mumbai for the Course
In
Computer Engineering (SEM III)
Academic Year 2025-26
Submitted By
Namrata Lalan: 24102072
Zaira Laraib: 24102057
Subject In charge
Prof Krishnapriya
CERTIFICATE
This is to certify that the requirements for the project report entitled ‘Shoe Tracker’ have been
successfully completed by the following students:
Name Moodle Id
Namrata Lalan 24102072
Zaira larib 24102057
Inpartial fulfilment of the course Full Stack Java Programming (2113611) in Sem-III of Mumbai
University in the Department of Computer Engineering during academic year 20252026.
Sub-in-Charge
Table of Contents
Sr.No. Topic Page No.
1. Problem Statement 4
2. Description of Java Libraries used 5
3. Technical Stack – Web Servers and other Technologies used 6
4. Implementation Details – Code and Screen-Shots 7-13
5. Execution Manual – Step wise description of execution of the 15
project
6. Conclusion 16
1. Problem Statement
Tracking and managing a shoe collection—whether personal or business-related—can become
messy and inefficient when done manually. People often lose track of what they own, how often each
pair is worn, and when replacements are needed. Businesses face similar inefficiencies in managing
inventory, analyzing usage trends, and understanding customer behavior.
The Shoe Tracker System is designed to eliminate these issues by offering a structured, data-driven
approach to shoe management.
Challenges Faced by Individuals
1.Lack of Centralization: No single platform to view all shoes, their details, and wear frequency.
2.Data Loss / Forgetfulness: Manual tracking leads to forgotten purchase dates or incomplete
records.
3.Limited Insights: Users cannot identify which shoes are overworn or underused, leading to poor
wardrobe planning.
4.Maintenance Oversight: Users often forget when shoes were last cleaned, repaired, or replaced.
Challenges Faced by Businesses
1.Inventory Mismanagement: Difficulty tracking stock levels, returns, or product wear data across
outlets.
2.Lack of Product Usage Analytics: No insight into how frequently different models are worn or
replaced by customers.
3.Customer Relationship Gaps: Retailers and brands lack post-purchase engagement or data to
predict buying patterns.
4.Quality Control Issues: Without wear tracking, it’s hard to assess product durability or manage
rental footwear effectively.
2. Description of Java Libraries Used
1. Java Servlet & HTTP Libraries
Used for handling web requests, managing sessions, and building the backend logic.
javax.servlet.* – Core classes for working with Servlets.
javax.servlet.http.* – For handling HTTP requests and responses (HttpServlet,
HttpServletRequest, HttpServletResponse).
javax.servlet.annotation.WebServlet – For mapping Servlets to URLs without web.xml.
javax.servlet.http.HttpSession – To manage user login sessions securely.
2. Java SQL (JDBC) Libraries
Used for connecting to the database, executing SQL queries, and managing data.
java.sql.Connection – Creates a link between your Java app and the MySQL database.
java.sql.DriverManager – Loads the MySQL driver and establishes connections.
java.sql.PreparedStatement – Safely executes SQL queries (prevents SQL injection).
java.sql.ResultSet – Stores and reads query results.
java.sql.SQLException – Handles database-related errors.
3. MySQL Connector/J (External Dependency)
This is the JDBC driver that enables Java to talk to MySQL.
Package: com.mysql.cj.jdbc.Driver
You’ll include this .jar file (usually mysql-connector-j-x.x.x.jar) in your /WEB-INF/lib folder or
classpath.
4. Java Utility & IO Libraries
For general tasks like reading input, writing output, handling exceptions, and managing dates.
java.io.IOException – Manages input/output errors during form submissions or responses.
java.util.* – Provides collections, lists, and data handling structures if needed.
java.time.LocalDate – Used to store and display purchase dates and wear log timestamps.
5. JSP Standard Tag Library (JSTL)
Used in JSPs for cleaner logic (instead of embedding Java code directly).
Core Tag Library: javax.servlet.jsp.jstl.core.*
SQL Tag Library (if you want simple DB operations in JSP, though not recommended for real
projects).
3. Technical Stack – Web Servers and other Technologies used
The Shoe Tracker System follows a two-tier client–server architecture where the client
interface runs in a web browser and the backend server handles business logic and
database communication.
The programming language used for the application tier is Core Java, integrated with Java
Servlets and JavaServer Pages (JSP) for dynamic web page generation. Java manages all
business logic, user authentication, shoe tracking operations, and form validations within
the system.
For data persistence, the project uses MySQL as the Relational Database Management
System (RDBMS). MySQL stores all shoe-related data, including shoe details, user
credentials, and wear logs. The connection between the Java application and MySQL is
managed through MySQL Connector/J (JDBC Driver), which serves as the middleware
enabling seamless data exchange between the application and database.
The User Interface (Presentation Tier) is web-based. It uses HTML and CSS for structure
and design, while JSP dynamically renders data such as shoe lists, wear counts, and user
logs.
The application is hosted on an Apache Tomcat Web Server, which processes all incoming
HTTP requests, executes Servlets, and delivers the corresponding JSP pages to the user’s
browser.
Overall, the Shoe Tracker System integrates Java (JSP/Servlets), MySQL, JDBC, and Apache
Tomcat to create a secure, responsive, and easy-to-use platform for managing and tracking
personal shoe collections.
4. Implementation Details – Code and Screen-Shots
i. App.css
#root {
max-width: 1280px;
margin: 0 auto;
padding: 2rem;
text-align: center;
}
.logo {
height: 6em;
padding: 1.5em;
will-change: filter;
transition: filter 300ms;
}
.logo:hover {
filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.react:hover {
filter: drop-shadow(0 0 2em #61dafbaa);
}
@keyframes logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
login page
v. Addshoe.jsx
import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { storage } from '@/lib/storage';
import { ArrowLeft } from 'lucide-react';
import { useToast } from '@/hooks/use-toast';
const AddShoe = () => {
const navigate = useNavigate();
const { toast } = useToast();
const [formData, setFormData] = useState({
name: '',
brand: '',
price: '',
size: '',
color: '',
occasion: '',
type: '',
purchaseDate: '',
image: '',
});
type={field === 'price' ? 'number' : field === 'purchaseDate' ? 'date' : 'text'}
value={formData[field]}
onChange={handleChange}
required={['name', 'brand', 'price', 'size'].includes(field)}
/>
</div>
))}
</div>
<div className="space-y-2">
<Label htmlFor="image">Image URL</Label>
<Input
id="image"
name="image"
type="url"
placeholder="https://example.com/shoe.jpg"
value={formData.image}
onChange={handleChange}
/>
</div>
<div className="flex gap-2 pt-4">
<Button type="submit" className="flex-1">Add Shoe</Button>
<Button type="button" variant="outline" onClick={() => navigate('/dashboard')}>
Cancel
</Button>
</div>
</form>
</CardContent>
</Card>
</main>
</div>
);
};
export default AddShoe;
Add new shoe
vi. Dashboard.jsx
return (
<div className="min-h-screen bg-gradient-to-br from-background via-muted to-secondary">
<header className="border-b bg-card/50 backdrop-blur-sm sticky top-0 z-10">
<div className="container mx-auto px-4 py-4 flex justify-between items-center">
<h1 className="text-2xl font-bold text-foreground">My Shoe Collection</h1>
<div className="flex gap-2">
<Button variant="outline" onClick={() => navigate('/wear-log')}>
<TrendingUp className="w-4 h-4 mr-2" />
Wear Log
</Button>
<Button variant="outline" onClick={handleLogout}>
<LogOut className="w-4 h-4 mr-2" />
Logout
</Button>
</div>
</div>
</header>
<main className="container mx-auto px-4 py-8">
<div className="mb-6">
<Button
onClick={() => navigate('/add-shoe')}
size="lg"
className="w-full sm:w-auto"
>
<Plus className="w-5 h-5 mr-2" />
Add New Shoe
</Button>
</div>
Dashboard
{shoes.length === 0 ? (
<Card className="text-center py-12">
<CardContent>
<p className="text-muted-foreground text-lg mb-4">
No shoes in your collection yet.
</p>
<p className="text-sm text-muted-foreground">
vii. Wearlog.jsx
{logs.length === 0 ? (
<Card className="text-center py-12">
<CardContent>
<p className="text-muted-foreground text-lg">
No wear history yet. Start logging when you wear your shoes!
</p>
</CardContent>
</Card>
):(
<div className="space-y-6">
{Object.entries(groupedLogs).map(([date, dateLogs]) => (
<div key={date}>
<h2 className="text-lg font-semibold mb-3 text-muted-foreground">{date}</h2>
<div className="space-y-2">
{dateLogs.map((log) => (
<Card
key={log.id}
className="cursor-pointer hover:shadow-md transition-shadow"
onClick={() => log.shoe && navigate(`/shoe/${log.shoe.id}`)}
>
<CardContent className="flex items-center gap-4 py-4">
<div className="w-16 h-16 rounded bg-muted overflow-hidden flex-shrink-0">
{log.shoe?.image ? (
<img
src={log.shoe.image}
alt={log.shoe.name}
className="w-full h-full object-cover"
/>
):(
<div className="w-full h-full flex items-center justify-center text-xs text-muted-
foreground">
No Image
</div>
)}
</div>
<div className="flex-1">
<h3 className="font-semibold">{log.shoe?.name || 'Unknown Shoe'}</h3>
<p className="text-sm text-muted-foreground">{log.shoe?.brand}</p>
</div>
<div className="text-sm text-muted-foreground">
{new Date(log.date).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
</div>
</CardContent>
</Card>
))}
</div>
</div>
))}
</div>
)}
</main>
</div>
);
};
export default WearLog;
Wear History
Edit Shoe
viii. Shoedetail.jsx
const ShoeDetail = ({
shoe,
isEditing,
formData,
setIsEditing,
handleChange,
handleSave,
handleDelete,
handleWoreToday,
}) => {
return (
<main className="container mx-auto px-4 py-8 max-w-4xl">
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<Card className="overflow-hidden">
<div className="aspect-square bg-muted">
{shoe.image ? (
<img
src={shoe.image}
alt={shoe.name}
className="w-full h-full object-cover"
/>
):(
<div className="w-full h-full flex items-center justify-center text-muted-foreground">
No Image
</div>
)}
</div>
</Card>
<div className="space-y-4">
<Card>
<CardHeader>
<div className="flex justify-between items-start">
<CardTitle className="text-2xl">
{isEditing ? 'Edit Shoe' : shoe.name}
</CardTitle>
{!isEditing && (
<div className="flex gap-2">
<Button size="sm" variant="outline" onClick={() => setIsEditing(true)}>
</div>
<div className="space-y-2">
<Label htmlFor="size">Size</Label>
<Input id="size" name="size" value={formData.size} onChange={handleChange} />
</div>
</div>
<div className="grid grid-cols-2 gap-4">
<div className="space-y-2">
<Label htmlFor="color">Color</Label>
<Input id="color" name="color" value={formData.color} onChange={handleChange} />
</div>
<div className="space-y-2">
<Label htmlFor="occasion">Occasion</Label>
<Input id="occasion" name="occasion" value={formData.occasion} onChange={handleChange} />
</div>
<div className="space-y-3">
<div>
<p className="text-sm text-muted-foreground">Brand</p>
<p className="font-medium">{shoe.brand}</p>
</div>
<div className="grid grid-cols-2 gap-4">
<div>
<p className="text-sm text-muted-foreground">Price</p>
<p className="font-medium">${shoe.price}</p>
</div>
<div>
<p className="text-sm text-muted-foreground">Size</p>
<p className="font-medium">{shoe.size}</p>
</div>
</div>
{shoe.color && (
<div>
<p className="text-sm text-muted-foreground">Color</p>
<p className="font-medium">{shoe.color}</p>
</div>
)}
{shoe.occasion && (
<div>
<p className="text-sm text-muted-foreground">Occasion</p>
5. Execution Manual – Stepwise Description of Execution of the Shoe Tracker
System
Step 1: Database Setup
1.Start the MySQL server.
2.Create a database named shoe_tracker.
3.Create required tables: users, shoes, and wear_logs.
4.Verify that database credentials in your Java code (URL, username, password) match your
MySQL configuration.
Step 2: Project Compilation and Packaging
1.Compile all Java Servlets such as LoginServlet, AddShoeServlet, and WearLogServlet.
2.Place compiled files, JSP pages, and CSS files into the proper directories.
3.Add the MySQL JDBC driver to /WEB-INF/lib.
4.Include a web.xml file to map Servlets to their respective URLs.
5.Package the project as a .war file.
Step 3: Deployment
1.Start the Apache Tomcat server.
2.Deploy the .war file into the webapps folder.
3.Open a browser and access the app via:
4.http://localhost:8080/ShoeTracker/index.jsp
Step 4: Testing and Execution
1.Login Test: Enter admin credentials to verify access to the dashboard.
2.Add Shoe: Add new shoe details and confirm it appears in the list.
3.View Shoes: Ensure all shoes display correct information.
4.Edit/Delete Shoe: Modify or remove a shoe and confirm updates.
5.Track Wear: Use the “I Wore This Today” feature to log shoe usage.
6.View Wear History: Confirm wear counts and logs display correctly.
Step 5: Verification
Confirm all CRUD operations function properly.
Ensure data updates correctly in the database.
Test multiple users to verify data isolation and reliability.
6. Conclusion
The Shoe Tracker System provides an efficient and user-friendly solution for managing and tracking
footwear inventory. By leveraging automated tracking, real-time updates, and intuitive data
organization, the system minimizes manual errors, saves time, and ensures accurate record-keeping. It
not only enhances operational efficiency but also empowers users to make informed decisions
regarding stock management, trends, and customer needs. Overall, this system demonstrates a
practical application of technology in streamlining inventory processes and improving overall
productivity in footwear management.
