geminiSharma-Internship

app.js

@@ -14,6 +14,8 @@ const express = require('express');
 const hbs = require('hbs');
 
 const app = express();
+const path = require('path');
+const Movie = require('./models/Movie.model');
 
 // ℹ️ This function is getting exported from the config folder. It runs most middlewares
 require('./config')(app);
@@ -24,10 +26,40 @@ const capitalized = string => string[0].toUpperCase() + string.slice(1).toLowerC
 
 app.locals.title = `${capitalized(projectName)}- Generated with Ironlauncher`;
 
-// 👇 Start handling routes here
+// Set up Handlebars as the view engine
+app.set('view engine', 'hbs');
+app.set('views', path.join(__dirname, 'views'));
+
+// Serve static files from the public directory
+app.use(express.static(path.join(__dirname, 'public')));
+
+// Define routes
 const index = require('./routes/index');
 app.use('/', index);
 
+app.get('/movies', async (req, res) => {
+    try {
+        const movies = await Movie.find(); 
+        res.render('movies', { movies }); 
+    } catch (error) {
+        console.error('Error fetching movies:', error);
+        res.status(500).send('Internal Server Error');
+    }
+});
+
+app.get('/movie/:id', async(req, res) => {
+    try {
+        const movie = await Movie.findById(req.params.id); 
+        if (!movie) {
+            return res.status(404).send('Movie not found');
+        }
+        res.render('movieDetails', { movie });
+    } catch (error) {
+        console.error('Error fetching movie details:', error);
+        res.status(500).send('Internal Server Error');
+    }
+});
+
 // ❗ To handle errors. Routes that don't exist or errors that you handle in specific routes
 require('./error-handling')(app);
 

config/index.js

@@ -28,11 +28,11 @@ module.exports = (app) => {
   app.use(cookieParser());
 
   // Normalizes the path to the views folder
-  app.set("views", path.join(__dirname, "..", "views"));
+  app.set("views", path.join(__dirname, "views"));
   // Sets the view engine to handlebars
   app.set("view engine", "hbs");
   // Handles access to the public folder
-  app.use(express.static(path.join(__dirname, "..", "public")));
+  app.use(express.static(path.join(__dirname, "public")));
 
   // Handles access to the favicon
   app.use(favicon(path.join(__dirname, "..", "public", "images", "favicon.ico")));

db/index.js

@@ -5,7 +5,7 @@ const mongoose = require("mongoose");
 // ℹ️ Sets the MongoDB URI for our app to have access to it.
 // If no env has been set, we dynamically set it to whatever the folder name was upon the creation of the app
 
-const MONGO_URI = process.env.MONGODB_URI || "mongodb://localhost/lab-express-cinema";
+const MONGO_URI = process.env.MONGODB_URI || "mongodb://localhost:27017/lab-express-cinema";
 
 mongoose
   .connect(MONGO_URI)

models/Movie.model.js

@@ -0,0 +1,32 @@
+const mongoose = require('mongoose');
+
+const movieSchema = new mongoose.Schema({
+  title: {
+    type: String,
+    required: true
+  },
+  director: {
+    type: String,
+    required: true
+  },
+  stars: {
+    type: [String],
+    required: true
+  },
+  image: {
+    type: String,
+    required: true
+  },
+  description: {
+    type: String,
+    required: true
+  },
+  showtimes: {
+    type: [String],
+    required: true
+  }
+});
+
+const Movie = mongoose.model('Movie', movieSchema);
+
+module.exports = Movie;

public/stylesheets/index.css

@@ -0,0 +1,44 @@
+body, h1, img {
+    margin: 0;
+    padding: 0;
+}
+
+
+.container {
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 20px;
+}
+
+
+.header {
+    text-align: center;
+    margin-bottom: 20px;
+}
+
+h1 {
+    font-size: 2em;
+    margin-bottom: 20px;
+}
+
+
+.header img {
+    max-width: 100%;
+    height: auto;
+    margin-bottom: 20px;
+}
+
+
+.button {
+    display: inline-block;
+    padding: 10px 20px;
+    background-color: #007bff;
+    color: #fff;
+    text-decoration: none;
+    border-radius: 5px;
+    transition: background-color 0.3s ease;
+}
+
+.button:hover {
+    background-color: #0056b3;
+}

public/stylesheets/style.css

@@ -1,8 +1,50 @@
-body {
-  padding: 50px;
-  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
+body, h1, h2, img {
+  margin: 0;
+  padding: 0;
 }
 
-a {
-  color: #00B7FF;
+.container {
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+h1 {
+  font-size: 2em;
+  margin-bottom: 20px;
+}
+
+.movie-list {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 20px;
+}
+
+.movie {
+  border: 1px solid #ccc;
+  padding: 10px;
+  text-align: center;
+}
+
+.movie img {
+  max-width: 100%;
+  height: auto;
+}
+
+.movie h2 {
+  margin-top: 10px;
+}
+
+.movie .button {
+  display: inline-block;
+  margin-top: 10px;
+  padding: 5px 10px;
+  background-color: #007bff;
+  color: #fff;
+  text-decoration: none;
+  border-radius: 5px;
+}
+
+.movie .button:hover {
+  background-color: #0056b3;
 }

routes/index.js

@@ -4,4 +4,5 @@ const router = express.Router();
 /* GET home page */
 router.get('/', (req, res, next) => res.render('index'));
 
+
 module.exports = router;

seeds/movies.seed.js

@@ -1,3 +1,7 @@
+const mongoose = require('mongoose');
+const Movie = require('../models/Movie.model');
+
+
 const movies = [
     {
       title: "A Wrinkle in Time",
@@ -86,4 +90,22 @@ const movies = [
 
 
 
-// ... your code here
+// ... your code here
+mongoose.connect('mongodb://localhost:27017/lab-express-cinema', { useNewUrlParser: true, useUnifiedTopology: true })
+    .then(() => {
+        console.log('Connected to MongoDB');
+
+        Movie.create(movies)
+            .then((createdMovies) => {
+                console.log(`${createdMovies.length} movies have been created`);
+            })
+            .catch((error) => {
+                console.error('Error seeding database:', error);
+            })
+            .finally(() => {
+                mongoose.connection.close();
+            });
+    })
+    .catch((error) => {
+        console.error('Error connecting to MongoDB:', error);
+    });

views/index.hbs

@@ -1,2 +1,18 @@
-<h1>{{title}}</h1>
-<p>Welcome to {{title}}</p>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Home</title>
+    <link href="/stylesheets/index.css" rel="stylesheet">
+</head>
+<body>
+    <div class="container">
+        <div class="header">
+            <h1>Welcome to our Movie Database</h1>
+            <img src="https://images.pexels.com/photos/375885/pexels-photo-375885.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="Popcorn" >
+            <a href="/movies" class="button">Explore Movies</a> 
+        </div>
+    </div>
+</body>
+</html>

views/movieDetails.hbs

@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{{ movie.title }} - Movie Details</title>
+    <link href="/stylesheets/style.css" rel="stylesheet">
+</head>
+<body>
+    <div class="container">
+        <h1>Movie Details</h1>
+        <div class="movie-details">
+            <div class="movie">
+                <img src="{{movie.image}}" alt="{{movie.title}}">
+                <h2>{{movie.title}}</h2>
+                <p><strong>Director:</strong> {{movie.director}}</p>
+                <p><strong>Stars:</strong> {{movie.stars.join}}</p>
+                <p><strong>Description:</strong> {{movie.description}}</p>
+                <p><strong>Showtimes:</strong> {{movie.showtimes.join}}</p>
+            </div>
+        </div>
+    </div>
+</body>
+</html>

views/movies.hbs

@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Movies</title>
+    <link href="/stylesheets/style.css" rel="stylesheet">
+</head>
+<body>
+    <div class="container">
+        <h1>All Movies</h1>
+        <div class="movie-list">
+            {{#each movies}}
+                <div class="movie">
+                    <img src="{{this.image}}" alt="{{this.title}}">
+                    <h2>{{this.title}}</h2>
+                    <a href="/movie/{{this._id}}" class="button">See more</a> 
+                </div>
+            {{/each}}
+        </div>
+    </div>
+</body>
+</html>