FuelMe

Project Overview

Technologies Used:

Figma

React

Nextjs

Tailwind CSS

GraphQL

Role: UX/UI Designer & Full Stack Developer

Timeline: October 2025 - December 2025

FuelMe is a web-based application to help users set and achieve their fitness goals. FuelMe does this by calculating personalized calorie and macronutrient targets based on user metadata (height, weight, activity level, fitness goals) and having users log meals to track their daily intake with their nutrition goals.

Design & Development Process

I took the initiative in our group of 5 to design the high fidelity application prototype in Figma before any development began. I implemented a design system and component specifications before development.

I demonstrated how UI components should look from a design standpoint and how each UI component should function. Additionally, I designed the logo to be the fork and knife in between the speedometer, representing the playfulness of "tracking what you eat", effectively communicating the app's ethos. The typography for the logo and the headers is “Nimbu” – a playful font designed for the food business, while still being professional enough for branding.

Our team split the work via database collections, to which I was responsible for the full stack implementation of the food logs collection (portion of the database):

• GraphQL: Built schema and resolvers for meal create, read, update and delete operations
• Redis: Implemented caching for frequently accessed user meal data, offloading slower read levels from our database to high-speed reading operations for users with extensive meal histories
• Frontend: Developed meal logging interface with date range filtering using React and Next.js
• Styling: Refactored Tailwind CSS across all 5 collections to ensure brand consistency

Results & Learning

I successfully delivered a full stack meal logging portion of the website while implementing Redis caching for improved query performance on large datasets for the user’s respective food logs. Additionally, the Figma prototype reinforced the concept of a smooth development process by reducing mid-development design changes and aligning team expectations. In retrospect, defining the Tailwind config file with design tokens from day 1 would allow us to avoid major end-of-project Tailwind CSS refactoring, allowing us to focus on critical bugs to polish.