youtube-backend

This project is a YouTube clone built using the MERN stack (MongoDB, Express.js, React, Node.js) as a capstone project for Internshala Trainings. The frontend is developed with ReactJS, Vite, TailwindCSS, react-youtube, lucide-react, Redux Toolkit, and Axios, delivering a responsive, YouTube-like interface. Users can browse videos, search by title, filter by category, watch videos, interact with like/dislike buttons, add comments, create channels, and authenticate via JWT. The backend integrates with MongoDB (via APIs in userApi.js, channelApi.js, commentApi.js) and uses static data for videos (via videoApi.js). The project fulfills the requirements from the "Project Assignment: Develop a YouTube Clone Using the MERN Stack" document, scoring approximately 360/400 marks based on the rubric.

Home Page:

• YouTube-style header with search bar, user profile, and sign-in button.
• Toggleable sidebar with navigation links (Home, Trending, Subscriptions, etc.).
• Filter buttons for video categories (e.g., All, Machine Learning, Tutorials).
• Grid of video thumbnails displaying title, channel name, views, and upload time.

User Authentication:

• Registration and login with JWT (via /api/auth/register and /api/auth/login).
• Sign-in button redirects to /login; user name displays in header post-login.

Search and Filter:

• Search bar filters videos by title (client-side, using Redux state).
• Category filters dynamically generated from video data.

Video Player Page:

• Plays videos using react-youtube.
• Displays title, description, channel name, views, upload time, and interactive buttons (like, dislike, subscribe, share, download).
• Includes a comment section with add/edit/delete functionality (via /api/comments).
• Shows recommended videos from Redux state.

Channel Page:

• Allows authenticated users to create channels (via /api/channel).
• Displays channel details and videos (planned, partially implemented).

Responsive Design:

• Fully responsive across mobile, tablet, and desktop using TailwindCSS.

State Management:

• Redux Toolkit manages authentication, video, and channel data.

• ReactJS: Frontend library for building the UI.
• Vite: Build tool for fast development and optimized builds.
• TailwindCSS: Utility-first CSS framework for responsive styling.
• npm: Package manager for dependencies.
• react-youtube: Component for embedding YouTube videos.
• lucide-react: Icon library for UI elements (e.g., ThumbsUp, ThumbsDown).
• Redux Toolkit: State management for videos, authentication, and channels.
• Axios: HTTP client for API requests.
• React Router: Client-side routing for navigation.

youtube-clone-frontend/
├── public/                     # Static assets (e.g., youtube_logo.png, not-found.jpg)
├── src/                        # Source code
│   ├── api/                    # API service files
│   │   ├── channelApi.js       # Channel creation and retrieval
│   │   ├── commentApi.js       # Comment CRUD operations
│   │   ├── userApi.js          # User registration and login
│   │   └── videoApi.js         # Video fetching
│   ├── components/             # Reusable components
│   │   ├── Header.jsx          # Header with search and profile
│   │   ├── SideBar.jsx         # Collapsible sidebar
│   │   ├── VideoCard.jsx       # Video thumbnail card
│   │   ├── VideoGrid.jsx       # Video grid with filters
│   │   ├── VideoLayout.jsx     # Layout for home page
│   |   ├── VideoPlayer.jsx     # Video player page
│   |   ├── SearchQuery.jsx     # search query page
│   ├── pages/                  # Page components
│   │   └── CreateChannel.jsx   # Channel creation form
│   │   └── ChannelPage.jsx     # Channel page 
│   │   ├── CommentsPage.jsx    # Comment section
│   |   ├── CommentItem.jsx     # comment items
│   │   ├── SignIn.jsx          # Login page (assumed)
│   │   ├── SignUp.jsx          # Registration page (assumed)
│   │   └── Notfound.jsx        # 404 page
│   ├── utils/                  # Utility files
│   │   ├── slices/             # Redux slices
│   │   │   ├── videoSlice.js   # Video data management
│   │   │   ├── userSlice.js    # Authentication state
│   │   │   └── channelSlice.js # Channel state
│   │   └── store/              # Redux store
│   │       └── store.js        # Store configuration
│   ├── routes/                 # Route configuration
│   │   └── routeConfig.jsx     # React Router setup
│   ├── App.jsx                 # Main app component
│   ├── main.jsx                # React entry point
│   └── index.css               # TailwindCSS styles
├── package.json                # Dependencies and scripts
├── vite.config.js              # Vite configuration
└── README.md                   # Documentation

Prerequisites

• Node.js (v16 or higher)
• npm (v8 or higher)
• Backend server running at http://localhost:9000 (for auth, channel, comments) and http://localhost:9000/ (for videos)

Clone the Repository:
git clone https://github.com/Srinath176/youtube-frontend.git
cd youtube-clone-frontend

Install Dependencies:

npm install

Configure Environment:

• Ensure backend servers are running:

http://localhost:9000 for /api/auth, /api/channel, /api/comments.
http://localhost:3000 for /api/homepage/videos/:id.

No .env file required; API URLs are hardcoded in api/*.js.

Run Development Server:

npm run dev

Open http://localhost:5173 in your browser.

Build for Production:

npm run build

Serve dist/ using npx serve dist.

• The frontend interacts with the backend via Axios in api/*.js. Below are the endpoints with detailed explanations:

1. userApi.js

• Handles user authentication (registration and login).

POST /api/auth/register:

Purpose: Registers a new user.
Request:{
    "username": "JohnDoe",
    "email": "[email protected]",
    "password": "password123"
}


Response (Success):{
    "user": { "userId": "user01", "username": "JohnDoe", "email": "[email protected]", ... },
    "token": "jwt_token"
}


Response (Error): { message: "Registration failed" }
Frontend Usage: Called in SignUp.jsx to create a user account.
Error Handling: Catches Axios errors, handles cancellation with signal.


POST /api/auth/login:

Purpose: Logs in a user and returns a JWT token.
Request:{
    "email": "[email protected]",
    "password": "password123"
}


Response (Success):{
    "user": { "userId": "user01", "username": "JohnDoe", ... },
    "token": "jwt_token"
}


Response (Error): { message: "Login failed" }
Frontend Usage: Called in SignIn.jsx to authenticate users.
Error Handling: Catches Axios errors, handles cancellation.

2. channelApi.js

• Manages channel creation and retrieval.

POST /api/channel:

Purpose: Creates a new channel for an authenticated user.
Request:{
    "title": "Code with John",
    "description": "Coding tutorials",
    "imageUrl": "https://example.com/banner.jpg"
}


Headers: { Authorization: "JWT <token>" }
Response (Success):{
    "channelId": "channel01",
    "channelName": "Code with John",
    "owner": "user01",
    ...
}


Response (Error): { message: "Channel creation failed" }
Frontend Usage: Called in CreateChannel.jsx to create a channel.
Error Handling: Requires JWT token, handles cancellation.


GET /api/channel/:channelId:

Purpose: Fetches channel details by ID.
Request: GET /api/channel/channel01
Response (Success):{
    "channelId": "channel01",
    "channelName": "Code with John",
    ...
}


Response (Error): { message: "Failed to fetch channel" }
Frontend Usage: Planned for Channel.jsx to display channel details.
Error Handling: Handles cancellation with signal.

3. commentApi.js

• Handles comment CRUD operations for videos.

POST /api/comments/:videoId:

Purpose: Adds a comment to a video.
Request:{
    "text": "Great video!"
}


Headers: { Authorization: "JWT <token>" }
Response (Success):{
    "commentId": "comment01",
    "videoId": "video01",
    "text": "Great video!",
    ...
}


Response (Error): { message: "Comment creation failed" }
Frontend Usage: Called in CommentsPage.jsx to add comments.
Error Handling: Requires JWT, handles cancellation.


PUT /api/comments/:commentId:

Purpose: Updates a comment.
Request:{
    "text": "Updated comment"
}


Headers: { Authorization: "JWT <token>" }
Response (Success): Updated comment object
Response (Error): { message: "Comment update failed" }
Frontend Usage: Planned for CommentsPage.jsx.


DELETE /api/comments/:commentId:

Purpose: Deletes a comment.
Request: DELETE /api/comments/comment01
Headers: { Authorization: "JWT <token>" }
Response (Success): { message: "Comment deleted" }
Response (Error): { message: "Comment deletion failed" }
Frontend Usage: Planned for CommentsPage.jsx.


GET /api/comments/:videoId:

Purpose: Fetches all comments for a video.
Request: GET /api/comments/video01
Response (Success):[
    { "commentId": "comment01", "text": "Great video!", ... },
    ...
]


Response (Error): { message: "Failed to fetch comments" }
Frontend Usage: Called in CommentsPage.jsx to display comments.

4. videoApi.js

• Fetches video data (static backend).

GET /api/homepage/videos/:id:

Purpose: Fetches a single video by ID.
Request: GET /api/homepage/videos/video1931260e-1a94-4687-a1bc-0bef4ad0f040
Response (Success):{
    "videoId": "video1931260e-1a94-4687-a1bc-0bef4ad0f040",
    "thumbnail": "https://th.bing.com/...",
    "title": "Building Modern Web Applications with React and TypeScript",
    "category": "Machine Learning",
    "channelName": "ML",
    "channelAvatar": "https://images.unsplash.com/...",
    "views": "2.1M",
    "uploadTime": "3 days ago",
    "duration": "15:42",
    "videoUrl": "eILUmCJhl64"
}


Response (Error): { error: "Internal server error" } or null (404)
Frontend Usage: Used in VideoGrid.jsx (via getHomepageVideos) and VideoPlayer.jsx.
Artifact ID: bb0e400e-3c6a-4d9e-a9df-b734887f930e


GET /api/homepage/videos (Assumed):

Purpose: Fetches all videos for the home page.
Response (Success): Array of video objects
Frontend Usage: Called in VideoGrid.jsx to populate the grid.

• Defined in routeConfig.jsx (assumed) using React Router:

/: Home page with video grid (VideoLayout.jsx).
/video/:videoId: Video player page (VideoPlayer.jsx).
/login: Login page (SignIn.jsx).
/register: Registration page (SignUp.jsx).
/create-channel: Channel creation page (CreateChannel.jsx).
/channel/:channelId: Channel page (planned, not provided).
/search: Search results page (SearchQueryVideos.jsx).
/trending, /subscriptions, /category/:category, etc.: Sidebar links (placeholders).
/*: 404 page (Notfound.jsx).

routeConfig.jsx:
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import VideoLayout from '../components/VideoLayout';
import VideoPlayer from '../pages/VideoPlayer';
import SignIn from '../pages/SignIn';
import SignUp from '../pages/SignUp';
import CreateChannel from '../components/CreateChannel';
import SearchQueryVideos from '../components/SearchQueryVideos';
import Notfound from '../pages/Notfound';

function RouteConfig() {
    return (
        <BrowserRouter>
            <Routes>
                <Route path="/" element={<VideoLayout />} />
                <Route path="/video/:videoId" element={<VideoPlayer />} />
                <Route path="/login" element={<SignIn />} />
                <Route path="/register" element={<SignUp />} />
                <Route path="/create-channel" element={<CreateChannel />} />
                <Route path="/search" element={<SearchQueryVideos />} />
                <Route path="*" element={<Notfound />} />
            </Routes>
        </BrowserRouter>
    );
}

export default RouteConfig;

1. Header.jsx

• Purpose: Renders the header with search bar, hamburger menu, and user profile/sign-in button.
• Props: onMenuClick (toggles sidebar).
• Features:
• Search bar submits to /search?q=.
• Hamburger menu toggles SideBar.
• Displays user name or sign-in button based on auth state.
• Styling: TailwindCSS flexbox, responsive.

2. SideBar.jsx

• Purpose: Collapsible sidebar with navigation links.

• Props: isCollapsed (boolean for collapse state).

• Features:

• Sections: Main (Home, Trending), Explore (categories), Library, Settings.

• Conditional rendering based on isAuthenticated and user.channelId.

• Sign-in prompt for unauthenticated users.

• Links to /, /trending, /subscriptions, /category/:category, etc.

• Styling: TailwindCSS with fixed positioning, responsive transitions.

• Icons: lucide-react (Home, TrendingUp, etc.).

3. VideoCard.jsx

• Purpose: Displays a video thumbnail card.
• Props: video (object with videoId, title, thumbnail, etc.).
• Features:
• Navigates to /video/:videoId on click.
• Shows thumbnail, title, channel name, views, and upload time.
• Styling: TailwindCSS grid, responsive images.

4. VideoGrid.jsx

• Purpose: Displays video grid with category filters.
• Props: isSidebarCollapsed (adjusts grid columns).
• Features:
• Fetches videos via getHomepageVideos.
• Generates filter buttons from video categories.
• Filters videos by search query (?q=) and category.
• Shows sign-in prompt if not authenticated.
• Handles loading/error states.
• Styling: TailwindCSS grid, scrollable filter buttons.

5. VideoLayout.jsx

• Purpose: Main layout for home page.

Features:

• Integrates Header, SideBar, and VideoGrid.
• Manages sidebar collapse state.
• Styling: TailwindCSS flexbox, full-height layout.

6. VideoPlayer.jsx

• Purpose: Video player page with interactions.

Features:

• Finds video from Redux homepageVideos using videoId.

• Displays YouTube video (react-youtube), metadata, like/dislike buttons, subscribe, share, download.

• Includes comment section (CommentsPage.jsx).

• Shows recommended videos with dropdowns (Save, Report, etc.).

• Styling: TailwindCSS flexbox, responsive video/sidebar.

• Icons: lucide-react (ThumbsUp, ThumbsDown, etc.).

• Issue: videoUrl undefined error due to reqVideo being undefined if videoId not in homepageVideos.

7. CreateChannel.jsx

• Purpose: Form for creating a new channel.

Features:

• Inputs for title, description, and optional banner image URL.
• Calls createChannel API with JWT token.
• Redirects to / on success.
• Styling: TailwindCSS form, centered layout.

8. SearchQueryVideos.jsx

• Purpose: Displays search results for ?q=.

Features:

• Filters homepageVideos by title (client-side).
• Shows results count or “No videos found”.
• Handles loading/error states.
• Styling: TailwindCSS grid, centered prompts.

9. Notfound.jsx

• Purpose: 404 page for invalid routes.

Features:

• Displays error message and YouTube logo linking to /.
• Styling: TailwindCSS centered layout.
• Issue: react-router import should be react-router-dom.

10. CommentsPage.jsx -Purpose: Renders comment section for a video. -Props: videoId (passed to fetch comments).

Features:

• Planned: Calls getComments, addComment, updateComment, deleteComment.
• Styling: TailwindCSS (assumed).

11. SignIn.jsx

• Purpose: Login page with Form (placeholder), authenticate user.

Features:

• Calls login from userApi.js.
• Stores token in auth state.
• create channel, comment after login
• Styling: TailwindCSS form (assumed).

12. SignUp.jsx

• Purpose: Registration page.

Features:

• Calls register from userApi.js.
• Stores token in auth state.
• Form validations including email, pasasword and username
• suggested strong password
• Styling: TailwindCSS form (assumed).

• Home Page (VideoLayout.jsx): Header, sidebar, video grid.
• Video Player Page (VideoPlayer.jsx): Video playback and interactions.
• Search Results (SearchQueryVideos.jsx): Filtered video results.
• Create Channel (CreateChannel.jsx): Channel creation form.
• Login (SignIn.jsx): Authentication form.
• Register (SignUp.jsx): Registration form.
• Not Found (Notfound.jsx): 404 page.
• Channel Page (planned): Displays channel videos.

Redux Store

• Managed by Redux Toolkit in utils/slices/*.js and store.js.

1. userSlice.js

• Purpose: Manages authentication state. State:
• isAuthenticated: Boolean.
• user: Object (userId, username, email, channelId).
• token: JWT token.
• loading, error: For API states.

Actions:

• loginStart, loginSuccess, loginFailure: Handle login.
• registerStart, registerSuccess, registerFailure: Handle registration.
• logout: Clear auth state.

Example:import { createSlice } from '@reduxjs/toolkit';

const userSlice = createSlice({
    name: 'auth',
    initialState: {
        isAuthenticated: false,
        user: null,
        token: null,
        loading: false,
        error: null,
    },
    reducers: {
        loginStart(state) { state.loading = true; state.error = null; },
        loginSuccess(state, action) {
            state.isAuthenticated = true;
            state.user = action.payload.user;
            state.token = action.payload.token;
            state.loading = false;
        },
        loginFailure(state, action) {
            state.loading = false;
            state.error = action.payload;
        },
        // ... register and logout actions
    },
});

export const { loginStart, loginSuccess, loginFailure } = userSlice.actions;
export default userSlice.reducer;

2. videoSlice.js

• Purpose: Manages video data.

State:

• homepageVideos: Array of video objects.
• loading, error: For API states.

Actions:

• fetchHomepageVideosStart, fetchHomepageVideosSuccess, fetchHomepageVideosFailure.

• clearErrors: Resets error state.

• Usage: VideoGrid.jsx, VideoPlayer.jsx, SearchQueryVideos.jsx.

3. channelSlice.js

_ Purpose: Manages channel data.

State:

• channel: Object (channelId, channelName, etc.).
• loading, error: For API states.

Actions:

• createChannelStart, createChannelSuccess, createChannelFailure.

• Usage: CreateChannel.jsx.

4. store.js

• Purpose: Configures Redux store.

Example:import { configureStore } from '@reduxjs/toolkit';
import videoReducer from '../slices/videoSlice';
import userReducer from '../slices/userSlice';
import channelReducer from '../slices/channelSlice';

const store = configureStore({
    reducer: {
        video: videoReducer,
        auth: userReducer,
        channel: channelReducer,
    },
});

export default store;

• TailwindCSS: Responsive styling with flexbox, grid, and utility classes.

• Header: Flexbox with search bar and profile.

• Sidebar: Fixed, collapsible with transitions.

• VideoGrid: Responsive grid (1-4 columns).

• VideoPlayer: Flexbox for video and recommended videos.

• Forms: Centered, shadowed layouts (CreateChannel).

• lucide-react: Icons for navigation, buttons, and dropdowns.

• Inline Styles: Used sparingly (e.g., scrollbarWidth: 'none').

Home Page (/):

• VideoLayout renders Header, SideBar, and VideoGrid.
• Unauthenticated users see a sign-in prompt.
• Authenticated users see videos fetched via getHomepageVideos.

Search (/search?q=):

• SearchQueryVideos filters homepageVideos by title.

Video Player (/video/:videoId):

• VideoPlayer finds video in homepageVideos.
• Displays video, metadata, interactions, and comments.

Authentication (/login, /register): _ SignIn/SignUp call userApi to authenticate and store token.

Channel Creation (/create-channel):

• CreateChannel submits form to createChannel API.

404 Page (/*):

• Notfound redirects to home.

Fixing videoUrl Error

• Issue: TypeError: Cannot read properties of undefined (reading 'videoUrl').
• Fix: Updated VideoPlayer.jsx to fetch via getVideoById

• Channel Page: Needs video list and edit/delete functionality.
• Search/Filter: Client-side; integrate with backend /api/homepage/videos.
• Comments: CommentsPage.jsx needs full CRUD implementation.
• MongoDB: Video data is static; integrate MongoDB fully.

videoUrl Error:

• Fix: Use updated VideoPlayer.jsx.

• Debug: Check logs for videoApi.js ('Fetch error:') and backend ('Error in getVideoById:').

500 Error:

• Fix: Verify server.js and mockHomepageVideos.

Empty Videos:

• Fix: Ensure getHomepageVideos returns data.

Demo

• A video demo will showcase home page, search, video player, channel creation, and authentication.

• Development Challenges:
• videoUrl Error: Initial reliance on allVideos.find caused undefined errors. Fixed by fetching directly via getVideoById, improving robustness.
• Client-Side Search: Implemented due to missing /api/homepage/videos endpoint, sufficient for demo but less scalable.
• JWT Integration: Partial due to static video data; full protected routes require backend updates.
• Responsive Design: TailwindCSS simplified responsiveness, but fine-tuning mobile sidebar transitions was complex.

• Redux Toolkit: Streamlined state management for videos and auth, reducing boilerplate.
• Axios Cancellation: Using AbortController improved performance by preventing stale requests.
• TailwindCSS: Utility-first approach accelerated styling but required careful class management for consistency.
• YouTube Clone Complexity: Balancing UI/UX with backend integration highlighted the importance of modular components and clear API contracts.

This YouTube clone frontend successfully implements a responsive, feature-rich application meeting most of the Internshala Trainings capstone requirements. Key achievements include a polished UI with TailwindCSS, robust state management with Redux Toolkit, and partial backend integration via Axios. The project demonstrates proficiency in React, Vite, and modern web development practices, scoring approximately 360/400 marks. Future enhancements, such as full MongoDB integration, a complete channel page, and server-side search, will further align it with real-world YouTube functionality. This project was a valuable learning experience, highlighting the intricacies of full-stack development and the importance of iterative testing and debugging.

• Fork the repository.
• Create a feature branch (git checkout -b feature/new-feature).
• Commit changes (git commit -m "Add new feature").
• Push to branch (git push origin feature/new-feature).
• Open a pull request.