Full-Stack Developer

projects

github

Ian Macabulos  • Peerlist

Mama R's Bakery Admin is a specialized tool for managing a bakery's daily operations. It helps owners track customer orders, keep an eye on stock levels, and see how the business is performing. The system is designed to replace manual bookkeeping with a real-time digital dashboard.Key Functional Areas:<ul><li>Order Management (POS): A fast interface for recording sales. It works well on mobile devices so you can track transactions anywhere.</li><li>Inventory Terminal: A central place to monitor your supplies. It gives visual warnings when stock is low and keeps a history log of all stock changes.</li><li>Intelligence Reporting: This module turns sales data into simple charts. You can view performance for the last 24 hours, 7 days, or 30 days, and you can export the data to a CSV file.</li></ul>Technical Highlights: This project uses the MERN Stack (MongoDB, Express, React, and Node.js). I used Tailwind CSS to make sure the layout looks great on everything from small phones to very large monitors.

Mama R's

MovieLoom is a modern web application built for people who love movies and television. It uses the TMDB API to provide real-time data about thousands of titles and actors. The goal of the project is to create a smooth and easy search experience for discovering what to watch next.Key Features:<ul><li>Multi-Search Intelligence: You can search for movies, TV shows, and people all in one place.</li><li>Detailed Content Pages: View cast members, high-quality images, and watch official trailers directly through YouTube integration.</li><li>Smart Discovery: Browse dedicated lists for "Now Playing," "Popular," "Top Rated," and "Upcoming" releases.</li><li>Organized Browsing: Use the dedicated Genres page to find content by category or explore the People page to learn about actors and their filmography.</li></ul>Technical Highlights: This project is built using React 19 and Vite for a fast and responsive user experience. I chose to use Vanilla CSS to have full control over the styling and layout without relying on large UI libraries. The application uses Axios and the native Fetch API to communicate with the TMDB database securely. I also implemented React Router to handle seamless navigation between pages like Movie Details and Person Details without reloading the browser.

MovieLoom

SubTrack is a specialized financial dashboard. It helps you centralize and manage all your recurring digital expenses in one place. The goal of the platform is to give you a clear view of your spending and help you stop "vampire costs" through automated tracking and smart alerts.Key Features:<ul><li>Financial Command Center: A dashboard that visualizes your "Monthly Burn" and "Annual Projections." It uses charts to map out your financial path over six months.</li><li>Subscription Management: A full system to track active, paused, or cancelled subscriptions. It also includes a "Graveyard" archive to show how much money you have saved by cancelling old services.</li><li>Smart Alerts: An automated engine that tracks trial expirations and renewal dates. It sends email notifications through Resend so you never get charged for a service you forgot to cancel.</li><li>Currency Conversion: A real-time engine that converts international subscriptions into your preferred currency for accurate totals.</li></ul>Technical Highlights: This app uses the modern T3-adjacent stack for high performance. It uses Next.js 15 Server Components for fast loading and Prisma for secure data management. The interface features a "Dark Glass" look with smooth animations powered by Framer Motion. To keep your data safe, the app uses a privacy-first architecture that ensures your information is only visible to you.

SubVantage

ClimaPH is a high-performance weather platform designed specifically with Filipino users in mind. It provides accurate, real-time weather data and 5-day forecasts while adding helpful "Lifestyle" features that make the data more practical for daily life.Key Features:<ul><li>Localized Insights: The app includes a "Sampay Meter" to help you decide when to do laundry based on cloud cover. It also has an "Umbrella Check" to warn you about rain or high UV levels.</li><li>Real-Time Monitoring: Users can view 12-hour temperature trends and color-coded alerts for "Real Feel" temperatures.</li><li>Location Intelligence: The app automatically detects your location. It also features a fast city search that saves your favorite spots for quick access later.</li></ul>Technical Highlights: This project uses the latest Next.js 15 and React 19 features. I built custom logic to transform raw 3-hour interval data into clear daily summaries. To make the app fast, I implemented smart caching for API calls. This reduces the number of network requests and makes the app load instantly for cities you have already visited. I also used strict TypeScript to ensure the app is stable and bug-free.

ClimaPH

Thryve is a full-stack health and fitness application. It provides a single place for users to track their daily habits, including workouts, food, water intake, and sleep.The goal of the project is to make self-improvement fun and easy to follow. It uses a gamification engine to award digital badges for milestones, such as a 7-day streak or burning 1000 calories. This helps users stay consistent with their goals.Key Features:<ul><li>Holistic Tracking: You can log your exercises (sets and reps), daily calories, sleep quality, and water intake.</li><li>Visual Analytics: The app uses interactive charts to show your progress over time. This makes it easy to see your weekly calorie deficits and workout trends.</li><li>Seamless Updates: Thanks to Pinia for state management, the dashboard updates instantly when you add or delete data.</li></ul>Technical Highlights: This project was built using the MEVN stack (MongoDB, Express, Vue.js, and Node.js). It features a clean REST API and uses JWT for secure user login. I also integrated SendGrid to handle automated emails for welcome messages and password resets.