A full-stack video streaming web application built with the MERN Stack (MongoDB, Express.js, React, Node.js) with TypeScript and exploring data crawling techniques for content aggregation.
This project serves as a comprehensive learning platform for:
- MongoDB: Database design, schema modeling, and data relationships
- Express.js: RESTful API development, middleware implementation, and server architecture
- React: Component-based UI development, state management with Redux Toolkit, and modern hooks
- Node.js: Server-side JavaScript, TypeScript integration, and package management
- Learning web scraping techniques to gather movie/video content data
- Understanding data extraction, cleaning, and normalization processes
- Implementing automated data collection pipelines
- Working with external APIs for content metadata
- Connecting frontend and backend seamlessly with type safety
- Authentication and authorization implementation with JWT
- Real-time data updates and user interactions
- Deployment and production considerations
- β User authentication system (register, login, logout)
- β JWT-based secure session management
- β Modern responsive UI with Tailwind CSS v4
- β Component-based React 19 architecture
- β Movie search and discovery
- β Admin movie management dashboard
- β Rating and review system
- β Movie request system for users
- β Video streaming capabilities
- π User watchlists and favorites
- π Movie recommendations AI system
- π Enhanced user profiles
- π Movie request status for each user
- π Data crawling for content aggregation
- React 19 with TypeScript
- Vite for fast development and building
- Tailwind CSS for styling and responsive design
- Redux Toolkit for state management
- React Router for navigation
- React Slick for carousels and sliders
- React Toastify for notifications
- Node.js with Express.js 5 framework
- TypeScript for type safety
- MongoDB with Mongoose 8 ODM
- JWT for authentication
- bcryptjs for password hashing
- Multer for file uploads
- Swagger/OpenAPI for API documentation
- Cookie Parser for session management
- TypeScript 5.8+ for type safety across the stack
- ESLint 9 for code quality
- TSX for TypeScript execution with watch mode
- Vite for frontend development server
movie-application/
βββ README.md # Project documentation
βββ TODO.md # Development roadmap
βββ backend/ # Express.js API server with TypeScript
β βββ package.json # Backend dependencies and scripts
β βββ tsconfig.json # TypeScript configuration
β βββ src/
β β βββ index.ts # Server entry point
β β βββ config/ # Database and app configuration
β β βββ controllers/ # Business logic handlers
β β βββ docs/ # API documentation (Swagger)
β β βββ middlewares/ # Custom middleware functions
β β βββ models/ # MongoDB data models
β β βββ routes/ # API route definitions
β β βββ types/ # TypeScript type definitions
β β βββ utils/ # Helper functions
β βββ uploads/ # Uploaded files storage
βββ frontend/ # React application with TypeScript
βββ package.json # Frontend dependencies and scripts
βββ tsconfig.json # TypeScript configuration
βββ vite.config.ts # Vite configuration
βββ public/ # Static assets
βββ src/
βββ App.tsx # Root component
βββ main.tsx # Entry point
βββ components/ # Reusable UI components
βββ pages/ # Page components
β βββ Admin/ # Admin dashboard pages
β βββ Auth/ # Authentication pages
β βββ Movies/ # Movie-related pages
β βββ User/ # User profile pages
βββ redux/ # Redux state management
β βββ api/ # API integration
β βββ features/ # Redux slices
βββ assets/ # Static assets
βββ hooks/ # Custom React hooks
βββ types/ # TypeScript type definitions
- Node.js (v18 or higher)
- MongoDB (local installation or MongoDB Atlas)
- npm or pnpm package manager
- Clone the repository
- Create a
.envfile in the backend directory:
MONGO_URI=your_mongodb_connection_string
PORT=3000
JWT_SECRET=your_secret_key
NODE_ENV=development# Install and run backend
cd backend
npm install
npm run dev # Start development server with TSX watch
# In another terminal, install and run frontend
cd frontend
npm install
npm run dev # Starts Vite dev server
# For production build:
cd backend
npm run build # Compile TypeScript
npm run start # Run compiled JS
cd frontend
npm run build # Build production frontend- Project setup and folder structure
- Express.js server with TypeScript configuration
- MongoDB connection and User model
- JWT authentication system
- React 19 app with TypeScript setup
- Tailwind CSS v4 styling system
- Movie data model and API implementation
- Search functionality with filters
- User interface components and pages
- State management with Redux Toolkit
- Admin dashboard for content management
- User movie request system
- API documentation with Swagger
- Rating and review system
- User watchlist and favorites
- Performance optimization and caching
- Configure Docker containers
- Testing and deployment
- MongoDB Documentation
- Express.js Guide
- React 19 Documentation
- Node.js Documentation
- TypeScript Handbook
- Vite Documentation
- Tailwind CSS v4 Documentation
- Redux Toolkit Documentation
- React Router v7 Documentation
This is a learning project!
- Check the
TODO.mdfor current tasks - Create feature branches for new functionality
- Follow the existing code structure and TypeScript conventions
- Ensure type safety across the codebase
- Test changes before committing
This project is created for educational purposes!
Learning Objective: Building a complete understanding of full-stack TypeScript web development while creating a functional video streaming platform.
Next Steps:
- Complete the user watchlist and favorites feature
- Explore data crawling for content aggregation
- Add Redis for caching and performance optimization
This project represents a journey through modern web development technologies and practices. Each feature implemented contributes to a deeper understanding of the MERN stack ecosystem with TypeScript.