| name | project-learning |
| description | Build portfolio with 70+ hands-on projects aligned with learning paths. Use for project recommendations, implementation guidance, portfolio building, and code reviews. |
Project Learning Skill
Master hands-on project-based learning using 70+ real-world projects to build a strong portfolio while reinforcing skills through practical application.
Quick Start
/project suggest <skill> # Find projects for your skill
/project guide <project_name> # Get implementation help
/project review <repo_url> # Get code review feedback
/project portfolio # Build portfolio strategy
Core Concepts
Project Categories (70 total)
Frontend Projects (24)
Beginner (11):
├─ Single-Page CV
├─ Basic HTML Website
├─ Personal Portfolio
├─ Changelog Component
├─ Testimonial Cards
├─ Datepicker UI
├─ Accessible Form UI
├─ Image Grid Layout
├─ Tooltip UI
├─ Tabs Component
└─ Cookie Consent Banner
Intermediate (12):
├─ Custom Dropdown Menu
├─ Task Tracker (UI)
├─ GitHub Random Repository
├─ Reddit Client
├─ Temperature Converter
├─ Pomodoro Timer
├─ Quiz App
├─ Weather Web App
├─ Flash Cards
├─ Image Carousel
├─ Movie Search
└─ E-Commerce Page
Advanced (1):
└─ Instagram Stories Clone
Backend Projects (23)
Beginner (12):
├─ Task Tracker CLI
├─ GitHub User Activity
├─ Expense Tracker
├─ Number Guessing Game
├─ TMDB CLI Tool
├─ Unit Converter
├─ Personal Blog API
├─ Weather API
├─ Blogging Platform API
├─ Todo List API
├─ Expense Tracker API
└─ Note App API
Intermediate (7):
├─ Caching Proxy
├─ Broadcast Server
├─ Markdown Note App
├─ URL Shortening Service
├─ E-Commerce API
├─ Workout Tracker API
└─ Image Processing Service
Advanced (4):
├─ Movie Reservation System
├─ Real-time Leaderboard
├─ Database Backup Utility
└─ Scalable E-Commerce Platform
DevOps Projects (23)
Beginner (10), Intermediate (9), Advanced (4)
Project Value Tiers
Tier 1: Learning Projects (Portfolio Value: 1-2 stars)
Examples:
- Single-Page CV
- Basic HTML Website
- Task Tracker CLI
Purpose: Learn fundamentals
Duration: 4-8 hours
Portfolio Value: Low (too common)
Audience: Beginners
Use: Learning, not portfolio
Tier 2: Solid Projects (Portfolio Value: 3-4 stars)
Examples:
- Personal Portfolio Website
- Weather Web App
- Todo API with Testing
Purpose: Demonstrate competency
Duration: 12-20 hours
Portfolio Value: Medium-High
Audience: Mid-level expectations
Use: Portfolio centerpiece
Tier 3: Portfolio Showcase (Portfolio Value: 4-5 stars)
Examples:
- E-Commerce Full Stack
- Real-time Dashboard
- Microservices System
Purpose: Prove expertise
Duration: 24-40+ hours
Portfolio Value: High
Audience: Senior-level interviews
Use: Key portfolio pieces
Project Selection Framework
Skill-Based Selection
JavaScript Fundamentals Need Practice?
→ Choose: Task Tracker CLI, Number Guessing Game
→ Duration: 4-8 hours each
→ Projects: 3-4 to master
JavaScript Advanced?
→ Choose: Weather Web App, GitHub User Activity
→ Duration: 10-16 hours each
→ Projects: 2-3 to solidify
React Learning?
→ Choose: Todo App (React), Movie Search App
→ Duration: 16-24 hours each
→ Projects: 2-3 projects
Career-Path Selection
Frontend Developer Path:
Phase 1: HTML/CSS/JavaScript
├─ Portfolio Website (tier 2)
├─ Image Grid Layout (tier 1)
└─ Tabs/Dropdown Components (tier 1)
Phase 2: API Integration
├─ Weather Web App (tier 2)
├─ GitHub Repository Finder (tier 2)
└─ Reddit Client (tier 2)
Phase 3: React Framework
├─ Todo App (React) (tier 2)
├─ Movie Search App (tier 3)
└─ E-Commerce Demo (tier 3)
Total Projects: 8
Portfolio-Ready: 5 best ones
Time: 4-6 months
Backend Developer Path:
Phase 1: Language Fundamentals
├─ Task Tracker CLI (tier 1)
├─ Number Guessing Game (tier 1)
└─ Unit Converter (tier 1)
Phase 2: APIs & Databases
├─ Personal Blog API (tier 2)
├─ Blogging Platform API (tier 2)
├─ Expense Tracker API (tier 2)
└─ Todo List API (tier 2)
Phase 3: Advanced Concepts
├─ E-Commerce API (tier 3)
├─ Real-time Leaderboard (tier 3)
└─ Scalable Platform (tier 3)
Total Projects: 10
Portfolio-Ready: 5 best ones
Time: 6-9 months
Project Implementation Guide
Phase 1: Planning (1-2 hours)
STEP 1: UNDERSTAND REQUIREMENTS
□ Read project description
□ List all features required
□ Identify data structures
□ Sketch UI/UX (if frontend)
□ Define API endpoints (if backend)
STEP 2: BREAK INTO TASKS
□ Create task list (10-20 items)
□ Estimate hours per task
□ Identify blockers
□ Plan implementation order
□ Set realistic timeline
STEP 3: SETUP
□ Create project scaffold
□ Setup version control
□ Configure build tools
□ Write README skeleton
□ Commit initial setup
Phase 2: Development (Main Project Time)
ITERATION CYCLE (repeating):
1. IMPLEMENT FEATURE
□ Write code for one task
□ Test manually
□ Commit work
□ Review code quality
2. REFACTOR
□ Improve code clarity
□ Extract reusable components
□ Apply patterns
□ Optimize performance
3. TEST
□ Test happy path
□ Test edge cases
□ Test error handling
□ Add test coverage
4. DOCUMENT
□ Add code comments
□ Update README
□ Document API (if backend)
□ Commit documentation
REPEAT until all features done
Phase 3: Polish (2-4 hours)
□ Code cleanup & refactoring
□ Comprehensive testing
□ Performance optimization
□ Accessibility audit (if frontend)
□ Security review
□ Documentation completion
□ Professional README
□ Demo setup
□ Git history cleanup
Phase 4: Deployment (1-2 hours)
FRONTEND:
□ Optimize build
□ Deploy to Vercel/Netlify
□ Setup custom domain (optional)
□ Test live deployment
□ Share link publicly
BACKEND:
□ Setup hosting (Railway, Render, Heroku)
□ Configure environment variables
□ Deploy and test
□ Setup monitoring
□ Document API endpoints
BOTH:
□ Create demo video (2-3 min)
□ Write blog post about learnings
□ Share on social media
□ Add to portfolio website
Phase 5: Post-Project (Ongoing)
□ Get code reviews
□ Gather feedback
□ Make improvements
□ Learn from what could be better
□ Reference in interviews
□ Help others with same project
Portfolio Building Strategy
The "5-Project Portfolio"
BUILD THESE 5 PROJECTS:
PROJECT 1: Beautiful Frontend (Portfolio Website)
├─ Showcase: HTML, CSS, responsive design
├─ Impact: First impression, personal brand
├─ Time: 12-16 hours
├─ Visitors: 100s-1000s monthly
├─ Demo: Live link on resume
└─ Skills Shown: Design, UX, polish
PROJECT 2: API Integration (Weather/GitHub App)
├─ Showcase: REST API usage, async code
├─ Impact: Practical API knowledge
├─ Time: 16-20 hours
├─ Complexity: Medium-High
├─ Demo: Live working app
└─ Skills Shown: API design, error handling
PROJECT 3: Full-Featured Application (E-Commerce/Task Manager)
├─ Showcase: Complete application, state mgmt
├─ Impact: Professional capability
├─ Time: 24-32 hours
├─ Complexity: High
├─ Features: 10+ features
└─ Skills Shown: Architecture, testing, quality
PROJECT 4: Backend/API (Todo/Notes API)
├─ Showcase: Server-side dev, databases
├─ Impact: Full-stack understanding
├─ Time: 20-28 hours
├─ Complexity: High
├─ Features: Full CRUD, authentication
└─ Skills Shown: API design, database, security
PROJECT 5: Unique/Challenging Project
├─ Showcase: Creativity, specialization
├─ Impact: Differentiation
├─ Time: 32-40 hours
├─ Complexity: Very High
├─ Features: Cutting-edge tech or domain
└─ Skills Shown: Problem-solving, innovation
TOTAL INVESTMENT: 120-160 hours (~4-6 months)
CAREER IMPACT: ⭐⭐⭐⭐⭐ Very High
JOB READINESS: Significantly increased
Portfolio Presentation
For Each Project:
1. LIVE DEMO
□ Always have working version
□ Responsive, polished UX
□ 2-3 minute walkthrough video
2. GITHUB REPOSITORY
□ Clean commit history
□ Professional README
□ Well-commented code
□ MIT or permissive license
3. PROJECT BLOG POST
□ Problem statement
□ Technical decisions
□ Challenges and solutions
□ Performance metrics
□ Screenshots
□ What I learned
4. PORTFOLIO WEBSITE
□ All projects featured
□ Live links and previews
□ Brief descriptions
□ Technologies used
5. INTERVIEW TALKING POINTS
□ Why you built it
□ Technical challenges
□ Design decisions
□ What you'd improve
□ What you learned
Project Review Rubric
CODE QUALITY (30%):
✅ Architecture & Design
- Clear separation of concerns
- DRY principles applied
- Proper abstraction levels
✅ Code Style
- Consistent formatting
- Descriptive naming
- Necessary comments
✅ Error Handling
- Graceful failures
- User-friendly messages
- Proper logging
FUNCTIONALITY (30%):
✅ Requirements Met
- All features implemented
- Edge cases handled
- Correct behavior
✅ Testing
- Unit tests (if applicable)
- Integration tests
- Edge case testing
PERFORMANCE (15%):
✅ Speed
- Fast load/response times
- Smooth interactions
✅ Optimization
- Efficient code
- Optimized assets
DESIGN & UX (15%):
✅ Visual Design
- Professional appearance
- Consistent styling
✅ User Experience
- Intuitive navigation
- Accessibility (WCAG 2.1)
- Mobile responsiveness
DOCUMENTATION (10%):
✅ README
- Setup instructions
- Feature overview
- Tech choices explained
Score: Sum of above = Overall rating
- 90-100: Excellent (portfolio-ready)
- 80-89: Good (with improvements)
- 70-79: Fair (needs work)
- <70: Needs significant improvements
Next Steps
- Choose 1-2 projects for your current skill level
- Plan project scope
- Implement with guidance
- Review and refine
- Deploy and share
- Build toward 5-project portfolio
