Projects
Milestone Manager
A project milestone tracker with a friendly React UI on top of a robust Spring Boot backend—built to plan, visualize, and report progress across teams.
My role
UI/UX: designed the interface (layouts, flows, empty/error states) with a focus on clarity and fast task entry.
Frontend engineering: implemented the React app, state management, routing, and API integration; set up responsive styles and reusable components (cards, tables, forms, modals).
Collaboration: integrated with the Java Spring backend and coordinated API contracts with backend teammates.
What you can do in the app
Task & milestone management — organize work by project and milestone.
Interactive calendar & Gantt views — visualize timing and dependencies to spot risks early.
Team collaboration — manage members and keep everyone aligned with real-time updates.
Reporting — generate progress summaries for stakeholders.
SketchPad
A React-based sketching app with brush, shapes, eraser, color picker, and export options.
My Role:
Designed the UI/UX for simple and intuitive use.
Developed the entire frontend in React, integrating the Canvas API.
Added tools like brush, shapes, eraser, color picker, clear & export.
Features:
Adjustable brush and eraser size
Shape tools (circle, rectangle, triangle)
Color selection via react-color
Clear canvas & download as PNG
Tech Stack:
React | CSS | HTML5 Canvas API | react-color
Tech stack
Frontend: React + CSS (responsive UI).
Backend: Java Spring Boot, built and run with Maven.
Dev setup: frontend served on localhost:3006, backend on localhost:3007.
Highlights I worked on
Designed a clean dashboard with quick filters and at-a-glance health indicators.
Built reusable form patterns (validation, async submit states) to speed up CRUD features.
Implemented calendar/Gantt UIs with keyboard navigation and accessible labels.
Added loading/empty/error states so the app feels fast and communicates clearly.
Weather Dashboard
A React frontend + Express backend web application that displays 3-day weather forecasts.
My Role
Designed and implemented a clean, user-friendly UI.
Integrated current and forecast weather data using React and Axios.
Secured API communication by handling the key through the backend with .env and CORS.
Ensured smooth configuration and responsiveness across devices.
Key Features
Current Weather: Displays temperature, condition, humidity, and wind speed.
3-Day Forecast: Provides short-term weather predictions.
Responsive Design: Works seamlessly on both desktop and mobile.
Security Layer: API key hidden in the backend, never exposed on the client side.
Tech Stack
Frontend: React, Axios, CSS
Backend: Node.js, Express
Workflow: React runs on port 3000, backend API on port 5000.
Capstone Project - Laptop Recommender
As part of my senior capstone project, I worked with a team of Software
and Industrial Engineering students to develop a decision-support system
that helps users select the most suitable laptop based on their preferences and sustainability metrics.
What the App Does
The system combines multi-criteria decision analysis (MCDA) with a machine learning–driven backend to recommend laptops. Users can input and rank preferences such as price, performance, brand, screen size, memory, graphics card, and sustainability factors. The application processes these criteria and generates a ranked list of laptops with explanations, making the decision process transparent and user-friendly.
My Role – Frontend Developer
Designed and implemented the React-based user interface with a clean, responsive layout.
Built a multi-step ranking form where users assign weights to laptop features.
Developed the results dashboard, displaying both user-selected preferences and recommended laptops side by side for easy comparison.
Ensured smooth integration with backend APIs that handled data preprocessing, web scraping, and ML-based ranking.
Collaborated with Industrial Engineering teammates to translate decision models into a user-friendly frontend.
Technologies Used
Frontend: React.js, CSS3, JavaScript (ES6), React Router
Backend (team): Node.js, Express.js, Python (for ML models)
Data Handling: Web scraping, structured datasets, database integration
Collaboration: GitHub for version control, Figma for UI design, Agile practices (sprints & reviews)
Key Achievements
Delivered a responsive and intuitive web application that enables non-technical users to make informed laptop purchase decisions.
Applied human-centered design principles, ensuring clarity and accessibility across the UI.
Strengthened cross-functional teamwork, bridging technical and analytical perspectives to deliver a cohesive product.