Astri4-4
5 months ago
1 changed files with 436 additions and 48 deletions
@ -1,48 +1,436 @@ |
|||||
# 3 RESIT |
# FreeTube - Video Sharing Platform |
||||
|
|
||||
## Introduction |
 |
||||
Ce projet consiste en la création d'une plateforme concurrente a Youtube, permettant aux utilisateurs de publier des vidéos, de les visionner et de les commenter. Le projet est divisé en plusieurs parties, chacune correspondant à une fonctionnalité spécifique. |
|
||||
|
## 📋 Table of Contents |
||||
## Fonctionnalités |
- [Overview](#overview) |
||||
- **Partie 1** : Création d'un serveur HTTP permettant de servir des pages HTML. |
- [Features](#features) |
||||
- **Partie 2** : Création d'une API REST permettant de gérer les vidéos, les utilisateurs et les commentaires. |
- [Tech Stack](#tech-stack) |
||||
- **Partie 3** : Création d'une interface utilisateur permettant de visualiser les vidéos, de les commenter et de les liker. |
- [Prerequisites](#prerequisites) |
||||
|
- [Installation](#installation) |
||||
## Installation |
- [Configuration](#configuration) |
||||
Il y a plusieurs façons d'installer le projet. La méthode la plus simple est d'utiliser Docker. Il est également possible de l'installer manuellement en clonant le dépôt et en installant les dépendances. |
- [Usage](#usage) |
||||
|
- [API Documentation](#api-documentation) |
||||
### Installation avec Docker |
- [Project Structure](#project-structure) |
||||
1. Assurez-vous d'avoir Docker et Docker Compose installé sur votre machine. |
- [Development](#development) |
||||
|
- [Testing](#testing) |
||||
2. Entrer les variables d'environnement dans le fichier `.env` : |
- [Troubleshooting](#troubleshooting) |
||||
```.env |
- [Contributing](#contributing) |
||||
BACKEND_PORT= |
|
||||
DB_USER= |
## 🎯 Overview |
||||
DB_NAME= |
|
||||
DB_HOST= |
FreeTube is a modern video sharing platform built as a YouTube competitor. It allows users to upload, watch, and interact with videos through comments and likes. The platform features user authentication, video management, channel subscriptions, and a recommendation system. |
||||
DB_PASSWORD= |
|
||||
JWT_SECRET= |
This project is part of a 3-part development resit assignment focusing on: |
||||
LOG_FILE= |
- **Part 1**: HTTP server serving HTML pages |
||||
``` |
- **Part 2**: REST API for video, user, and comment management |
||||
3. Lancer le projet avec Docker Compose : |
- **Part 3**: Interactive frontend user interface |
||||
```bash |
|
||||
docker-compose up --build |
## ✨ Features |
||||
``` |
|
||||
|
### 🔐 Authentication System |
||||
### Installation manuelle |
- User registration with profile picture upload |
||||
|
- Secure login with JWT tokens |
||||
// TODO: Ajouter les instructions d'installation manuelle |
- Persistent sessions with localStorage |
||||
|
- Protected routes and authentication guards |
||||
## Utilisation |
- Profile management and display |
||||
- Pour utiliser la plateforme, vous pouvez accéder à l'interface utilisateur via votre navigateur web à l'adresse `http://localhost:80` (ou le port que vous avez configuré dans le fichier `.env`). |
|
||||
- Pour interagir avec l'API REST, vous pouvez utiliser un outil comme Postman ou curl. Les endpoints de l'API sont documentés dans le fichier `api.md`. |
### 📹 Video Management |
||||
|
- Video upload with thumbnail generation |
||||
## Commandes utiles |
- Video streaming and playback |
||||
- Pour supprimer les conteneurs Docker : |
- Video metadata management |
||||
```bash |
- Video search and filtering |
||||
docker-compose down --volumes // Supprime les volumes pour réinitialiser la base de données |
|
||||
``` |
### 👥 User Features |
||||
- Pour vider la base de données : |
- User profiles with customizable avatars |
||||
```bash |
- Channel creation and management |
||||
docker-compose exec resit_backend node tools flush // Vide la base de données sans supprimer les conteneurs ni les tables |
- Subscription system |
||||
``` |
- User activity tracking |
||||
|
|
||||
|
### 💬 Social Features |
||||
|
- Video commenting system |
||||
|
- Like/dislike functionality |
||||
|
- Video recommendations |
||||
|
- Trending videos section |
||||
|
|
||||
|
### 🎨 Frontend Features |
||||
|
- Responsive React-based UI |
||||
|
- Modern design with Tailwind CSS |
||||
|
- Client-side routing with React Router |
||||
|
- Real-time updates and interactions |
||||
|
|
||||
|
## 🛠 Tech Stack |
||||
|
|
||||
|
### Backend |
||||
|
- **Runtime**: Node.js |
||||
|
- **Framework**: Express.js |
||||
|
- **Database**: PostgreSQL |
||||
|
- **Authentication**: JWT (JSON Web Tokens) |
||||
|
- **File Upload**: Multer |
||||
|
- **Testing**: Vitest |
||||
|
|
||||
|
### Frontend |
||||
|
- **Framework**: React 18 |
||||
|
- **Build Tool**: Vite |
||||
|
- **Styling**: Tailwind CSS |
||||
|
- **Routing**: React Router |
||||
|
- **State Management**: React Context API |
||||
|
- **Fonts**: Montserrat, Inter |
||||
|
|
||||
|
### Infrastructure |
||||
|
- **Containerization**: Docker & Docker Compose |
||||
|
- **Reverse Proxy**: Nginx |
||||
|
- **Development**: Hot reload for both frontend and backend |
||||
|
|
||||
|
## 📋 Prerequisites |
||||
|
|
||||
|
Before you begin, ensure you have the following installed: |
||||
|
- [Docker](https://docs.docker.com/get-docker/) (v20.10+) |
||||
|
- [Docker Compose](https://docs.docker.com/compose/install/) (v2.0+) |
||||
|
- [Git](https://git-scm.com/downloads) |
||||
|
|
||||
|
## 🚀 Installation |
||||
|
|
||||
|
### Quick Start with Docker (Recommended) |
||||
|
|
||||
|
1. **Clone the repository** |
||||
|
```bash |
||||
|
git clone <repository-url> |
||||
|
cd 3RESIT_DOCKER |
||||
|
``` |
||||
|
|
||||
|
2. **Set up environment variables** |
||||
|
Create a `.env` file in the root directory: |
||||
|
```env |
||||
|
# Database Configuration |
||||
|
POSTGRES_USER=freetube_user |
||||
|
POSTGRES_PASSWORD=your_secure_password |
||||
|
POSTGRES_DB=freetube_db |
||||
|
POSTGRES_HOST=db |
||||
|
|
||||
|
# Backend Configuration |
||||
|
BACKEND_PORT=8000 |
||||
|
JWT_SECRET=your_jwt_secret_key_min_32_chars |
||||
|
LOG_FILE=/var/log/freetube/access.log |
||||
|
``` |
||||
|
|
||||
|
3. **Build and start the application** |
||||
|
```bash |
||||
|
docker-compose up --build |
||||
|
``` |
||||
|
|
||||
|
4. **Access the application** |
||||
|
- Frontend: http://localhost |
||||
|
- Backend API: http://localhost:8000 |
||||
|
- Database: localhost:5432 |
||||
|
|
||||
|
### Manual Installation |
||||
|
|
||||
|
<details> |
||||
|
<summary>Click to expand manual installation steps</summary> |
||||
|
|
||||
|
#### Backend Setup |
||||
|
```bash |
||||
|
cd backend |
||||
|
npm install |
||||
|
npm run dev |
||||
|
``` |
||||
|
|
||||
|
#### Frontend Setup |
||||
|
```bash |
||||
|
cd frontend |
||||
|
npm install |
||||
|
npm run dev |
||||
|
``` |
||||
|
|
||||
|
#### Database Setup |
||||
|
- Install PostgreSQL |
||||
|
- Create database and user |
||||
|
- Run migrations (if available) |
||||
|
</details> |
||||
|
|
||||
|
## ⚙️ Configuration |
||||
|
|
||||
|
### Environment Variables |
||||
|
|
||||
|
| Variable | Description | Default | Required | |
||||
|
|----------|-------------|---------|----------| |
||||
|
| `POSTGRES_USER` | Database username | - | ✅ | |
||||
|
| `POSTGRES_PASSWORD` | Database password | - | ✅ | |
||||
|
| `POSTGRES_DB` | Database name | - | ✅ | |
||||
|
| `POSTGRES_HOST` | Database host | db | ✅ | |
||||
|
| `BACKEND_PORT` | Backend server port | 8000 | ✅ | |
||||
|
| `JWT_SECRET` | JWT signing secret | - | ✅ | |
||||
|
| `LOG_FILE` | Log file path | /var/log/freetube/access.log | ❌ | |
||||
|
|
||||
|
### Docker Volumes |
||||
|
|
||||
|
The application uses the following volumes: |
||||
|
- `./backend/logs:/var/log/freetube` - Application logs |
||||
|
- `./backend/app/uploads:/app/app/uploads` - Uploaded files (videos, images) |
||||
|
- Database data volume for PostgreSQL persistence |
||||
|
|
||||
|
## 📖 Usage |
||||
|
|
||||
|
### Getting Started |
||||
|
|
||||
|
1. **Create an Account** |
||||
|
- Navigate to http://localhost |
||||
|
- Click "Créer un compte" |
||||
|
- Fill in your details and optionally upload a profile picture |
||||
|
- Submit the form to register and automatically log in |
||||
|
|
||||
|
2. **Login** |
||||
|
- Click "Se connecter" on the homepage |
||||
|
- Enter your username and password |
||||
|
- You'll be redirected to the authenticated homepage |
||||
|
|
||||
|
3. **Upload Videos** |
||||
|
- Use the API endpoints to upload videos (see API documentation) |
||||
|
- Videos are stored in the uploads directory |
||||
|
|
||||
|
4. **Browse Content** |
||||
|
- View recommendations on the homepage |
||||
|
- Search for videos using the search bar |
||||
|
- Browse trending videos and top creators |
||||
|
|
||||
|
### Authentication Flow |
||||
|
|
||||
|
The authentication system works as follows: |
||||
|
1. User registers/logs in through the frontend forms |
||||
|
2. Backend validates credentials and returns JWT token |
||||
|
3. Token is stored in localStorage for persistence |
||||
|
4. Protected routes check authentication status |
||||
|
5. Navbar updates to show user profile and logout option |
||||
|
|
||||
|
## 📚 API Documentation |
||||
|
|
||||
|
### Authentication Endpoints |
||||
|
|
||||
|
#### Register User |
||||
|
```http |
||||
|
POST /api/users/ |
||||
|
Content-Type: multipart/form-data |
||||
|
|
||||
|
email: user@example.com |
||||
|
username: johndoe |
||||
|
password: securepassword |
||||
|
picture: [file upload] |
||||
|
``` |
||||
|
|
||||
|
#### Login User |
||||
|
```http |
||||
|
POST /api/users/login |
||||
|
Content-Type: application/json |
||||
|
|
||||
|
{ |
||||
|
"username": "johndoe", |
||||
|
"password": "securepassword" |
||||
|
} |
||||
|
``` |
||||
|
|
||||
|
### Media Endpoints |
||||
|
|
||||
|
#### Get Profile Picture |
||||
|
```http |
||||
|
GET /api/media/profile/{filename} |
||||
|
``` |
||||
|
|
||||
|
#### Get Video Thumbnail |
||||
|
```http |
||||
|
GET /api/media/thumbnail/{filename} |
||||
|
``` |
||||
|
|
||||
|
### Additional Endpoints |
||||
|
|
||||
|
- **Videos**: `/api/videos/` |
||||
|
- **Comments**: `/api/comments/` |
||||
|
- **Channels**: `/api/channels/` |
||||
|
- **Playlists**: `/api/playlists/` |
||||
|
- **Recommendations**: `/api/recommendations/` |
||||
|
|
||||
|
For detailed API documentation, check the `.http` files in the `backend/requests/` directory. |
||||
|
|
||||
|
## 📁 Project Structure |
||||
|
|
||||
|
``` |
||||
|
3RESIT_DOCKER/ |
||||
|
├── backend/ # Node.js Express backend |
||||
|
│ ├── app/ |
||||
|
│ │ ├── controllers/ # Request handlers |
||||
|
│ │ ├── middlewares/ # Express middlewares |
||||
|
│ │ ├── routes/ # API route definitions |
||||
|
│ │ ├── uploads/ # File storage |
||||
|
│ │ └── utils/ # Utility functions |
||||
|
│ ├── logs/ # Application logs |
||||
|
│ ├── requests/ # HTTP request examples |
||||
|
│ └── test/ # Test files |
||||
|
├── frontend/ # React frontend |
||||
|
│ ├── src/ |
||||
|
│ │ ├── components/ # Reusable React components |
||||
|
│ │ ├── contexts/ # React Context providers |
||||
|
│ │ ├── pages/ # Page components |
||||
|
│ │ ├── routes/ # Route configuration |
||||
|
│ │ └── assets/ # Static assets |
||||
|
│ └── public/ # Public assets |
||||
|
├── nginx/ # Nginx configuration |
||||
|
└── docker-compose.yaml # Docker orchestration |
||||
|
``` |
||||
|
|
||||
|
## 🔧 Development |
||||
|
|
||||
|
### Available Scripts |
||||
|
|
||||
|
#### Backend |
||||
|
```bash |
||||
|
npm run dev # Start development server with hot reload |
||||
|
npm run start # Start production server |
||||
|
npm run test # Run tests |
||||
|
``` |
||||
|
|
||||
|
#### Frontend |
||||
|
```bash |
||||
|
npm run dev # Start development server |
||||
|
npm run build # Build for production |
||||
|
npm run preview # Preview production build |
||||
|
npm run lint # Run ESLint |
||||
|
``` |
||||
|
|
||||
|
#### Docker Commands |
||||
|
```bash |
||||
|
# Start all services |
||||
|
docker-compose up --build |
||||
|
|
||||
|
# Stop all services |
||||
|
docker-compose down |
||||
|
|
||||
|
# View logs |
||||
|
docker-compose logs [service-name] |
||||
|
|
||||
|
# Restart specific service |
||||
|
docker-compose restart [service-name] |
||||
|
|
||||
|
# Reset database |
||||
|
docker-compose down --volumes |
||||
|
``` |
||||
|
|
||||
|
### Development Workflow |
||||
|
|
||||
|
1. **Backend Changes**: Automatically reload with nodemon |
||||
|
2. **Frontend Changes**: Hot module replacement with Vite |
||||
|
3. **Database Changes**: Restart containers to apply schema changes |
||||
|
4. **Nginx Changes**: Restart nginx service |
||||
|
|
||||
|
### File Upload Testing |
||||
|
|
||||
|
Use the provided `.http` files in `backend/requests/` to test API endpoints: |
||||
|
- `user.http` - User registration and authentication |
||||
|
- `video.http` - Video management |
||||
|
- `medias.http` - Media file serving |
||||
|
- `comment.http` - Comment system |
||||
|
|
||||
|
## 🧪 Testing |
||||
|
|
||||
|
### Running Tests |
||||
|
|
||||
|
```bash |
||||
|
# Backend tests |
||||
|
cd backend |
||||
|
npm test |
||||
|
|
||||
|
# Frontend tests (if configured) |
||||
|
cd frontend |
||||
|
npm test |
||||
|
``` |
||||
|
|
||||
|
### Test Structure |
||||
|
|
||||
|
- **Unit Tests**: Individual component/function testing |
||||
|
- **Integration Tests**: API endpoint testing |
||||
|
- **E2E Tests**: Full application workflow testing |
||||
|
|
||||
|
Current test coverage includes: |
||||
|
- User authentication |
||||
|
- Video management |
||||
|
- Comment system |
||||
|
- Channel operations |
||||
|
- Playlist functionality |
||||
|
|
||||
|
## 🔍 Troubleshooting |
||||
|
|
||||
|
### Common Issues |
||||
|
|
||||
|
#### Authentication Problems |
||||
|
- **Blank screen on reload**: Check browser console for context errors |
||||
|
- **Login not persisting**: Verify JWT token in localStorage |
||||
|
- **Registration fails**: Check file upload size limits |
||||
|
|
||||
|
#### Media File Issues |
||||
|
- **404 on images**: Verify nginx proxy configuration |
||||
|
- **Upload fails**: Check file permissions and upload directory |
||||
|
|
||||
|
#### Docker Issues |
||||
|
- **Containers won't start**: Check port conflicts |
||||
|
- **Database connection fails**: Verify environment variables |
||||
|
- **Build failures**: Clear Docker cache with `docker system prune` |
||||
|
|
||||
|
### Debug Commands |
||||
|
|
||||
|
```bash |
||||
|
# Check container status |
||||
|
docker-compose ps |
||||
|
|
||||
|
# View service logs |
||||
|
docker-compose logs -f [service-name] |
||||
|
|
||||
|
# Access container shell |
||||
|
docker-compose exec [service-name] /bin/bash |
||||
|
|
||||
|
# Reset everything |
||||
|
docker-compose down --volumes --rmi all |
||||
|
docker system prune -a |
||||
|
``` |
||||
|
|
||||
|
### Performance Optimization |
||||
|
|
||||
|
- Enable nginx caching for static assets |
||||
|
- Implement image optimization for uploads |
||||
|
- Use CDN for media file delivery |
||||
|
- Database query optimization |
||||
|
- Frontend code splitting |
||||
|
|
||||
|
## 🤝 Contributing |
||||
|
|
||||
|
1. Fork the repository |
||||
|
2. Create a feature branch (`git checkout -b feature/amazing-feature`) |
||||
|
3. Commit your changes (`git commit -m 'Add amazing feature'`) |
||||
|
4. Push to the branch (`git push origin feature/amazing-feature`) |
||||
|
5. Open a Pull Request |
||||
|
|
||||
|
### Code Style |
||||
|
|
||||
|
- **Backend**: ESLint with Node.js rules |
||||
|
- **Frontend**: ESLint with React rules |
||||
|
- **Formatting**: Prettier for consistent code style |
||||
|
- **Commits**: Conventional commit messages |
||||
|
|
||||
|
## 📜 License |
||||
|
|
||||
|
This project is part of an educational assignment. All rights reserved. |
||||
|
|
||||
|
## 👥 Authors |
||||
|
|
||||
|
- **Developer**: [Your Name] |
||||
|
- **Institution**: [Institution Name] |
||||
|
- **Course**: 3 RESIT - Web Development |
||||
|
|
||||
|
--- |
||||
|
|
||||
|
## 📞 Support |
||||
|
|
||||
|
For support and questions: |
||||
|
- Create an issue in the repository |
||||
|
- Check the troubleshooting section |
||||
|
- Review the API documentation |
||||
|
|
||||
|
**Happy coding! 🚀** |
||||
|
|||||
Loading…
Reference in new issue