StreamVibe is a fullstack web application built using the MERN stack (MongoDB, Express, React, Node.js) and Next.js. It is designed to provide a seamless streaming experience for movies and TV shows, with a modern, responsive UI and scalable backend.
This project showcases expertise in developing scalable MERN stack applications and Next.js projects, making it ideal for developers looking for a high-quality reference or businesses seeking a robust streaming solution.
- MERN Stack: Full integration of MongoDB, Express.js, React.js, and Node.js for efficient and scalable web applications.
- Next.js: Utilizing server-side rendering (SSR) and static site generation (SSG) for performance and SEO optimization.
- Streaming Platform: Designed specifically for streaming movies and TV shows with real-time data fetching and personalized user features.
- Responsive Design: Built using Tailwind CSS to ensure full responsiveness across all devices and screen sizes.
- User Authentication: Secure user login, registration, and session management.
This project is ideal for those looking for an advanced MERN stack or Next.js project to learn from or contribute to.
- ✅ MERN Stack & Next.js: Combines MongoDB, Express, React, and Node.js with Next.js for server-side rendering and dynamic routing.
- 🚀 High Performance: Optimized for fast, real-time streaming and handling large amounts of user data.
- 🔒 User Authentication: Secure login, registration, and personalized watchlists.
- 🎥 Dynamic Movie/TV Show Search: Allows users to search for movies and TV shows in real-time.
- 🎨 Tailwind CSS for Responsive UI: Ensures a clean, modern, and fully responsive user interface.
- 🛠️ Server-Side Rendering (SSR) & Static Site Generation (SSG): Utilizes Next.js for improved SEO and performance.
To get a local copy of StreamVibe up and running, follow these steps:
To set up and run the StreamVibe project locally, follow these steps. Make sure you have both Node.js and MongoDB installed on your machine before starting. The project consists of two parts: the backend (Node.js, Express, MongoDB) and the frontend (Next.js, React, Tailwind CSS). Each part needs to be set up separately.
Start by cloning the StreamVibe repository from GitHub:
git clone https://github.com/your-username/streamvibe.git
cd streamvibe
The project contains two folders: backend and frontend. You will need to set up both independently.
- Navigate to the backend directory:
cd backend
- Install dependencies: Ensure you're inside the backend folder, then run the following command to install all necessary dependencies:
npm install
- Run the backend server: Start the backend server with the following command:
npm run dev
This will start the backend server at http://localhost:5000. Ensure MongoDB is running locally or via your MongoDB cloud service.
Now, you need to set up the frontend, which is located in the frontend folder.
- Open a new terminal window and navigate to the frontend directory:
cd frontend
- Install dependencies: Run the following command to install all frontend dependencies:
npm install
- Run the frontend development server: Start the frontend server with the following command:
npm run dev
Access the application: With both the backend and frontend servers running, you can now access the full StreamVibe application in your browser by visiting:
http://localhost:3000
Ensure MongoDB is running: The backend requires MongoDB to be running. If using MongoDB locally, ensure it is running on the default port 27017. If using MongoDB Atlas, update the connection string in your .env file accordingly.
🔗 Check out the live demo here!
If you're looking for collaboration on web or app development projects, or if you're in need of professional software development services, we’d be happy to connect. We are open to working with clients and other developers to deliver high-quality, successful projects.
- 📧 Email: amirreza.rostami.0073@gmail.com
- 🌐 Website: https://amirrezarostami.ir
- 💼 LinkedIn: LinkedIn Profile Address
- 🌐 Telegram: Telegram Address
Feel free to get in touch via email or social media if you're interested in working together.