This repository contains both the frontend and backend code for a YouTube-style application. The backend (Express + MongoDB) serves RESTful APIs for user authentication, video management, and comments. The frontend (React + Vite + Tailwind CSS) consumes those APIs to provide a dark-themed, responsive user interface where users can browse, upload, and interact with videos.
- YouTube Clone (Frontend & Backend)
-
User Authentication
- Register, login, and logout with JWT tokens
- Protected routes for uploading/editing/deleting videos and comments
-
Video Management
- Upload videos with title, description, category, and URL
- View all videos on the home page in a responsive grid
- Edit and delete your own videos
-
Comments & Reactions
- Create, edit, and delete comments on videos
- Like or dislike videos and comments
-
Search & Category Filtering
- Search bar to filter videos by keywords
- Sidebar or category list to filter by category
-
Channel Profile Pages
- Displays channel banner, avatar, name, and description
- Shows all videos uploaded by the channel
-
Responsive Dark Theme (Frontend)
- Dark background, light text, and subtle hover accents
- CSS layouts for desktop, tablet, and mobile devices
- Sidebar behavior: expanded on desktop, collapsed on tablet, hidden on mobile
-
Backend
- Node.js with Express
- MongoDB (via Mongoose)
- JWT for authentication
- Bcrypt for password hashing
- CORS and other middleware
-
Frontend
- React (scaffolded with Vite)
- Tailwind CSS, custom css for styling
- React Router for client-side routing
- Axios for API requests
- Context API for global state management
root/
├── bug.js
├── projectThinking.md
├── README.md # contains info about whole project
├── YT_BACKEND/ # Backend codebase
│ ├── .env # Environment variables (not committed)
│ ├── package.json
│ ├── src/
│ │ ├── server.js
│ │ ├── schema or modals/ # Mongoose schemas: User.js, Video.js, Comment.js , Channel.js
│ │ ├── routes/ # authRoutes.js, videoRoutes.js, commentRoutes.js , userRoutes , channelRoutes etc.
│ │ ├── controllers/ # authController.js, videoController.js, commentController.js ,channelControllers
│ │ ├── services/ # authService.js, videoService.js, commentService.js , channelService
│ │ ├── middleware/ # authMiddleware.js, errorHandlers
│ │ └── utils/ # Helper functions
│ └── NOTES/ # Additional notes or test files
│
└── YT_FRONTEND/ # Frontend codebase
├── .env # Environment variables (not committed)
├── index.html
├── package.json
├── tailwind.config.js
├── postcss.config.js
├── vite.config.js
├── public/ # Favicon, static assets
└── src/
├── assets/ # Icons, images
├── components/ # React components (Header, Sidebar, Home, VideoCard, VideoPlayer, Profile, Comments, Auth, Search)
├── context/ # AuthContext.js, SideContext.js
├── utils/ # axiosInstance.js, authService.js
├── styles/ # Global CSS, Tailwind overrides
├── App.jsx # Main application (routes & layout)
└── main.jsx # React entry point
Create a .env file inside YT_BACKEND with:
PORT: port number for the Express server (e.g., 5000)MONGO_URI: MongoDB connection string (e.g., an Atlas URI)JWT_SECRET: secret key for signing JWTsJWT_EXPIRES_IN: (optional) token expiration time (e.g., '7d')
- Navigate to
YT_BACKEND - Install backend dependencies by running the install command provided
- Start the server by running the start command provided
- Expect console logs confirming a successful connection to MongoDB and that the server is listening on the specified port
- to check all functionality plse create a channel after login else unsigned user won't access the channel of other.
- Auth Endpoints
•POST /api/user/signup– register new user
•POST /api/auth/login– login and receive JWT - Video Endpoints
•POST /api/video– upload new video (protected)
•GET /api/video– fetch all videos
•GET /api/video/:id– fetch a specific video by ID
•PUT /api/video/:id– update own video (protected)
•DELETE /api/video/:id– delete own video (protected) - Comment Endpoints
•POST /api/comments/:videoId– add comment to a video (protected)
•GET /api/comments/:videoId– fetch all comments for a video
•PUT /api/comments/:commentId– edit own comment (protected)
•DELETE /api/comments/:commentId– delete own comment (protected) - Like/Dislike Endpoints
•PUT /api/videos/:id/likeor/api/videos/:id/dislike– like/dislike a video (protected)
•PUT /api/comments/:id/likeor/api/comments/:id/dislike– like/dislike a comment (protected)
- Navigate to
YT_FRONTEND - Install frontend dependencies using the install command provided
- Start the development server by running the dev command provided
- The application will open in your browser at a local port (for example, http://localhost:5173)
- From within
YT_FRONTEND, run the build command provided to generate optimized static assets - Serve the generated
distfolder on any static file server or integrate with a Node/Express server
- Visit the Register page to sign up with a username, email, and password
- Visit the Login page to authenticate and receive a JWT token stored in local storage
- Protected features (video upload, edit, delete, comment) require a valid JWT
- Once logged in and have channel then only user will have access to the Upload page to submit:
- Video title
- Description
- Video URL
- Category
- Successfully uploaded videos appear on the Home and Profile pages
- Edit or delete own videos via controls on the video’s detail page
- On each Video Player page, scroll down to see existing comments
- Add a new comment by typing into the comment form
- Edit or delete your own comments using the action buttons that appear on hover
- Like or dislike a video or comment by clicking the respective icons (counts update dynamically)
- Use the search bar in the header to filter videos in real time by title or keyword
- Click on a category in the sidebar (or category list) to view videos belonging to that category
- Click a channel avatar or name on any video card to navigate to that channel’s Profile page
- The Profile page displays the channel banner, avatar, name, description, and a grid of all videos uploaded by that channel
- No Arrow Functions in component definitions or service functions – use standard function declarations
- Tailwind CSS for styling in the frontend; each component has its own CSS file with atomic classes
- Context API for shared state:
AuthContextfor user authentication state and token managementSideContextfor video list, search query, and category filter
- Axios configured with an interceptor to automatically attach the JWT token from local storage no need to send token every time in header.
- Environment Variables:
- Backend uses variables beginning with
MONGO_URI,JWT_SECRET - Frontend uses
VITE_API_URL
- Backend uses variables beginning with
Contributions are welcome! To contribute:
- Fork the repository
- Create a branch describing your changes (for example,
fix/comment-paginationorfeature/add-dark-mode-toggle) - Follow existing conventions (modular controllers in the backend, Tailwind and no arrow functions in the frontend)
- Test your changes thoroughly
- Open a pull request with a clear description of what you changed and why
- Anyone want to contribute -- fix the layout of project especially sidebar and header and how other page will have behave acc to it.
This project is licensed under the ISC License. Please see the LICENSE file for full details.