🎬 MCTS (Movies, Celebrities and TV Shows)

A React-based application that allows users to explore various movies, celebrities and TV shows. Users can register, log in, browse featured content, create watchlists, add reviews and more.

Recommended resolution on computer: 1920x1080

Recommended resolution on phone: <600px

✨ Features

🔐 Authentication

• Register: Users can register, providing First Name, Last Name, Email, Password and Confirm Password - error messages are displayed if the values are not in the correct format.
• Login: Users can log in to their account after it has been created.
• Logout: Users can log out of their accounts after they have been logged in.

Register:

Login:

📌 Header

• Navigation Buttons:
  • Movies: Redirects to the Featured Today movies page.
  • Top Rated: Redirects to the Top Rated movies page.
  • Celebrities: Redirects to the Celebrities page.
  • Search Bar: Allows users to Search for movies.
  • Contact Us: Redirects to the Contact Us page.
  • User Authentication Buttons:
    • Log In: Displays a login button if the user is not logged in.
    • User Dropdown Menu: Displays a dropdown with the user's profile image if logged in, which includes links to:
      • Profile Details: Redirects to profile details page.
      • Watchlist: Redirects to user's watchlist page.
      • Log Out: Allows users to log out.

Header when not logged in:

Header when logged in:

🏠 Home Page

• Playing Now: See the first 15 movies that are currently playing in cinemas.
• Watchlist: See the first 15 (or less) movies in your watchlist (if logged in).
• Featured Today: View the first 15 movies featured today.
• Top on MCTS This Week: See the first 15 top movies on MCTS this week.
• Top Rated: Explore the first 15 top-rated movies.
• Coming Soon: Check out the first 15 upcoming movies.
• Most Popular Celebrities: Discover the first 15 most popular celebriies.

Home Page:

📄 Section Pages

• Playing Now: See more movies that are currently playing in cinemas.
• Wathlist: See all movies in your watchlist (if logged in).
• Featured Today: View more movies featured today.
• Top on MCTS This Week: See more movies on MCTS this week.
• Top Rated: Explore more top-rated movies.
• Coming Soon: Check out more upcoming movies.
• Most Popular Celebrities: Discover more popular celebrities.

The section name depends on the section we want to visit (see the URL):

🎫 Watchlist

• Add movies to your watchlist.
• View your watchlist. If not logged in, a login button will be displayed that redirects to the login page.
• If logged in but the watchlist is empty, a Browse Movies button will be displayed that redirects to Top Rated Movies Page
• If logged in and watchlist is not empty, there will be small red buttons that allow to delete a movie from watchlist.

Watchlist if not logged in:

Watchlist if logged in, but watchlist is empty:

Watchlist if logged in and watchlist is not empty:

🎥 Movie Details

• View detailed information about a particular movie - genre, plot, director, writers, stars.
• Explore photos from the movie's scenes - poster images, backdrop images and some scenes.
• See the main characters - actors displayed with their role's name and real name.
• Add to Watchlist: Button displayed for loggen-in users that adds the particular movie.
• Reviews:
  • First two reviews are visible to all users - guests and logged-in users.
  • 'All Reviews' button that redirecs to a page displaying all reviews. (requires login)
  • 'Add' button - displays a form with Rate, Title, Review fields. (requires login)
  • 'Edit' button - allows users to edit a review. (displayed on the review card only if the user is logged in and is the author of the review)
  • 'Delete' button - allows users to delete a review. (displayed on the review card only if the user is logged in and is the author of the review)
  • 'Like' button - allows users to like a review. The number of likes for a review is displayed. (if a user tries to like a review and he is not logged in, he will be redirected to login page)

The 'Add to Watchlist' button is not displayed if the user is not logged in: When not logged in:

When logged in and the movie is not added to watchlist:

When logged in and the movie is added to watchlist:

Last two added reviews for the movie:

Edit review if logged in and the author is you (the last sentence is marked just for the screenshot - this is the edit done to the review \removed sentence):

Already updated review:

📝 All Movie Reviews

• A page which displays all the reviews for a particular movie:

Favourite Reviews

• A page which displays all the reviews that your user has likes:

🌟 Celebrity Details

• View detailed information about a particular celebrity - biography and movies that the person has participated in.
• See images of the person - from movies and big events for popular people.

Celebrity Details Page:

👩‍🚀 User Profile

• View Profile:
  • View other users' profiles - their profile picture, first name, last name and bio.
• Edit Profile:
  • If viewing your own profile, you can edit your information - profile picture, first name, last name, phone number and bio.

View other person's profile page:

View your own profile page:

📧 Contact Us

• Send Emails: Users can send emails by providing their name, email, subject, phone number (not required) and message.
• Contact Information: On the right side is displayed information about MCTS socials and location:
  • Phone number
  • Email
  • GitHub
  • LinkedIn
  • Facebook
  • Office address
• Office Location Map: A card is displayed showing the exact location of the office.

Contact Us Page:

Location Map:

🔍 404 Page

• Displayed when the user tries to access a route that doesn't exist

404 Page:

🛠 Technologies

• JavaScript: Core language for functionality.
• React: Front-end framework for building the user interface and functionality.
• CSS: Styling the application.
• Cloudinary: Storing user profile pictures.
• Firebase Deployment platform.
• Formik and Yup: Form validation.
• mdb-react-ui-kit: Styling input fields in login and register forms.
• react-bootstrap: Using carousels.
• react-leaflet: Integrating map.
• emailjs-com: Sending emails and receiving emails.
• Vitest: Unit testing.
• TMDB API: Extracting movies, celebrities and TV shows.

🧪 Data for testing purposes

• Users:
  • Email: [email protected]; password: raya123!
  • Email: [email protected]; password: anton123!
  • Email: [email protected]; password: slavi123!

🚀 Getting Started

📋 Prerequisites

• Node.js and npm installed.

🛠 Installation

1. Clone the repository:

   git clone https://github.com/rayapetkova/MCTS_WebApp.git

2. Navigate to client folder, install dependencies and run the app:

   cd .\client\
   npm install
   npm run dev

3. Open new terminal and navigate to server folder WITHOUT shutting down the terminal where the app (the client) is running:

   cd .\server\
   node .\server.js

4. Open the URL generated in the first teminal (client) and enjoy! :))

---

Thank you for using MCTS! If you have any questions or feedback, feel free to reach out!