Clean Plate was built as part of my frontend development course. I wanted to create something useful, so I chose a real-time recipe search feature powered by the Edamam API.

The app was designed to be fully responsive using Chakra UI. I focused on keeping the UI clean and making sure the recipe cards displayed well across different screen sizes.

I learned a lot about working with external APIs, managing state in React, and structuring reusable components.

The application consists of two pages: a recipe overview and a detailed recipe view. Users can search recipes by name, browse cards with basic info like meal type, dish type, health labels, and click to see all recipe details.

Each detail page includes: recipe name, image, total cooking time, servings, ingredients, all dietary and caution labels, and nutrition info including energy (kcal), protein, fat, carbs, cholesterol, and sodium.

Navigation is smooth and all UI components, including buttons and layout containers, are implemented exclusively using Chakra UI as per the project requirements.

Weathering Grounds is a simple weather forecast app created as part of my early frontend learning journey. It fetches real-time weather and 7-day forecast data from the OpenWeatherMap API.

The app was built using only HTML, CSS, and vanilla JavaScript. The layout is mobile-friendly and includes a visually structured forecast section with weather icons, temperature ranges, and day names.

Users can search for a city to view current weather conditions, including temperature, high/low, humidity, wind speed, and a short weather description.

One of the key features is the ability to toggle between Celsius and Fahrenheit units, which updates both the current and forecast temperatures in real-time.

After fetching current weather data, the app uses the coordinates to trigger a secondary API call for the forecast. Forecast cards are dynamically generated and rendered in the DOM.

This project helped me understand how to work with nested API calls, handle asynchronous requests with axios, and manipulate the DOM to update UI content dynamically.

I also learned about handling API errors, formatting timestamps, and making basic UX decisions like how much data to display and in what order.

A simplified React version of this app, called Weathering Heights, was later built using React. It focuses on clean component structure and current weather only. You can view both Vanilla JS and React versions clicking the links below.

World Clock is a small utility project built with vanilla JavaScript and styled with clean, minimal CSS. The app displays current local times for selected major cities, updating live every second.

Instead of relying on any external libraries, I used the built-in JavaScript Date object and basic DOM manipulation to fetch and display time values for different time zones.

This project was a quick and rewarding exercise in manipulating time data and building a simple UI with clear, readable output.

ByteBar is a sleek, mobile-friendly cocktail recipe app that blends creativity with code.

Users can search for drinks by ingredient, discover a surprise random cocktail, or let the AI-powered 'boozy bot' invent something entirely new.

It integrates real-time data from the CocktailDB API and uses a dynamic loop to display up to 15 ingredients with their measurements.

The app features typewriter-style loading effects, interactive bottom panels, and custom error handling for both input and API responses.

Built with pure JavaScript, HTML, and CSS, ByteBar was an exercise in responsive design, DOM manipulation, and polished UI transitions.

This project reflects my love of mixology and showcases my frontend skills through clean design, playful features, and solid functionality.

Before transitioning to React, I designed and developed my first portfolio website to showcase both my architecture and frontend projects.

This static website includes individual pages for frontend development, architecture, contact, and more.

It was a great exercise in clean, semantic HTML, modern CSS with Bootstrap, and simple JavaScript enhancements.

The site features smooth scrolling, responsive layout, image galleries, and a minimal design language aligned with my personal branding.

Looking back, this project reflects my early efforts to combine design aesthetics with technical presentation online.