Chromatica

A Daily Color Sorting Puzzle Game

Chromatica is a daily color-sorting puzzle game where users organize mixed color blocks into their correct groups. Each day presents a new challenge, encouraging users to return regularly and test their problem-solving skills.


pomotimer app pomodoro screen pomotimer app long break screen pomotimer app long break screen pomotimer app long break screen

Inspiration

I wanted to create a simple daily puzzle game that was unique everyday like Wordle. The goal was to build something people could come back to every day while also improving my frontend development skills.

Tools Utilized

  • HTML
  • JavaScript
  • CSS

Difficulties Encountered

  • Game Interactions:Implementing intuitive block movement and sorting behavior using vanilla JavaScript
  • Visual Polish: Creating smooth transitions and animations to make interactions feel responsive and satisfying
  • UI/UX design: Designing a clean, game-like interface using CSS, including feedback elements like completion states and confetti

Pomodoro Timer

A Focus & Productivity App

A responsive Pomodoro timer built with React that helps users manage focus sessions and breaks. Users can switch between Pomodoro, short, and long break modes, with start/pause controls and a real-time countdown. To improve time awareness, I implemented an end-of-session sound alert using the browser’s Audio API, triggered through React’s useEffect hook when the timer reaches zero.


pomotimer app pomodoro screen pomotimer app long break screen

Inspiration

I wanted to rebuild a clean, functional version of a Pomodoro timer to strengthen my understanding of React state management and side effects, while creating something I could actually use daily. It is a clone of Pomofocus.io

Tools Utilized

  • React
  • JavaScript
  • CSS

Difficulties Encountered

  • Timer Logic: Managing intervals and side effects correctly without creating duplicate timers
  • Design challenges: Recreating the exact aesthetic of the original app.

eBuddy

An Expense Tracking App

Introducing eBuddy, an innovative expense tracking web app, designed to simplify your financial management. Seamlessly log your expenses and income, and gain valuable insights into your financial health through dynamic graphs and visual aids. A true showcase of my web development proficiency, this user-centric platform offers a clear and intuitive way to comprehend your monetary patterns. Elevate your finances with this practical yet impressive tool that reflects both my coding skills and commitment to enhancing everyday life.


eBuddy Screenshot 2 eBuddy Screenshot 3 eBuddy Screenshot 4 eBuddy Screenshot 5

Inspiration

My project draws inspiration from a close friend's financial struggles. In search of a challenge to improve my coding skills, my friend suggested I create something to help him keep track of his finances. I wanted to ensure he could access it from anywhere, leading me to develop a web app despite having no prior experience in building websites. The vision: to offer easy expense tracking and financial empowerment to people worldwide.

Tools Utilized

  • PostgreSQL
  • Django
  • JavaScript, HTML, CSS

Difficulties Encountered

  • Deployment hurdles: Experimented with various platforms: PythonAnywhere, Heroku, Render. Settled on Render after trial and error.
  • Design challenges: Grappled with CSS to enhance app aesthetics.
  • GitHub integration: Faced difficulties in pushing code to GitHub for version control.

Light and Sound Memory Game

Memory Challenge

Dive into nostalgia with my creation, the "Light and Sound Memory Game." The game is a classic yet captivating experience, testing your memory prowess as you match sequences of lights and sounds. An engaging fusion of entertainment and cognitive challenge that reflects my passion for crafting interactive and enjoyable projects.

Memory Game Screenshot 2 Memory Game Screenshot 3

Inspiration

This project was an assignment for my application to join CodePath's SITE program, motivating me to create something both enjoyable and impactful.

Tools Utilized

  • JavaScript
  • HTML
  • CSS