WeTube is a modern movie discovery platform built with Next.js, featuring real-time recommendations, vector search, and an interactive user interface powered by KendoUI components.
-
Advanced Search Capabilities
- Vector-based similarity search
- Real-time movie recommendations
- Full-text search with MongoDB
-
Modern UI Components
- Responsive design with KendoUI React components
- Infinite scroll for movie listings
- Skeleton loading states
- Mobile-first approach
-
Performance Optimized
- Server-side rendering with Next.js
- Image optimization
- Caching strategies
- MongoDB vector search integration
-
Accessibility
- WCAG 2.1 compliant
- Keyboard navigation support
- Screen reader friendly
- Semantic HTML structure
-
Frontend
- Next.js 15.2
- React 19
- KendoUI React Components
- TailwindCSS
-
Backend
- MongoDB with Vector Search
- Google Gemini AI
- Langchain
- Upstash Redis
-
Testing
- Playwright for E2E testing
- Axe for accessibility testing
- Node.js 18.x or higher
- MongoDB Atlas account with Vector Search enabled
- Google AI API key
- Upstash Redis account
-
Clone the repository
git clone https://github.com/herberthk/wetube.git cd wetube -
Install dependencies
npm install # or yarn install # or bun install
-
Environment Setup Create a
.envfile in the root directory:MONGODB_URI=your_mongodb_uri GOOGLE_API_KEY=your_google_ai_api_key UPSTASH_REDIS_TOKEN=your_redis_token
-
Start the development server
npm run dev # or yarn dev # or bun run dev
The project includes comprehensive testing setup:
# Run all tests
bun run test
# Run tests with UI
bun run test:ui
# Debug tests
bun run test:debug
# View test reports
bun run test:report- Integration tests for all pages
- Accessibility compliance testing
- Cross-browser compatibility
- Mobile responsiveness
- API integration tests
wetube/
├── app/ # Next.js app directory
│ ├── movie/ # Movie details pages
│ ├── search/ # Search results pages
│ └── page.tsx # Home page
├── components/ # React components
├── lib/ # Utility functions and actions
│ ├── actions/ # Server actions
│ └── mongodb.ts # Database configuration
├── public/ # Static assets
├── tests/ # Test files
│ ├── home.spec.ts
│ ├── movie-details.spec.ts
│ ├── search.spec.ts
│ └── accessibility.spec.ts
└── types/ # TypeScript type definitions
GET /api/movies- Fetch paginated movie listingsGET /api/movies/search- Search moviesGET /api/movies/:id- Get movie detailsPOST /api/movies/:id/comments- Add movie comments
The application is optimized for deployment on Vercel:
- Connect your GitHub repository to Vercel
- Configure environment variables
- Deploy with
vercel deploy
- Implemented caching strategies
- Optimized images with Next.js Image component
- MongoDB indexing for faster queries
- Client-side caching for recommendations
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE.md file for details
- Next.js for the amazing framework
- KendoUI for the UI components
- MongoDB for vector search capabilities
- Google Gemini for AI features
For support, email herberthk100@gmail.com or Linkedin.
Built with ❤️ by Herbert