Building a Collaborative Movie Discovery App: A 2-Day Team Challenge 🎬

Project Overview

Welcome to your collaborative development challenge! Over the next 2 days (8 hours total), your team of 5 will build a stunning movie discovery application using React.js, GitHub for collaboration, and The Movie Database (TMDb) API.

Timeline: 2 days × 4 hours each = 8 hours total

🎯 Project Goals

• Build a beautiful, responsive movie discovery interface
• Master Git/GitHub collaborative workflows
• Integrate with The Movie Database (TMDb) API
• Practice effective team communication and task distribution

🛠 Tech Stack

• Frontend: React.js with hooks
• API: The Movie Database (TMDb) API
• Styling: CSS3/Styled Components (your choice)
• Version Control: Git & GitHub
• Collaboration: GitHub Projects/Issues

👥 Team Roles & Responsibilities

Person 1: Team Lead & Repository Manager

• Set up initial repository structure
• Configure GitHub repository settings
• Manage pull requests and code reviews
• Coordinate team communications
• Handle merge conflicts

Person 2: UI/UX Designer & Layout Developer

• Design the overall application layout
• Create reusable UI components
• Implement responsive design
• Handle styling and visual aesthetics
• Create loading states and error handling UI

Person 3: API Integration Specialist

• Set up TMDb API integration
• Create API service functions
• Handle API error states
• Implement data fetching logic
• Manage API rate limiting

Person 4: Feature Developer (Search & Filters)

• Implement movie search functionality
• Create filter components (genre, year, rating)
• Handle search state management
• Implement pagination
• Create advanced search features

Person 5: Feature Developer (Details & Favorites)

• Create movie detail pages
• Implement favorites/watchlist functionality
• Handle local storage for user preferences
• Create movie recommendation logic
• Implement movie rating display

🚀 Day 1: Setup & Foundation (4 hours)

Hour 1: Project Setup & Repository Creation

Team Lead (Person 1):

# Create new React app
npx create-react-app movie-discovery-app
cd movie-discovery-app

# Initialize git repository
git init
git add .
git commit -m "Initial commit: Create React app"

# Create GitHub repository and push
# Add all team members as collaborators

Repository Setup Checklist:

• [ ] Create repository on GitHub
• [ ] Add all team members as collaborators
• [ ] Set up branch protection rules for main
• [ ] Create initial project structure
• [ ] Add README.md with project description

Hour 2: API Setup & Environment Configuration

API Integration Specialist (Person 3):

1. Get TMDb API Key:

   • Visit The Movie Database
   • Create free account
   • Request API key
   • Share setup instructions with team (NOT the actual key)

2. Environment Setup:
   

   # Create .env file in root directory
   REACT_APP_TMDB_API_KEY=your_api_key_here
   REACT_APP_TMDB_BASE_URL=https://api.themoviedb.org/3
   REACT_APP_TMDB_IMAGE_BASE_URL=https://image.tmdb.org/t/p/w500

1. Create API service structure:

   src/
   ├── services/
   │   ├── api.js
   │   └── movieService.js
   ├── utils/
   │   └── constants.js

Hour 3: Git Workflow & Branch Strategy

Everyone learns and practices:

Branching Strategy:

main (protected)
├── develop
├── feature/search-functionality
├── feature/movie-details
├── feature/ui-components
├── feature/api-integration
└── feature/favorites

Git Workflow Steps:

# 1. Clone repository
git clone [repository-url]
cd movie-discovery-app

# 2. Create and switch to your feature branch
git checkout -b feature/your-feature-name

# 3. Make changes and commit
git add .
git commit -m "Add: specific feature description"

# 4. Push your branch
git push origin feature/your-feature-name

# 5. Create Pull Request on GitHub
# 6. Wait for code review
# 7. Merge after approval

Hour 4: Component Structure & Initial Development

UI/UX Designer (Person 2):
Create basic component structure:

src/
├── components/
│   ├── common/
│   │   ├── Header.js
│   │   ├── Footer.js
│   │   ├── Loading.js
│   │   └── ErrorMessage.js
│   ├── movies/
│   │   ├── MovieCard.js
│   │   ├── MovieList.js
│   │   ├── MovieDetails.js
│   │   └── SearchBar.js
│   └── filters/
│       ├── GenreFilter.js
│       └── SortOptions.js

All Team Members:

• Set up their assigned feature branches
• Create initial component files
• Commit and push initial structure

🎯 Day 2: Development & Integration (4 hours)

Hour 5: Core Feature Development

Search & Filters Developer (Person 4):

• Implement search bar functionality
• Create genre filter components
• Add sorting options (popularity, rating, release date)
• Handle search state management

Details & Favorites Developer (Person 5):

• Create movie detail modal/page
• Implement local storage for favorites
• Add rating display components
• Create watchlist functionality

Hour 6: API Integration & Data Flow

API Integration Specialist (Person 3):

• Complete API service functions
• Test all endpoints
• Implement error handling
• Add loading states

Key API Endpoints to Implement:

// Popular movies
GET /movie/popular

// Search movies
GET /search/movie?query={search_term}

// Movie details
GET /movie/{movie_id}

// Movie genres
GET /genre/movie/list

// Similar movies
GET /movie/{movie_id}/similar

Hour 7: UI Polish & Responsive Design

UI/UX Designer (Person 2):

• Implement responsive grid layouts
• Add smooth animations and transitions
• Create attractive movie cards
• Implement mobile-first design
• Add loading skeletons

All Team Members:

• Test their features on different screen sizes
• Fix any responsive design issues

Hour 8: Integration, Testing & Deployment

Team Lead (Person 1):

• Coordinate final integration
• Review all pull requests
• Handle merge conflicts
• Prepare for deployment

Everyone:

• Final testing of all features
• Bug fixes and polish
• Create pull requests for final features
• Code review session

🔧 GitHub Collaboration Best Practices

1. Pull Request Process

1. Create feature branch from `develop`
2. Develop your feature
3. Write descriptive commit messages
4. Push branch to GitHub
5. Create Pull Request with detailed description
6. Request review from at least 2 team members
7. Address review feedback
8. Merge after approval

2. Commit Message Convention

feat: add movie search functionality
fix: resolve API timeout issue
style: improve movie card responsive design
refactor: optimize API service structure
docs: update README with setup instructions

3. Issue Management

• Create GitHub issues for each major feature
• Assign issues to team members
• Use labels: bug, enhancement, documentation
• Reference issues in commits: closes #123

4. Code Review Guidelines

What to Look For:

• Code functionality and logic
• Consistent code style
• Proper error handling
• Component reusability
• Performance considerations

5. Conflict Resolution

# When you encounter merge conflicts:
git checkout develop
git pull origin develop
git checkout your-feature-branch
git merge develop
# Resolve conflicts in your editor
git add .
git commit -m "Resolve merge conflicts"
git push origin your-feature-branch

📱 Required Features

Core Features (Must Have):

• [ ] Movie search with real-time results
• [ ] Popular movies grid display
• [ ] Movie details modal/page
• [ ] Responsive design (mobile + desktop)
• [ ] Loading states and error handling

Enhanced Features (Nice to Have):

• [ ] Genre filtering
• [ ] Favorites/Watchlist functionality
• [ ] Movie ratings display
• [ ] Infinite scroll or pagination
• [ ] Similar movie recommendations

🎨 Design Inspiration

UI/UX Guidelines:

• Clean, modern interface
• Card-based layout for movies
• Prominent search functionality
• High-quality movie posters
• Intuitive navigation
• Consistent color scheme
• Smooth animations

🚨 Common Pitfalls to Avoid

Git/GitHub Issues:

• Don't work directly on main branch
• Always pull latest changes before starting work
• Write descriptive commit messages
• Don't commit API keys or sensitive data
• Resolve conflicts properly

Development Issues:

• Handle API errors gracefully
• Implement proper loading states
• Test on different screen sizes
• Don't hardcode API keys in components
• Follow consistent naming conventions

📊 Success Metrics

Technical:

• [ ] All team members successfully contribute code
• [ ] Clean commit history with meaningful messages
• [ ] No merge conflicts in final version
• [ ] Working API integration
• [ ] Responsive design works on mobile and desktop

Collaboration:

• [ ] All pull requests properly reviewed
• [ ] Issues created and tracked
• [ ] Regular team communication
• [ ] Fair distribution of work
• [ ] Knowledge sharing between team members

🎉 Bonus Challenges

If you finish early, try these advanced features:

• [ ] Add movie trailers using YouTube API
• [ ] Implement user authentication
• [ ] Add movie reviews and ratings
• [ ] Create custom movie lists
• [ ] Add social sharing functionality

📚 Resources

API Documentation:

• TMDb API Documentation
• TMDb API Getting Started

Git/GitHub:

• GitHub Flow Guide
• Git Cheat Sheet

React:

• React Hooks Documentation
• React Best Practices

🏆 Final Deliverables

By the end of Day 2, your team should have:

• [ ] Fully functional movie discovery app
• [ ] Clean, well-organized codebase
• [ ] Comprehensive README with setup instructions
• [ ] Live demo (GitHub Pages or Netlify)
• [ ] Post-project retrospective discussion

🤝 Team Communication

Daily Standups (15 minutes each day):

• What did you accomplish yesterday?
• What will you work on today?
• Any blockers or challenges?

Communication Channels:

• GitHub Issues for technical discussions
• Pull Request comments for code reviews
• Team chat for quick questions
• Video calls for complex problem-solving

Remember: This is a learning experience. Focus on collaboration, communication, and building something great together!

Good luck, and may the best movie app win! 🎬✨