DEV Community: Maisam Abbas

Beyond The Plate — Every Dish Has a Story | DEV Frontend Challenge

Maisam Abbas — Wed, 12 Aug 2026 11:57:25 +0000

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

What I Built

For this challenge I wanted to build something a little different than a traditional recipe or food website.

Beyond The Plate is an editorial-style web experience that explores the stories behind comfort food from around the world. Instead of only showing recipes, it tells where a dish comes from, why people love it, how it became part of a culture, and what makes it special.

The project currently features 300+ authentic dishes from countries across every continent. Each dish includes real historical background, cultural traditions, ingredients, nutrition, cooking instructions, and related dishes to encourage people to keep exploring.

I spent a lot of time making the interface feel calm and immersive. The goal was to make visitors feel like they were walking through a digital museum instead of scrolling another food website.

Some highlights:

300+ authentic dishes from around the world
Real recipes with ingredients and cooking steps
Cultural stories and historical background
Nutrition dashboard with macro breakdowns
Editorial gallery with authentic food photography
Fully responsive from mobile to large desktop
Premium animations using Framer Motion and GSAP
Built with React, TypeScript and Vite
Accessibility focused
Custom design system inspired by museums and editorial magazines

I tried to keep everything feeling premium while still being easy to read and explore.

Demo

Live Demo

beyond-the-plate-seven.vercel.app

GitHub Repository

https://github.com/maisamabbas0323/beyond-the-plate.git

Screenshots

Home

Discover

### Culture

Nutrition

Recipes

Gallery

About

Journey

This project started much smaller.

At first I only wanted to build a nice landing page for the challenge, but after working on it for a while I kept asking myself, "What if every comfort food could tell its own story?"

That idea slowly turned into a much bigger project.

I spent most of my time researching real dishes instead of making things up. I wanted every recipe, every country, and every cultural reference to be authentic. That part actually took longer than building the UI.

The design also changed many times. I rebuilt the hero section more than once because it never felt quite right. I experimented with different layouts, typography, animations, and colors until everything started feeling like a digital food exhibition instead of a normal website.

One of my favorite parts was adding the little interactions throughout the site. Small hover effects, smooth scrolling, floating cards, subtle animations, and transitions make the experience feel much more alive without becoming distracting.

There were definitely a few frustrating moments too. Getting everything responsive across different screen sizes took a lot more work than I expected, and I probably changed the spacing and typography dozens of times before I was happy with it. But looking back, I'm glad I kept improving those details because they made a big difference.

If I continue working on Beyond The Plate after this challenge, I'd love to add:

interactive world maps
multilingual support
offline PWA support
more authentic dishes and regional cuisines
bookmarking and personal collections
seasonal food collections
audio stories for every dish

Overall, this was a really fun challenge. It pushed me to think beyond just building another landing page and instead create something that people might actually enjoy exploring.

Thanks to the DEV community for organizing another great Frontend Challenge. ❤️

The Last Spark

Maisam Abbas — Sun, 12 Jul 2026 15:38:13 +0000

The Last Spark - Learn your passion with google ais

This is a submission for Weekend Challenge: Passion Edition

What I Built

I built The Last Spark, an AI-powered passion learning web app where users can pick a passion like Cybersecurity, Football, Cooking, Programming, Music, or even create there own custom passion. After selecting a difficulty, Google Gemini generates a complete learning journey with chapters, study notes, timed quizzes, and a final AI report based on the selected passion. My goal was to make learning feel more like playing a game instead of reading long boring articles.

Demo

Live Demo: https://the-last-spark.vercel.app/

Code

GitHub Repository: https://github.com/maisamabbas0323/the-last-spark

How I Built It

The project is built with React, TypeScript, Vite, Tailwind CSS, Framer Motion, and Google Gemini 3.1 Flash Lite. Gemini creates the study content, chapters, questions, explanations, and final reports in real time based on what the user chooses. I spent most of my time making the UI smooth, responsive, and trying to give it a premium gaming feel with animated cards, timers, progress tracking, and reports. There was lot of debugging and redesign during development, but it was really fun to build.

Prize Categories

✅ Best Use of Google AI

Thanks for checking out my project. Hope you enjoy it as much as I enjoyed building it 😊

An AI-Powered Chess Experience with Google Gemini

Maisam Abbas — Sun, 21 Jun 2026 06:18:18 +0000

Turning a Classic Game into an AI-Powered Experience with Gemini

When I started working on my June Solstice Game Jam project, I knew I didn't want to build just another game.

I wanted to create something that combined strategy, learning, and artificial intelligence in a way that felt natural and useful.

Chess immediately came to mind.

For centuries, chess has been a symbol of intelligence, planning, and decision-making. At the same time, AI has become one of the most exciting technologies of our generation. Combining the two felt like the perfect challenge.

The result was Solstice Chess, a modern AI-powered chess experience built with Google Gemini.

What I Built

Solstice Chess is a web-based chess platform that combines traditional chess gameplay with AI-powered analysis and assistance.

Players can jump into a game, choose a difficulty level, and receive intelligent insights powered by Gemini.

The goal wasn't simply to build a chess board.

The goal was to create an experience where players could improve, learn, and understand the reasoning behind moves rather than simply playing against a computer.

Core Features

Interactive chess gameplay
Multiple AI difficulty levels
Gemini-powered move analysis
Position evaluation
Strategic recommendations
Modern responsive interface
Fast browser-based experience

Project Screenshots

Landing Page

The landing page introduces players to the project through a clean, premium interface inspired by modern AI products.

Gameplay Interface

The gameplay screen focuses on clarity and usability while keeping the chessboard at the center of attention.

Gemini Integration

Players can connect Gemini and unlock AI-powered analysis and chess insights.

Why I Built This

One thing I've always found interesting about chess is that beginners often struggle to understand why a move is good or bad.

Many chess engines provide evaluations, but they don't always explain their reasoning in a way that's easy to understand.

That's where Gemini became exciting.

Instead of only showing moves, Gemini can help explain strategic ideas, identify weaknesses, and provide insights that feel more like guidance than raw calculations.

I wanted the AI to feel less like an opponent and more like a coach.

The Technical Approach

The project was built as a modern web application with a strong focus on user experience.

Frontend

The interface was designed around a premium dark theme with clean typography and a distraction-free layout.

My goal was to create something that felt modern and professional while remaining easy to use.

Chess Logic

The chess system handles:

Legal move validation
Piece movement
Turn management
Difficulty settings
Board state updates

Maintaining correct game state was one of the most important parts of development.

Gemini AI

Gemini serves as the intelligence layer of the application.

It can be used to:

Analyze positions
Explain moves
Provide strategic feedback
Offer educational commentary

This transforms a standard chess game into a learning experience.

Challenges I Faced

Like most projects, things didn't go smoothly from day one.

One of the biggest challenges was balancing functionality with simplicity.

I wanted powerful AI features without overwhelming players with information.

Another challenge was designing an interface that felt modern while keeping the focus on the chessboard itself.

Several parts of the UI were redesigned multiple times before reaching the final version.

What I'm Most Proud Of

The feature I'm most proud of isn't a single button or screen.

It's the overall experience.

I love that a player can open the application, start a game, receive AI insights, and learn something new without needing to install anything or study complicated tools.

That combination of accessibility and intelligence is exactly what I hoped to achieve.

What I Learned

Building Solstice Chess taught me valuable lessons about:

AI integration
Product design
User experience
State management
Game development
Problem solving

It also reinforced something I've learned repeatedly as a developer:

The most challenging part of building software isn't always creating features.

It's creating an experience that feels simple.

What's Next?

This project is only the beginning.

Future ideas include:

Multiplayer mode
Game history and replays
Personalized AI coaching
Opening explorer
Advanced analytics
Cloud synchronization

There are many directions this project could grow, and I'm excited to continue exploring them.

Code

GitHub Repository:

https://github.com/abxdev12/solstice-shift

Live Demo:

solstice-shift.vercel.app

Prize Category

Best Google AI Usage

Google Gemini plays a central role in Solstice Chess by providing intelligent analysis, strategic feedback, and educational guidance that enhances the traditional chess experience.

Best Ode to Alan Turing

Chess and artificial intelligence share a long history together. Solstice Chess celebrates that connection by combining one of humanity's oldest strategy games with modern generative AI technology.

Thank you for reading and checking out Solstice Chess.

If you're interested in AI, game development, or chess, I'd love to hear your thoughts and feedback.