Skip to content

SETUP.md

Latest commit

 

History

History
263 lines (177 loc) · 6.57 KB

SETUP.md

File metadata and controls

263 lines (177 loc) · 6.57 KB

🚀 Netflix Clone - Complete Setup Guide

This comprehensive guide will walk you through the entire setup process, from installation to deployment.

📋 Table of Contents

📦 Prerequisites

Before you begin, ensure you have the following installed on your system:

Required Software

Software Minimum Version Download Link Purpose
Node.js (Optional) v14.0.0+ nodejs.org JavaScript runtime (for dev tools)
Git v2.0+ git-scm.com Version control
Code Editor Any VS Code (recommended) Development
Modern Browser Latest Chrome, Firefox, Safari, or Edge Testing

Optional Tools

TMDB API Account

You'll need a free TMDB API key to fetch movie data.

  1. Create an account at themoviedb.org
  2. Verify your email address
  3. Navigate to Settings → API
  4. Request an API key (choose "Developer" option)
  5. Fill out the application form (you can use placeholder URLs for a personal project)
  6. Copy your API key once approved (usually instant)

📥 Installation

Step 1: Clone the Repository

# Using HTTPS
git clone https://github.com/mujeebdev3/NetflixClone.git

# Navigate into the project directory
cd netflix-clone

Step 2: Verify Project Structure

After cloning, your directory should look like this:

netflix-clone/
├── index.html
├── css/
├── js/
├── pages/
├── assets/
├── docs/
└── README.md

Step 3: Install Development Dependencies (Optional)

If you want to use advanced development tools:

# Initialize npm (optional)
npm init -y

# Install development dependencies (optional)
npm install --save-dev http-server

Note: This project uses vanilla JavaScript with no build process, so npm is optional. You can skip this step if you're using Live Server or Python's HTTP server.

🏃 Running the Application

Method 1: VS Code Live Server (Recommended)

  1. Install Live Server Extension

    • Open VS Code
    • Go to Extensions (Ctrl+Shift+X / Cmd+Shift+X)
    • Search for "Live Server"
    • Install by Ritwick Dey

  2. Start the Server

    • Right-click on index.html
    • Select "Open with Live Server"
    • Your browser will automatically open at http://localhost:5500

  3. Auto-Reload

    • Any changes you make will automatically reload the page

Method 2: Python HTTP Server

Python 3:

python -m http.server 8000

Python 2:

python -m SimpleHTTPServer 8000

Then open http://localhost:8000 in your browser.

Method 3: Node.js HTTP Server

# Install http-server globally (one-time)
npm install -g http-server

# Run the server
http-server -p 8000

# Or use npx (no installation needed)
npx http-server -p 8000

Then open http://localhost:8000 in your browser.

Method 4: PHP Built-in Server

php -S localhost:8000

Then open http://localhost:8000 in your browser.

Issue: Images Not Loading

Symptoms:

  • Broken image icons
  • Alt text showing instead of images

Solutions:

  1. Check your internet connection
  2. Verify API key is working
  3. Check browser console for specific errors
  4. Clear browser cache (Ctrl+Shift+R / Cmd+Shift+R)

Issue: Live Server Not Working

Symptoms:

  • Right-click menu doesn't show "Open with Live Server"
  • Server won't start

Solutions:

  1. Ensure Live Server extension is installed and enabled
  2. Restart VS Code
  3. Check if another process is using port 5500
  4. Try a different port in Live Server settings

👥 Team Development Setup

Git Workflow

# Create a new feature branch
git checkout -b feature/movie-search

# Make changes and commit
git add .
git commit -m "feat: add movie search functionality"

# Push to remote
git push origin feature/movie-search

# Create pull request on GitHub

Commit Message Convention

Follow Conventional Commits:

feat: add new feature
fix: bug fix
docs: documentation changes
style: formatting, missing semicolons, etc.
refactor: code restructuring
test: adding tests
chore: maintenance tasks

Branch Naming Convention

feature/feature-name     # New features
bugfix/issue-description # Bug fixes
hotfix/critical-bug      # Urgent fixes
docs/documentation-update # Documentation

Code Review Checklist

Before submitting a PR, ensure:

  • Code follows BEM naming convention (CSS)
  • ES6+ syntax used consistently
  • No console.log statements in production code
  • Comments added for complex logic
  • Tested in Chrome, Firefox, and Safari
  • Responsive design verified on mobile
  • Accessibility tested with keyboard navigation
  • No ESLint errors or warnings
  • Documentation updated (if needed)

📚 Additional Resources

Official Documentation

Learning Resources

🆘 Need Help?

Happy Coding! 🚀