{"id":30660593,"url":"https://github.com/d7omdev/watchlist","last_synced_at":"2025-08-31T14:11:31.140Z","repository":{"id":306928662,"uuid":"1027717238","full_name":"d7omdev/watchlist","owner":"d7omdev","description":null,"archived":false,"fork":false,"pushed_at":"2025-07-28T13:08:52.000Z","size":251,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-07-28T14:38:24.101Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://watchlist.d7om.dev","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"isc","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/d7omdev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-07-28T12:31:24.000Z","updated_at":"2025-07-28T13:23:33.000Z","dependencies_parsed_at":"2025-07-28T14:38:30.224Z","dependency_job_id":"e6c528d1-f95b-4dd0-a39d-9ffe5ca3e058","html_url":"https://github.com/d7omdev/watchlist","commit_stats":null,"previous_names":["d7omdev/watchlist"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/d7omdev/watchlist","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/d7omdev%2Fwatchlist","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/d7omdev%2Fwatchlist/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/d7omdev%2Fwatchlist/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/d7omdev%2Fwatchlist/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/d7omdev","download_url":"https://codeload.github.com/d7omdev/watchlist/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/d7omdev%2Fwatchlist/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":272988919,"owners_count":25026961,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-31T02:00:09.071Z","response_time":79,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-08-31T14:11:30.505Z","updated_at":"2025-08-31T14:11:31.126Z","avatar_url":"https://github.com/d7omdev.png","language":"TypeScript","readme":"# WatchList\n\nA simple and modern web app to track your favorite movies and TV shows. Built with React, TypeScript, Node.js, and MySQL.\n\n## Features\n\n### Core Functionality\n- ✅ **Content Management**: Add, edit, and delete movies and TV shows with detailed information\n- ✅ **Advanced UI**: Responsive data table with infinite scroll and modern components\n- ✅ **User Authentication**: Secure login/register system with JWT tokens\n- ✅ **File Uploads**: Support for media file uploads with validation\n- ✅ **Data Validation**: Comprehensive input validation on both frontend and backend\n- ✅ **Real-time Updates**: Live data synchronization across the application\n\n### Technical Features\n- ✅ **Type Safety**: Full TypeScript implementation with strict mode\n- ✅ **RESTful API**: Well-structured API with proper error handling and status codes\n- ✅ **Database ORM**: Drizzle ORM with MySQL for type-safe database operations\n- ✅ **Modern UI**: Shadcn UI components with TailwindCSS styling\n- ✅ **Performance**: Optimized builds and efficient data loading\n- ✅ **Security**: CORS configuration, input sanitization, and secure authentication\n\n## Technology Stack\n\n### Frontend\n- **React 19** with Vite and TypeScript for modern development\n- **Shadcn UI** for accessible, customizable components\n- **TailwindCSS v4** for utility-first styling\n- **React Hook Form** with Zod validation for form management\n- **Tanstack Table** for advanced data table functionality\n- **Lucide React** for consistent iconography\n\n### Backend\n- **Node.js** with Express and TypeScript for robust server-side logic\n- **Drizzle ORM** for type-safe database operations\n- **MySQL 8.0+** as the primary database\n- **OpenAuth** for secure authentication\n- **Zod** for runtime schema validation\n- **Multer** for file upload handling\n- **CORS** configured for secure cross-origin requests\n\n### Development Tools\n- **ESLint** with TypeScript rules for code quality\n- **Vite** for fast development and optimized builds\n- **Drizzle Kit** for database migrations and studio\n- **Concurrently** for running multiple development servers\n\n## Prerequisites\n\nBefore getting started, ensure you have the following installed:\n\n- **Node.js** (v18.0.0 or higher) - [Download here](https://nodejs.org/)\n- **MySQL** (v8.0 or higher) - [Download here](https://dev.mysql.com/downloads/)\n- **npm** (comes with Node.js) or **yarn** package manager\n- **Git** for version control\n\n### System Requirements\n- **OS**: Windows 10+, macOS 10.15+, or Linux (Ubuntu 18.04+)\n- **RAM**: Minimum 4GB, recommended 8GB+\n- **Storage**: At least 1GB free space for dependencies and builds\n\n## Quick Start\n\n### Option 1: Docker (Recommended)\n\n```bash\n# Clone the repository\ngit clone https://github.com/d7omdev/watchlist.git\ncd watchlist/backend\n\n# Copy environment file and configure\ncp .env.example .env\n# Edit .env with your preferred settings\n\n# Start with Docker Compose\ndocker-compose up -d\n\n# The backend will be available at http://localhost:3001\n# Database will be available at localhost:3306\n```\n\n### Option 2: Manual Setup\n\n```bash\n# Clone and setup\ngit clone https://github.com/d7omdev/watchlist.git\ncd watchlist\nnpm run setup\n\n# Start development servers\nnpm run dev\n```\n\nThe app will be available at http://localhost:5173\n\n### Manual Setup\n\n```bash\n# 1. Install dependencies\nnpm run install:all\n\n# 2. Configure database\ncp backend/.env.example backend/.env\n# Edit backend/.env with your MySQL credentials\n\n# 3. Create database\nmysql -u root -p -e \"CREATE DATABASE watchlist;\"\n\n# 4. Setup database\nnpm run db:setup\n\n# 5. Start servers\nnpm run dev\n```\n\n### Option 3: Production Build\n\n```bash\n# Build for production\nnpm run build\n\n# Start production servers\nnpm start\n\n# Test production build locally\nnpm run test:build\n```\n\n## Application URLs\n\n| Environment | Frontend | Backend API |\n|-------------|----------|-------------|\n| Development | http://localhost:5173 | http://localhost:3001 |\n| Production | http://localhost:4173 | http://localhost:3001 |\n\n### Health Check\nVisit http://localhost:3001/health to verify the backend is running correctly.\n\n## Detailed Setup Instructions\n\n### Manual Setup (Alternative)\n\nIf you prefer to set up each part manually:\n\n#### Backend Setup\n\n```bash\ncd backend\n\n# Install dependencies\nnpm install\n\n# Generate database migrations\nnpm run db:generate\n\n# Run database migrations\nnpm run db:migrate\n\n# Optional: Add sample data\nnpm run db:seed\n\n# Start the development server\nnpm run dev\n```\n\n#### Frontend Setup\n\n```bash\ncd frontend\n\n# Install dependencies\nnpm install\n\n# Build to verify everything works\nnpm run build\n\n# Start the development server\nnpm run dev\n```\n\n## Available Scripts\n\n### Root Scripts (Recommended)\n\n- `npm run setup` - Install all dependencies and setup database\n- `npm run dev` - Start both frontend and backend in development mode\n- `npm run build` - Build both frontend and backend for production\n- `npm run start` - Start both frontend and backend in production mode\n- `npm run test:build` - Test that both projects build successfully\n- `npm run db:setup` - Generate and run database migrations\n- `npm run db:seed` - Add sample data to database\n- `npm run clean` - Remove all node_modules and build folders\n\n### Individual Project Scripts\n\n#### Backend (`/backend`)\n\n- `npm run dev` - Start development server with hot reload\n- `npm run build` - Build for production\n- `npm start` - Start production server\n- `npm run db:generate` - Generate database migrations\n- `npm run db:migrate` - Run database migrations\n- `npm run db:studio` - Open Drizzle Studio (database GUI)\n- `npm run db:seed` - Add sample data\n\n#### Frontend (`/frontend`)\n\n- `npm run dev` - Start development server\n- `npm run build` - Build for production\n- `npm run preview` - Preview production build\n- `npm run lint` - Run ESLint\n- `npm run type-check` - Run TypeScript type checking\n\n## API Documentation\n\n### Authentication Endpoints\n| Method | Endpoint | Description | Auth Required |\n|--------|----------|-------------|---------------|\n| POST | `/api/auth/register` | Register new user | No |\n| POST | `/api/auth/login` | User login | No |\n| GET | `/api/auth/me` | Get current user | Yes |\n\n### Entry Management\n| Method | Endpoint | Description | Auth Required |\n|--------|----------|-------------|---------------|\n| GET | `/api/entries` | Get all entries with pagination | Yes |\n| GET | `/api/entries/:id` | Get single entry | Yes |\n| POST | `/api/entries` | Create new entry | Yes |\n| PUT | `/api/entries/:id` | Update entry | Yes |\n| DELETE | `/api/entries/:id` | Delete entry | Yes |\n\n### File Upload\n| Method | Endpoint | Description | Auth Required |\n|--------|----------|-------------|---------------|\n| POST | `/api/upload` | Upload media files | Yes |\n\n### System\n| Method | Endpoint | Description | Auth Required |\n|--------|----------|-------------|---------------|\n| GET | `/health` | Health check endpoint | No |\n\n### Query Parameters\n- **Pagination**: `?page=1\u0026limit=20`\n- **Search**: `?search=inception`\n- **Filter**: `?type=movie\u0026year=2010`\n\n## Database Schema\n\nThe application uses a well-structured MySQL database with the following main tables:\n\n### Users Table\n```sql\nCREATE TABLE users (\n  id INT PRIMARY KEY AUTO_INCREMENT,\n  email VARCHAR(255) UNIQUE NOT NULL,\n  password_hash VARCHAR(255) NOT NULL,\n  name VARCHAR(255) NOT NULL,\n  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,\n  updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP\n);\n```\n\n### Entries Table\n```sql\nCREATE TABLE entries (\n  id INT PRIMARY KEY AUTO_INCREMENT,\n  user_id INT NOT NULL,\n  title VARCHAR(255) NOT NULL,\n  type ENUM('movie', 'tv_show') NOT NULL,\n  director VARCHAR(255) NOT NULL,\n  budget VARCHAR(100) NOT NULL,\n  location VARCHAR(255) NOT NULL,\n  duration VARCHAR(100) NOT NULL,\n  year_time VARCHAR(100) NOT NULL,\n  description TEXT,\n  image_url VARCHAR(500),\n  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,\n  updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,\n  FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE\n);\n```\n\n### Indexes\n- Primary keys on all tables\n- Unique index on `users.email`\n- Foreign key index on `entries.user_id`\n- Composite index on `entries(user_id, created_at)` for efficient pagination\n\n## Sample Data\n\nHere's an example of the data structure:\n\n```json\n{\n  \"title\": \"Inception\",\n  \"type\": \"Movie\",\n  \"director\": \"Christopher Nolan\",\n  \"budget\": \"$160M\",\n  \"location\": \"LA, Paris, Tokyo\",\n  \"duration\": \"148 min\",\n  \"yearTime\": \"2010\",\n  \"description\": \"A mind-bending thriller about dreams within dreams\"\n}\n```\n\n## Development Guidelines\n\n- Follow the code style guidelines in `AGENTS.md`\n- Use TypeScript with strict mode enabled\n- Implement proper error handling and validation\n- Follow RESTful API conventions\n- Use functional components with React Hooks\n- Maintain responsive design principles\n\n## Production Deployment\n\nThis application is production-ready with optimized builds, security configurations, and deployment scripts.\n\n### Deployment Platforms\n\n#### Frontend Deployment (Vercel - Recommended)\n```bash\n# 1. Connect GitHub repository to Vercel\n# 2. Configure build settings:\n#    - Framework: Vite\n#    - Root Directory: frontend\n#    - Build Command: npm run build\n#    - Output Directory: dist\n\n# 3. Set environment variables:\nVITE_API_BASE_URL=https://your-backend-url.com/api\n```\n\n#### Backend Deployment (Railway/Render - Recommended)\n```bash\n# 1. Connect GitHub repository\n# 2. Set environment variables:\nDATABASE_URL=mysql://user:pass@host:port/database\nJWT_SECRET=your-super-secure-jwt-secret\nNODE_ENV=production\nPORT=3001\n\n# 3. Configure build settings:\n#    - Build Command: npm run build\n#    - Start Command: npm start\n```\n\n### Docker Deployment\n\n#### Using Docker Compose (Recommended)\n```bash\n# 1. Clone repository and navigate to backend\ncd backend\n\n# 2. Copy and configure environment\ncp .env.example .env\n# Edit .env with your settings\n\n# 3. Start services\ndocker-compose up -d\n\n# 4. Check logs\ndocker-compose logs -f backend\n```\n\n#### Using Dockerfile only\n```bash\n# Build the image\ndocker build -t watchlist-backend .\n\n# Run with environment file\ndocker run -d \\\n  --name watchlist-backend \\\n  --env-file .env \\\n  -p 3001:3001 \\\n  watchlist-backend\n```\n\n#### Environment Variables for Docker\nThe Docker setup automatically reads from a `.env` file in the backend directory. Key variables:\n\n```env\n# Database (automatically configured in docker-compose)\nDATABASE_URL=mysql://watchlist_user:watchlist_password@db:3306/watchlist\n\n# Authentication\nJWT_SECRET=your-super-secure-jwt-secret-key\nJWT_EXPIRES_IN=7d\n\n# Server\nNODE_ENV=production\nPORT=3001\nCORS_ORIGIN=http://localhost:5173\n```\n\n#### Database Options\n- **Production**: PlanetScale, AWS RDS, or Google Cloud SQL\n- **Development**: Local MySQL or Docker container\n\n### Environment Variables\n\n#### Backend (.env)\n```env\n# Database\nDATABASE_URL=mysql://username:password@localhost:3306/watchlist\n\n# Authentication\nJWT_SECRET=your-super-secure-jwt-secret-key\nJWT_EXPIRES_IN=7d\n\n# Server\nNODE_ENV=production\nPORT=3001\nCORS_ORIGIN=https://your-frontend-domain.com\n\n# File Upload (if using cloud storage)\nUPLOAD_MAX_SIZE=10485760\nALLOWED_FILE_TYPES=image/jpeg,image/png,image/webp\n```\n\n#### Frontend (.env)\n```env\nVITE_API_BASE_URL=https://your-backend-url.com/api\nVITE_APP_NAME=WatchList\n```\n\n## Troubleshooting\n\n### Common Issues \u0026 Solutions\n\n#### Database Issues\n| Problem | Solution |\n|---------|----------|\n| Connection refused | Ensure MySQL is running: `sudo systemctl start mysql` |\n| Access denied | Check credentials in `backend/.env` |\n| Database doesn't exist | Run: `mysql -u root -p -e \"CREATE DATABASE watchlist;\"` |\n| Migration errors | Reset: `npm run db:generate \u0026\u0026 npm run db:migrate` |\n\n#### Development Issues\n| Problem | Solution |\n|---------|----------|\n| Port already in use | Kill process: `lsof -ti:3001 \\| xargs kill -9` |\n| CORS errors | Verify backend URL in frontend config |\n| Build failures | Clear cache: `npm run clean \u0026\u0026 npm run setup` |\n| TypeScript errors | Run: `npm run type-check` in respective directory |\n\n#### Performance Issues\n| Problem | Solution |\n|---------|----------|\n| Slow loading | Check database indexes and query optimization |\n| Memory leaks | Monitor with `npm run dev` and check for unclosed connections |\n| Large bundle size | Analyze with `npm run build` and check for unused imports |\n\n### Debug Commands\n```bash\n# Check system health\nnpm run health\n\n# Test database connection\nnpm run test:mysql\n\n# Verify builds work\nnpm run test:build\n\n# Check for TypeScript errors\ncd frontend \u0026\u0026 npm run type-check\ncd backend \u0026\u0026 npx tsc --noEmit\n```\n\n### Development Workflow\n1. **Fork** the repository and create a feature branch\n2. **Follow** the code style guidelines in `CODE.md`\n3. **Add** proper TypeScript types for all new features\n4. **Include** comprehensive error handling and validation\n5. **Test** thoroughly with `npm run test:build`\n6. **Document** any new features or API changes\n7. **Submit** a pull request with a clear description\n\n### Code Standards\n- Use TypeScript with strict mode enabled\n- Follow existing naming conventions and file structure\n- Add JSDoc comments for complex functions\n- Ensure all tests pass and builds succeed\n- Maintain backwards compatibility when possible\n\n### Security Features\n- JWT-based authentication with secure token handling\n- Input validation and sanitization on all endpoints\n- CORS configuration for cross-origin security\n- SQL injection prevention through parameterized queries\n- File upload restrictions and validation\n\n## License\n\nThis project is licensed under the **ISC License** - see the [LICENSE](LICENSE) file for details.\n\n## Support\n\n- 📖 **Documentation**: Check this README and `COMMANDS.md`\n- 🐛 **Bug Reports**: [Create an issue](https://github.com/d7omdev/watchlist/issues)\n- 📧 **Email**: hello@d7om.dev\n\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fd7omdev%2Fwatchlist","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fd7omdev%2Fwatchlist","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fd7omdev%2Fwatchlist/lists"}