') + ')', 'gi'); if (regex.test(text)) { found = true; var frag = document.createDocumentFragment(); var parts = text.split(regex); parts.forEach(function(part, i) { if (i % 2 === 0) { frag.appendChild(document.createTextNode(part)); } else { var span = document.createElement('span'); span.className = 'userscript-highlight'; span.textContent = part; frag.appendChild(span); } }); node.parentNode.replaceChild(frag, node); } }); } else if (node.nodeType === 1 && node.childNodes) { // element var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT']; if (!skipTags.includes(node.tagName)) { Array.from(node.childNodes).forEach(highlight); } } } highlight(document.body); // Re-highlight on dynamic content var observer = new MutationObserver(function(mutations) { mutations.forEach(function(m) { m.addedNodes.forEach(function(node) { if (node.nodeType === 1 || node.nodeType === 3) highlight(node); }); }); }); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ', 'i'); if (__m === '*' || __re.test(location.href)) { // Strip utm_, fbclid, gclid, etc. from all links on page (function() { var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content', 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid', 'ref', 'ref_src', 'source', 'medium', 'campaign']; function cleanUrl(url) { try { var u = new URL(url, window.location.origin); var changed = false; trackingParams.forEach(function(p) { if (u.searchParams.has(p)) { u.searchParams.delete(p); changed = true; } }); return changed ? u.toString() : url; } catch (e) { return url; } } function cleanLinks() { document.querySelectorAll('a[href]').forEach(function(a) { var clean = cleanUrl(a.href); if (clean !== a.href) a.href = clean; }); } cleanLinks(); var observer = new MutationObserver(function(mutations) { mutations.forEach(function(m) { m.addedNodes.forEach(function(node) { if (node.nodeType === 1) { if (node.tagName === 'A') cleanLinks(); node.querySelectorAll('a[href]').forEach(function(a) { var clean = cleanUrl(a.href); if (clean !== a.href) a.href = clean; }); } }); }); }); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); } })(); (function(){ try { var __m = "youtube.com"; var __re = new RegExp('^' + "youtube\\.com" + ', 'i'); if (__m === '*' || __re.test(location.href)) { // Auto-enable theater mode on YouTube (function() { function tryTheater() { var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]'); if (btn && !btn.classList.contains('activated')) { btn.click(); } } // Try immediately tryTheater(); // Try after navigation (SPA) var lastUrl = location.href; setInterval(function() { if (location.href !== lastUrl) { lastUrl = location.href; setTimeout(tryTheater, 500); } }, 1000); // Also try on player load var observer = new MutationObserver(tryTheater); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ', 'i'); if (__m === '*' || __re.test(location.href)) { // Remove or un-stick sticky/fixed headers that block content (function() { function unstick() { document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) { if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') { el.style.position = 'static'; el.style.top = 'auto'; el.style.zIndex = 'auto'; } }); } unstick(); var observer = new MutationObserver(unstick); observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] }); })(); } } catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); } })(); })(); GitHub - ShuvoProgram/MovieVerse: Welcome to MovieVerse, a comprehensive MERN (MongoDB, Express, React, Node.js) application that provides an immersive movie experience similar to IMDb. Discover, engage, and interact with movies, TV series, and their creators in a user-centric environment. · GitHub
Skip to content
BranchesTags

Latest commit

History

86 Commits

Folders and files

NameName
Last commit message
Last commit date
backend
backend
demo
demo
frontend
frontend
.gitignore
.gitignore
README.md
README.md

Repository files navigation

MovieVerse - Your Ultimate Movie App

Demo

demo.mp4

Introduction

MovieVerse is a comprehensive MERN (MongoDB, Express, React, Node.js) application that offers an immersive movie experience similar to IMDb. With features such as detailed movie information, cast details, trailers, user accounts, reviews, and more, Movie-verse brings the world of movies to your fingertips.

Technologies

ReactNode.jsExpress.jsMongoDBMaterial UISwiperJSFormikYupExpress ValidatorJsonwebtokenAxios

Front-end

  • Create React App: Building user interfaces with React.
  • Material UI: A popular React UI framework for creating visually appealing interfaces.
  • SwiperJS: A swiper/slider component for images and other content.
  • React Router v6: For handling navigation within the app.
  • Formik: For building and validating forms in React.
  • Yup: A schema validation library for form validation.
  • Axios: For making HTTP requests to APIs.

Back-end

  • Express: A fast and minimalist web application framework for Node.js.
  • Express Validator: Middleware for express that provides validation and sanitation of incoming data.
  • Jsonwebtoken: For handling user authentication and authorization.
  • Mongoose: An elegant MongoDB object modeling for Node.js.
  • Axios: For making HTTP requests from the server.

Features

  • Sign up and Sign in functionality for user accounts.
  • Save movies to the Favorite list (with the ability to remove items).
  • Write and manage reviews for movies (including the ability to delete reviews).
  • Search functionality for movies, TV series, and people.
  • Light and Dark theme for personalized user experience.

Usage

  1. Clone or download this repository to your local machine.

     git clone

  2. Navigate to the project directory:

cd movie-verse
```
  1. Install dependencies for the server:
cd server
npm install
  1. Create a .env file in the server directory and add the following environment variables:
 MONGODB_URL= # Your MongoDB connection string
PORT=5000
TOKEN_SECRET_KEY= # Your secret key for JWT it can be any string
TMDB_BASE_URL=https://api.themoviedb.org/3/
TMDB_KEY= # Your TMDB API key

Rescources for getting API keys:

TMDB
MongoDB

  1. Install dependencies for the client: 
    cd client
npm install

Run the app

  1. Run the server:
cd server
npm start
  1. Run the client:
cd client
npm start
  1. Open http://localhost:3000 to view it in the browser.

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

About

Welcome to MovieVerse, a comprehensive MERN (MongoDB, Express, React, Node.js) application that provides an immersive movie experience similar to IMDb. Discover, engage, and interact with movies, TV series, and their creators in a user-centric environment.

movieverse-bice.vercel.app

Topics

axios-interceptoraxios-reactformik-validationimdb-alternativejwt-authenticationmern-projectmovie-appmovie-reviewsreact-router-v6reactjsredux-thunkredux-toolkitstate-managementtdmb-apiyup-schema

Resources

Readme
Activity

Stars

1 star

Watchers

1 watching

Forks

1 fork
Report repository

Releases

Packages

Used by

Contributors

Languages