🌟 Yes Ladder: Climb Your Way to Confidence

🧠 What Inspired Me

The inspiration for Yes Ladder came from a personal journey to overcome fear of rejection. After watching Jia Jiang's "100 Days of Rejection" TED Talk, I realized how powerful micro-challenges can be in building resilience. I wanted to create a gamified space where people could train themselves to embrace rejection and grow more confident every day—one “yes” at a time.

🛠️ How I Built It

• Frontend: Built with React, using react-router-dom for navigation between pages like Home, About, Challenges, Community, and Profile.
• Icons: Used lucide-react for visual storytelling.
• Animations & Styling: Tailwind CSS for sleek, responsive design; custom CSS (Challenges.css) for animated video backgrounds and dynamic UI.
• Video Background: Embedded background media in the Challenges page for immersive visuals.
• Gamification:
  • Users can choose from easy, medium, and extreme challenges, each awarding points.
  • Progress bar, achievements, and leveling system to track growth.
• Community Feed: Mimics a social media timeline with posts, likes, and shares to motivate and inspire users through shared success stories.

🧩 Challenges I Faced

• 🎨 UI Balance: Designing animations and background video without overwhelming the user experience required fine-tuning CSS z-index and overlay transparency.
• 📱 Responsive Design: Ensuring every element—especially challenge cards and progress stats—remained readable and visually appealing across all screen sizes.
• 🔄 State Management: Switching between challenge difficulties dynamically while keeping the UX smooth was tricky but rewarding.
• 🔐 Scalability Planning: I had to think ahead to make room for 30 challenges per level without clutter or performance issues.

🎓 What I Learned

• The power of micro-interactions in user engagement.
• How designing for emotion (like fear or courage) can turn an app into a personal coach.
• Improved skills in React component structuring, conditional rendering, and CSS layering.
• Learned how to create a narrative through design—not just functionality.

💬 Final Thoughts

Yes Ladder isn’t just an app—it’s a mindset trainer. It turns everyday moments into opportunities for growth and self-discovery. My biggest takeaway? Building confidence isn’t about big leaps; it's about stacking small wins.

-

Built With

• css
• html
• javascript
• typescript