Astri4-4
5 months ago
1 changed files with 436 additions and 48 deletions
@ -1,48 +1,436 @@ |
|||
# 3 RESIT |
|||
|
|||
## 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. |
|||
|
|||
## Fonctionnalités |
|||
- **Partie 1** : Création d'un serveur HTTP permettant de servir des pages HTML. |
|||
- **Partie 2** : Création d'une API REST permettant de gérer les vidéos, les utilisateurs et les commentaires. |
|||
- **Partie 3** : Création d'une interface utilisateur permettant de visualiser les vidéos, de les commenter et de les liker. |
|||
|
|||
## Installation |
|||
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. |
|||
|
|||
### Installation avec Docker |
|||
1. Assurez-vous d'avoir Docker et Docker Compose installé sur votre machine. |
|||
|
|||
2. Entrer les variables d'environnement dans le fichier `.env` : |
|||
```.env |
|||
BACKEND_PORT= |
|||
DB_USER= |
|||
DB_NAME= |
|||
DB_HOST= |
|||
DB_PASSWORD= |
|||
JWT_SECRET= |
|||
LOG_FILE= |
|||
``` |
|||
3. Lancer le projet avec Docker Compose : |
|||
```bash |
|||
docker-compose up --build |
|||
``` |
|||
# FreeTube - Video Sharing Platform |
|||
|
|||
 |
|||
|
|||
## 📋 Table of Contents |
|||
- [Overview](#overview) |
|||
- [Features](#features) |
|||
- [Tech Stack](#tech-stack) |
|||
- [Prerequisites](#prerequisites) |
|||
- [Installation](#installation) |
|||
- [Configuration](#configuration) |
|||
- [Usage](#usage) |
|||
- [API Documentation](#api-documentation) |
|||
- [Project Structure](#project-structure) |
|||
- [Development](#development) |
|||
- [Testing](#testing) |
|||
- [Troubleshooting](#troubleshooting) |
|||
- [Contributing](#contributing) |
|||
|
|||
## 🎯 Overview |
|||
|
|||
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. |
|||
|
|||
This project is part of a 3-part development resit assignment focusing on: |
|||
- **Part 1**: HTTP server serving HTML pages |
|||
- **Part 2**: REST API for video, user, and comment management |
|||
- **Part 3**: Interactive frontend user interface |
|||
|
|||
## ✨ Features |
|||
|
|||
### 🔐 Authentication System |
|||
- User registration with profile picture upload |
|||
- Secure login with JWT tokens |
|||
- Persistent sessions with localStorage |
|||
- Protected routes and authentication guards |
|||
- Profile management and display |
|||
|
|||
### 📹 Video Management |
|||
- Video upload with thumbnail generation |
|||
- Video streaming and playback |
|||
- Video metadata management |
|||
- Video search and filtering |
|||
|
|||
### 👥 User Features |
|||
- User profiles with customizable avatars |
|||
- Channel creation and management |
|||
- Subscription system |
|||
- User activity tracking |
|||
|
|||
### Installation manuelle |
|||
### 💬 Social Features |
|||
- Video commenting system |
|||
- Like/dislike functionality |
|||
- Video recommendations |
|||
- Trending videos section |
|||
|
|||
// TODO: Ajouter les instructions d'installation manuelle |
|||
### 🎨 Frontend Features |
|||
- Responsive React-based UI |
|||
- Modern design with Tailwind CSS |
|||
- Client-side routing with React Router |
|||
- Real-time updates and interactions |
|||
|
|||
## Utilisation |
|||
- 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`. |
|||
## 🛠 Tech Stack |
|||
|
|||
## Commandes utiles |
|||
- Pour supprimer les conteneurs Docker : |
|||
### 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 |
|||
docker-compose down --volumes // Supprime les volumes pour réinitialiser la base de données |
|||
git clone <repository-url> |
|||
cd 3RESIT_DOCKER |
|||
``` |
|||
- Pour vider la base de données : |
|||
|
|||
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 exec resit_backend node tools flush // Vide la base de données sans supprimer les conteneurs ni les tables |
|||
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