Frontend & Web Developer | Building responsive, Scalable Web Solutions #coder #womenIntech
Nigeria
Joined October 2017
- Tweets 105
- Following 26
- Followers 32
- Likes 74
Every road leads to greatness is always a gradual process, is not a quick rich.
You learn a skill.
You practice with mock projects.
You build your portfolio.
You take internships or do free jobs.
You cold pitch.
You land small gigs.
You collect testimonials.
You build your personal brand.
Then the big jobs start coming to you.
Freelancing isn’t a get-rich-quick scheme.
It’s a process.
Ogechi Uhegbu retweeted
Who’s ready for another banger tonight?🔥
I’ll be live with @richsongocrazy …the “Crazy Codes” himself and co-founder of @MansiorHQ.
We’ve got a lot to unpack, and founders will also get the chance to pitch their startups.
It’s going to be a good on.
x.com/i/spaces/1lPKqvlXloEGb
💭 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…
🧠 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
🚀 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! 🌐
🎨 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.
💡 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!
⚙️ 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.
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
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.
🔍 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.
Creating interactive and user-friendly web applications is one of the most exciting ways to learn web development. One of my favorite beginner projects is A Calculator App.
Read the full article here: medium.com/devmap/understand…
#WebDevelopment
Upcoming Space, Learning to Earning by @richsongocrazy
x.com/i/spaces/1MnGnPyYWYmxO
