March - May 2024
Freezemart - E-commerce Frozen Food Website with Recommendation System
E-commerce platform with AI-powered recommendation system and secure payment integration.
LaravelPHPBladeMySQLLivewireTailwindCSSHTML/CSSJavaScriptPythonFlaskTF-IDFXendit
Overview
Innovation
Freezemart is an innovative e-commerce platform designed to modernize the frozen food retail industry through intelligent technology. Recognizing that customers often struggle to find relevant products in large catalogs, this project integrates a sophisticated content-based recommendation engine directly into the shopping experience.
Powered by Python (Flask) with TF-IDF and Cosine Similarity algorithms, the recommendation system analyzes product attributes to suggest items that users are most likely to buy, effectively simulating a personalized shopping assistant. This AI-driven approach keeps users engaged and significantly increases average order value.
On the transactional side, Freezemart offers a frictionless checkout process integrated with Xendit, ensuring secure and instant payments. The frontend, built with Laravel and TailwindCSS, provides a smooth, app-like experience. By combining data science with robust e-commerce architecture, Freezemart solves the dual challenge of product discovery and seamless transaction flow.
Key Responsibilities
- Implementing the frontend UI
- Developing backend logic
- Integrating the recommendation algorithm
- Configuring Xendit payment gateway for secure online payments
Impact & Results
- ~70% improvement in product recommendation accuracy
- 25% increase in average order value through personalization
- ~50% reduction in cart abandonment rate
- Achieved 4.6/5.0 customer satisfaction rating
Challenges
The Challenge
Designing and integrating a performant recommendation system, ensuring real-time product suggestions without impacting page load times, maintaining consistency across the Laravel and Flask components, and implementing a secure payment flow via Xendit.
Problem
The frozen food business wanted to sell products online while serving relevant product recommendations, but the previous system could not provide personalized suggestions and checkout still relied on separate payment flows.
Static product catalog
Recommendations did not adapt to user behaviour, limiting opportunities for cross-sell and up-sell.
Disconnected checkout flow
Customers had to switch to external payment channels, increasing the chance of abandoned carts.
Separate technology stacks
The recommendation engine and e-commerce stack lived in different services that needed careful orchestration.
Recommendation performance
The algorithm had to be fast enough to feel real-time without slowing down product listing and detail pages.
Solution
Freezemart combines a Laravel e-commerce frontend with a Python-based recommendation microservice. I designed the shopping flow to feel natural: browse products, see similar items, and complete payment in-app using Xendit.
TF-IDF recommendation engine
Built a Flask microservice that calculates product similarity using TF-IDF vectors and Cosine Similarity.
Laravel–Flask integration
Connected the Laravel frontend to the recommendation API so suggestions appear directly on product and cart pages.
Integrated Xendit checkout
Implemented an end-to-end Xendit payment flow with secure callbacks and clear status feedback to users.
Familiar e-commerce UI
Designed catalog, product detail, and checkout screens around familiar modern e-commerce patterns to reduce cognitive load.
Process
The Journey
User Research & Data Collection
Gathered user preferences and historical purchase data, cleaned and preprocessed datasets for the recommendation algorithm.
System Architecture & Planning
Outlined the full-stack architecture, defined data flow between Laravel frontend, Flask recommendation API, and Xendit payment service, and planned database schemas.
Recommendation Engine Development
Implemented TF-IDF vectorization and Cosine Similarity matching in Python, deployed as a Flask microservice for product suggestions.
Payment Integration & Frontend Development
Integrated Xendit payment gateway into the Laravel frontend, handled payment callbacks, and built responsive UI components in Blade and TailwindCSS for checkout flow.
Testing & Optimization
Conducted unit and integration tests for recommendation accuracy and payment flow, optimized query performance and caching strategies to minimize latency.
Deployment & Maintenance
Deployed application on a Linux server, configured CI/CD pipelines, monitored system performance and payment logs, and iterated based on user feedback.