🚀 roadmap.sh Frontend Projects

A comprehensive collection of frontend projects designed to take developers from beginner to advanced level. This platform showcases 25+ real-world projects with live demos, source code, and progressive difficulty levels.

✨ Features

• 📚 25+ Progressive Projects - From beginner to advanced difficulty levels
• 🎯 Interactive Filtering - Filter projects by difficulty (Beginner, Intermediate, Advanced)
• 🖼️ Live Previews - Hover to see project thumbnails with smooth animations
• 🔗 Direct Links - Access both source code and live demos instantly
• 📧 Idea Submission - Submit new project ideas via EmailJS integration
• 📱 Responsive Design - Works perfectly on all devices
• ⚡ Modern Stack - Built with Vite, TailwindCSS, and vanilla JavaScript
• 🎨 Beautiful UI - Clean, modern interface with smooth animations

🛠️ Tech Stack

• Frontend: Vanilla JavaScript (ES6+)
• Build Tool: Vite
• Styling: TailwindCSS
• Email Service: EmailJS
• Animations: Custom CSS animations
• Icons: Lucide Icons
• Deployment: Vercel

🚀 Quick Start

Prerequisites

• Node.js (v16 or higher)
• npm or yarn

Installation

1. Clone the repository

   git clone https://github.com/AnuXiii/roadmap-sh-projects.git
   cd roadmap-sh-projects

2. Install dependencies

   npm install

3. Set up environment variables Create a .env file in the root directory:

   VITE_APP_EMAILJS_PUBLIC_KEY=your_emailjs_public_key
   VITE_APP_EMAILJS_SERVICE_ID=your_emailjs_service_id
   VITE_APP_EMAILJS_TEMPLATE_ID=your_emailjs_template_id

4. Start development server

   npm run dev

5. Open your browser Navigate to http://localhost:5173

🎯 Project Categories

🌱 Beginner Projects (1-16)

Perfect for those starting their frontend journey:

• Single Page CV
• Basic HTML Website
• Changelog Component
• Testimonial Cards
• Date Picker UI
• Accessible Form UI
• Tabs Component
• Image Grid Layout
• Tooltip UI
• Cookie Consent
• Restricted Textarea
• Accordion
• Age Calculator
• Flash Cards
• Progress Steps
• Dark Mode Toggle

🔄 Intermediate Projects (17-24)

For developers with basic knowledge:

• Custom Dropdown
• Task Tracker
• GitHub Random Repository Finder
• Temperature Converter
• Subreddit Client
• Pomodoro Timer
• AI Quiz App
• Weather App

🚀 Advanced Projects (25+)

For experienced developers:

• 24hr Story Feature (Instagram Stories Clone)

💡 For Frontend Developers

🎓 Learning Path

1. Start with Beginner Projects

   • Focus on HTML structure and CSS styling
   • Learn basic JavaScript interactions
   • Understand responsive design principles

2. Progress to Intermediate

   • Work with APIs and external data
   • Implement complex state management
   • Build interactive applications

3. Tackle Advanced Projects

   • Create complex UI interactions
   • Implement advanced animations
   • Build full-featured applications

🤝 Contributing

1. Fork the repository
2. Create a feature branch: git checkout -b feature-name
3. Commit changes: git commit -m "Add feature"
4. Push to branch: git push origin feature-name
5. Submit a pull request

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Roadmap.sh for the project inspiration
• Vite for the build tool
• TailwindCSS for styling
• EmailJS for email functionality
• Lucide Icons for beautiful icons

📞 Support

• GitHub Issues: Report bugs or request features
• Email: For direct support, use the contact form on the website

---

Happy Coding! 🎉

Built with ❤️ for the frontend community