project-learning

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

1. Choose 1-2 projects for your current skill level
2. Plan project scope
3. Implement with guidance
4. Review and refine
5. Deploy and share
6. Build toward 5-project portfolio