This is a submission for Frontend Challenge - Halloween Edition, Perfect Landing
Hey everyone!
I’m excited to share my project - GhoulEats, a spooky and interactive restaurant website built with React, Vite, Tailwind, React router and Framer Motion.
This project is special to me because it pushed me to explore motion design, creative theming, and UI storytelling all in a short span of a few days. I started around November 6th, and from then till November 9th, I poured everything I had into bringing this haunted concept to life.
What is GhoulEats?
GhoulEats is a Halloween-themed restaurant website that blends creativity, design, and interactivity. It’s not just about pages it’s an entire spooky dining experience built for the web.
Each page has its own eerie charm from creepy AI-generated chefs to animated menus and ghostly motions that breathe life into every section.
Think of it as a restaurant run by ghosts and ghouls... but with great food and an even better design.
Demo
Best viewed on desktop - the eerie motions, animations, and effects truly come alive on larger screens.
Pages & Features
Here’s a look at what GhoulEats offers:
Home Page
- Hero section with glowing visuals and subtle motion
- About preview and character highlights
About Page
- A story-driven explanation of what GhoulEats is and how it was created
Menu Page
- 20+ spooky dishes with category filters
- Animated food cards and motion transitions
Join Us Page
- A form where new ghouls (aka chefs and staff) can join the restaurant
Events Page
- Fun upcoming Halloween events displayed in spooky-styled cards
Each element — from buttons to cards — uses Framer Motion for animation and Tailwind CSS for styling.
Tech Stack
- React.js — for the structure
- Vite — for fast builds
- Framer Motion — for smooth, natural animation
- Tailwind CSS — for utility-first styling
- AI Assets — for generating spooky crew characters
What I Learned
This project made me learn a lot. From balancing design with motion to structuring reusable components — every part was a challenge and a joy.
Some key learnings:
- Creating immersive motion effects using Framer Motion
- Building category filters dynamically in React
- Using gradient blending for eerie backgrounds
- Maintaining component reusability with styled layouts
Closing Thoughts
This project reminded me why I love frontend — the ability to create experiences, not just interfaces. GhoulEats is more than a Halloween site — it’s a playful mix of motion, creativity, and effort packed into a few days.
If you enjoyed it, drop a like or leave your thoughts below. I'd love to hear what you think! 🎃
Made with code, creativity, and spooky vibes by Dipanshu Sahu
Top comments (0)