DEV Community: Melody Kelly. N

This Is Jollof — A Landing Page Built Around the Bottom of the Pot

Melody Kelly. N — Tue, 11 Aug 2026 09:17:34 +0000

This is a submission for Frontend Challenge - Comfort Food Edition, Perfect Landing.

A landing page for jollof rice — not a restaurant, not a recipe blog, just a love letter to one dish.

Jollof is comfort food with a personality: everyone has an opinion about how it should be made, and the most contested part of the whole pot is the crispy, caramelized layer that forms at the bottom while it cooks. That “bottom pot” crust is the centerpiece of the whole page.

What I Built

The site is built with React and features a hero section, a short story about why jollof feels like comfort food, a lighthearted section around the eternal “whose jollof is best?” debate, a step-by-step breakdown of how the dish comes together, and an interactive centerpiece: the Bottom Pot Dial.

The dial lets you choose your preferred crust level, from soft and fluffy to full party crust. As you drag the slider, the pot illustration and the accompanying content update live.

Demo

https://jollof-nine.vercel.app

Journey

I wanted to avoid the two landing-page defaults I kept seeing myself reach for: a cream background with a terracotta accent, or a stock hero with a big stat and a gradient.

Since jollof already has a strong, specific visual identity — pot-iron black, stew red, and scorched amber — I built the palette directly from the dish instead of creating a generic “food site” look. The crust colors then became both the UI accent and the visual element controlled by the interactive dial.

The Bottom Pot Dial is the part I'm most proud of. It's a simple useState slider under the hood, but tying it to three things at once — the SVG pot's fill color, the headline copy, and a small “argument likelihood” stat — made it feel like a real signature moment rather than just decoration.

The How It's Built section numbers the four layers of the dish in actual cooking order, since that's a real sequence and not just a stylistic choice.

On the code side, I split the component into a .jsx file and a separate .css file rather than keeping styles inline. This made the component easier to read and matches how I structure my projects elsewhere.

I also paid close attention to accessibility throughout: visible focus states on the slider, button, and email input; aria-label and aria-valuetext on the dial; a properly associated visually hidden label on the email field; and a prefers-reduced-motion fallback for the steam animation in the hero.

Thanks for reading — go put some rice on. 🍚🔥

DevHealth - Developers First

Melody Kelly. N — Wed, 05 Aug 2026 17:00:58 +0000

🚀 I've been building something for developers.

As developers, we spend hours writing great code—but we often neglect our own health.

Long coding sessions, skipped breaks, poor posture, lack of sleep, and eventually burnout can become part of the job.

That got me thinking: what if developers had a wellness platform built specifically for the way we work?

So I built DevHealth—an AI-powered wellness platform designed for developers and tech professionals.

It helps you:
• 🩺 Complete a developer-focused health assessment
• 🤖 Receive AI-powered wellness insights
• 📈 Track your progress over time
• 🎯 Build healthier coding habits

This is still an early beta, and I'm looking for honest feedback from the developer community.

If you have a few minutes, I'd really appreciate you trying it and letting me know:

• What's confusing?
• What would you improve?
• What's one feature you'd love to see?

Devhealth

Every piece of feedback helps make DevHealth better. Thanks! 💚

Building a Lead Generation Platform for Businesses

Melody Kelly. N — Tue, 16 Jun 2026 09:53:54 +0000

We Built Korexbase: A Lead Generation Platform for Finding Business Leads by City and Niche

Building software is exciting.

Building software that solves a real problem is even better.

Over the past few months, we've been working on Korexbase, a lead generation platform designed to help businesses discover targeted leads faster.

The Problem

Many agencies, sales teams, freelancers, and startups spend hours manually searching for potential customers.

The process usually looks something like this:

Search for businesses online
Collect contact information
Copy everything into spreadsheets
Repeat the process every day

It's slow, repetitive, and difficult to scale.

We wanted to simplify that workflow.

The Idea

Korexbase allows users to search for business leads by:

City
Industry
Business category

Instead of manually collecting data, users can generate leads and manage them through a clean dashboard.

The goal isn't to replace sales.

The goal is to help businesses spend less time searching and more time closing deals.

Building the Platform

A major focus during development was creating a dashboard that feels simple and easy to navigate.

Some areas we focused heavily on included:

Responsive layouts
User-friendly navigation
Clear data presentation
Fast loading interfaces
Consistent design patterns

Challenges

Like most projects, we faced a number of challenges:

Designing for Simplicity

One of the biggest lessons was that adding more features doesn't automatically create a better product.

We spent a lot of time simplifying interfaces and removing unnecessary complexity.

Creating a Better Dashboard Experience

Presenting lead generation data in a way that is useful without overwhelming users required multiple design iterations.

We focused on:

Better spacing
Better visual hierarchy
Cleaner cards and tables
Improved responsiveness

Product Positioning

An interesting challenge was refining the product's positioning.

As development progressed, we learned more about what users actually wanted and adjusted our messaging to focus on lead generation.

Current Status

Korexbase is now live and actively being improved.

We're currently gathering feedback from:

Business owners
Sales teams
Agencies
Freelancers
Marketers

Looking for Feedback

If you're interested in lead generation tools, we'd love your thoughts.

What features would you expect from a modern lead generation platform?

Website:

https://korexbase.com

Feedback is always welcome and helps shape future updates.

Thanks for reading 🚀

Shatter Bay — Breaking the Glass Ceiling in Tech

Melody Kelly. N — Sat, 14 Mar 2026 10:14:17 +0000

Show us your Art

Shatter Bay is an interactive frontend artwork representing the breaking of barriers in the technology industry.

The experience begins with rising code and digital energy trapped beneath a fragile glass ceiling. As interaction builds, cracks begin to form until the ceiling finally shatters, allowing the code to rise freely.

The project is designed as a symbolic moment of breakthrough, representing the progress toward gender equity in technology and the collective effort required to dismantle systemic barriers.

🔗 Live Project:
[https://shatter-bay.vercel.app/]

Inspiration

The inspiration behind Shatter Bay comes from the widely recognized metaphor of the glass ceiling — the invisible barriers that prevent many talented individuals from reaching leadership or recognition in their fields.

In tech especially, countless developers possess the creativity, skill, and ambition needed to innovate, yet systemic barriers have historically limited opportunities for many underrepresented voices.

This artwork transforms that metaphor into an interactive digital experience:

Rising code represents talent, creativity, and potential.

The glass ceiling represents invisible structural barriers.

The cracking and shattering symbolizes collective progress toward equity and inclusion.

Rather than presenting the idea as static imagery, I wanted users to participate in the act of breaking the ceiling, reinforcing the idea that progress happens through continued effort and participation from the entire tech community.

My Code

The project was built using frontend technologies to create an interactive and immersive experience.

Technologies used:

React
CSS
JavaScript

Interactive animations and particle effects

The goal was to combine symbolic storytelling with creative frontend engineering, demonstrating how code itself can be used as a medium for artistic expression.

💻 Source Code Repository:
(https://github.com/melodykellynwaogu/shatter)

Thank you to the DEV community and the WeCoded Challenge for creating a space that celebrates creativity, diversity, and the voices shaping the future of technology.

AI Builders Wanted — Let’s Create Together

Melody Kelly. N — Thu, 12 Mar 2026 08:26:53 +0000

Hey DEV fam 👋,

I’m Melody kelly, working on Syrma AI — a project designed to understand and combine text, images, audio, video, and code into something powerful for everyday life and tech questions.

But I don’t want to build this alone. I’m looking for dev friends — not just collaborators, but people who want to grow together.

Who I’m Looking For 🙏:

Frontend devs (React, Angular, TypeScript, etc.)

Backend engineers

Data engineers

Full‑stack builders who love experimenting

Who I Am 🤗:

Passionate about AI and creative projects

Open to global dev vibes 🌍

Value authenticity, curiosity, and community

If this resonates with you, drop a comment or connect with me. Let’s ship side projects, bounce ideas, debug together, and celebrate the wins.

Not just to code. But to grow. Together. 💻❤️

Deluxers Search Intelligence

Melody Kelly. N — Sun, 08 Mar 2026 13:13:50 +0000

Introducing Deluxers — A Fast, Minimal Search Engine

Hello Dev Community 👋

I’ve been working on a project called Deluxers, a search engine focused on speed, simplicity, and trust-first answers.

You can try it here:
https://deluxers.vercel.app

What Deluxers Is

Deluxers is designed as a clean and lightweight search interface that helps users quickly find information for everyday questions and technical topics without clutter.

The goal is simple:

fast search
minimal interface
structured results
simple navigation

Tech Stack

The project is split into three main parts:

Backend

Node.js
Express
MongoDB (Mongoose)

Web Interface

React
Vite

Mobile

React Native (Expo)

Architecture Overview

Deluxers follows a client → API → search pipeline.

Web and mobile apps send search requests to a REST API.
The API processes the request and retrieves results.
Results are structured and returned to the interface for display.

This architecture allows the web and mobile apps to share the same backend.

Features

Some features currently implemented include:

Fast search result loading
Clean result layout
Pagination for navigating results
Query suggestions
Structured link results

Deployment

The system is currently deployed across multiple services:

Web interface: Vercel
API server: Render
Mobile builds: Expo EAS

Why I Built It

I built Deluxers as an engineering project to explore how search engines work internally — including query handling, result structuring, and building scalable web interfaces.

It has been a great learning experience in building full systems that include:

frontend applications
backend APIs
deployment pipelines
cross-platform clients

Feedback Welcome

This project is still evolving, and I’m continuously improving it.

If you try it, I would really appreciate feedback from other developers.

https://deluxers.vercel.app

Deluxers Search Intelligence

Melody Kelly. N — Sat, 26 Jul 2025 19:09:34 +0000

Introducing Deluxers — A Fast, Minimal Search Engine

Hello Dev Community 👋

I’ve been working on a project called Deluxers, a search engine focused on speed, simplicity, and trust-first answers.

You can try it here:
https://deluxers.vercel.app

What Deluxers Is

Deluxers is designed as a clean and lightweight search interface that helps users quickly find information for everyday questions and technical topics without clutter.

The goal is simple:

fast search
minimal interface
structured results
simple navigation

Tech Stack

The project is split into three main parts:

Backend

Node.js
Express
MongoDB (Mongoose)

Web Interface

React
Vite

Mobile

React Native (Expo)

Architecture Overview

Deluxers follows a client → API → search pipeline.

Web and mobile apps send search requests to a REST API.
The API processes the request and retrieves results.
Results are structured and returned to the interface for display.

This architecture allows the web and mobile apps to share the same backend.

Features

Some features currently implemented include:

Fast search result loading
Clean result layout
Pagination for navigating results
Query suggestions
Structured link results

Deployment

The system is currently deployed across multiple services:

Web interface: Vercel
API server: Render
Mobile builds: Expo EAS

Why I Built It

I built Deluxers as an engineering project to explore how search engines work internally — including query handling, result structuring, and building scalable web interfaces.

It has been a great learning experience in building full systems that include:

frontend applications
backend APIs
deployment pipelines
cross-platform clients

Feedback Welcome

This project is still evolving, and I’m continuously improving it.

If you try it, I would really appreciate feedback from other developers.

https://deluxers.vercel.app

Juneteenth Tribute Page 🎉

Melody Kelly. N — Sun, 22 Jun 2025 13:32:08 +0000

This is a submission for Frontend Challenge - June Celebrations, CSS Art: June Celebrations.

🎉 Juneteenth Tribute Page – Celebrating Freedom, Resilience & Heroes

🔗 Live Demo

👉 Click here to view the tribute page

🌈 Inspiration

Juneteenth commemorates the end of slavery in the United States and celebrates African American freedom, achievement, and community. I wanted to create a tribute that not only honors this history but also highlights key figures who led the journey toward justice.

🎨 Features

Glass Morphic Navigation Bar with smooth scroll
Hero Section with a bold Juneteenth message
About Juneteenth section for education
Hero Cards for Frederick Douglass, Harriet Tubman, MLK Jr., and Opal Lee
Embedded Video about the holiday
Responsive Design for all devices
Mailing List Signup Form with a clean and centered look

🚀 Journey

This project helped me practice responsive layouts, CSS flexbox, and modern UI techniques like glass morphism. I also worked on form styling and learned how to ensure smooth user navigation throughout the page. The history I researched during this build made the coding process more meaningful.

💼 Built With

HTML5
CSS3
Flexbox & Media Queries
Deployed with GitHub Pages

Thanks to DEV for this creative and important challenge!

Happy Juneteenth! ✊🏾✨

Mimicked Terminal

Melody Kelly. N — Wed, 28 May 2025 10:13:27 +0000

Ever wanted to create a terminal-like UI in Python? I decided to experiment with this idea, crafting a mimicked terminal that simulates command input, output display, and dynamic behavior. This was both a fun UI project and an exercise in Python logic structuring Using Flask. Hopefully add some readjustment later on. (https://terminal-line.onrender.com/)
.

Hello From Newbies!

Melody Kelly. N — Tue, 15 Apr 2025 08:05:53 +0000

Hey fellow Python devs! I'm building a RESTful API and I'm wondering what are some best practices for handling errors and exceptions. What are some common pitfalls to avoid? Any advice or recommendations would be greatly appreciated!