🔍 What’s Mystic Cookie?
It’s a fun, inspirational app that delivers a random piece of advice every time you click the dice icon 🎲.
A simple project, but a perfect way to practice API integration, state management, and responsive design.
The Challenge (Frontend Mentor)
The requirements were clear:
• Responsive layout across all devices 📱💻
• Hover states for interactive elements
• Fetch new advice with a single click
It tested both design translation and API handling skills.
Planning the Project
Every great project starts with a solid plan. I analyzed the given UI design and broke it down into:
• A card container for advice text
• A divider for visual balance
• A glowing dice button for interaction
⚙️ Tech Stack I Used
• React - for building the interactive UI
• TailwindCSS - for quick, responsive styling
• Advice Slip API - for fetching random advice
• Netlify - for hosting and deployment
Simple, clean, and modern.
💡 Core Functionality
Using React’s useEffect and fetch, I pulled random advice from the API.
To prevent caching (same advice showing repeatedly), I added a timestamp parameter like this:
api.adviceslip.com/advice?ti…${Date.now()}
Fresh advice every click!
🎨 Styling with TailwindCSS
Tailwind made it easy to:
• Center elements with flex utilities
• Add smooth hover transitions
• Ensure responsiveness with minimal CSS
Result: a modern, minimal interface that looked great on all devices.
🚀 Deployment
After testing and refining, I hosted Mystic Cookie on Netlify - a quick, seamless process:
1️⃣ Push to GitHub
2️⃣ Import repo to Netlify
3️⃣ Click deploy - and it's live! 🌐
🧠 Lessons Learned
• API integration is simpler with async/await
• Tailwind simplifies responsive design
• Breaking UI into reusable components keeps code clean
• Frontend Mentor challenges build real confidence
💭 Final Thoughts
Mystic Cookie wasn’t just about fetching random advice - it was about improving my React workflow, design translation, and problem-solving mindset.
✨ Read the full article 👉
code.likeagirl.io/how-i-buil…
