Visit Project

Making a Movie Website

Tutorial: Creating a Simple Movie Review Website

In this tutorial, we will walk you through the steps to create a simple movie review website called Moview. This website allows users to browse and search for movies, view details about each movie, read and write reviews, and watch trailers.

Step 1: Setting Up Your Environment

Before we start, ensure you have the following tools installed:

  • Node.js
  • npm (Node Package Manager)
  • A code editor (e.g., Visual Studio Code)

Step 2: Initializing the Project

Create a new directory for your project and navigate into it:

mkdir moview
cd moview

Initialize a new Node.js project:

npm init -y

Step 3: Installing Dependencies

Install the necessary dependencies for your project:

npm install express mongoose ejs

Step 4: Setting Up the Server

Create a file named server.js and set up a basic Express server:

const express = require('express');
const app = express();
const port = 3000;

app.set('view engine', 'ejs');

app.get('/', (req, res) => {
    res.render('index');
});

app.listen(port, () => {
    console.log(`Server is running on http://localhost:${port}`);
});

Step 5: Creating the Database Schema

Set up a MongoDB database and create a schema for movies:

const mongoose = require('mongoose');

mongoose.connect('mongodb://localhost/moview', { useNewUrlParser: true, useUnifiedTopology: true });

const movieSchema = new mongoose.Schema({
    title: String,
    description: String,
    releaseDate: Date,
    trailerUrl: String,
    reviews: [{ user: String, comment: String, rating: Number }]
});

const Movie = mongoose.model('Movie', movieSchema);

Step 6: Building the Frontend

Create an index.ejs file in a views directory and add the following HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Moview</title>
</head>
<body>
    <h1>Welcome to Moview</h1>
    <ul>
        <% movies.forEach(movie => { %>
            <li>
                <h2><%= movie.title %></h2>
                <p><%= movie.description %></p>
                <a href="<%= movie.trailerUrl %>">Watch Trailer</a>
            </li>
        <% }) %>
    </ul>
</body>
</html>

Step 7: Fetching and Displaying Movies

Modify your server.js to fetch movies from the database and pass them to the view:

app.get('/', async (req, res) => {
    const movies = await Movie.find();
    res.render('index', { movies });
});

Step 8: Adding Reviews

Create a form in index.ejs to submit reviews:

<form action="/review" method="POST">
    <input type="text" name="user" placeholder="Your Name" required>
    <textarea name="comment" placeholder="Your Review" required></textarea>
    <input type="number" name="rating" min="1" max="5" required>
    <button type="submit">Submit Review</button>
</form>

Handle the form submission in server.js:

app.post('/review', async (req, res) => {
    const { user, comment, rating } = req.body;
    const movie = await Movie.findById(req.body.movieId);
    movie.reviews.push({ user, comment, rating });
    await movie.save();
    res.redirect('/');
});

Conclusion

You have now created a simple movie review website. Users can browse movies, watch trailers, and submit reviews. This is a basic implementation, and you can expand it with more features like user authentication, advanced search, and more.

Happy coding!