MovieVerse-Frontend/index.ejs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>The MovieVerse Database</title>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />

    <!-- Font Awesome for icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>

    <!-- Vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

    <!-- React and ReactDOM -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>

    <!-- React DOM -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>

    <!-- Custom CSS -->
    <style>
        .react-component {
            background-color: #61DAFB;
            color: #282c34;
            padding: 20px;
            margin-bottom: 20px;
        }

        .vue-component {
            background-color: #42b883;
            color: #35495e;
            padding: 20px;
            margin-bottom: 20px;
        }
    </style>

</head>

<body>
    <noscript>You need to enable JavaScript to run this app.</noscript>

    <!-- React Root Element -->
    <div id="react-root"></div>

    <!-- Vue Root Element -->
    <div id="vue-root"></div>

    <!-- Initialize React and Vue -->
    <script>
        // React Component
        class MyReactComponent extends React.Component {
            render() {
                return (
                    <div className="react-component">
                        MovieVerse App - React Component
                    </div>
                );
            }
        }

        // Render React Component
        ReactDOM.render(<MyReactComponent />, document.getElementById('react-root'));

        // Vue Instance
        new Vue({
            el: '#vue-root',
            data: {
                message: 'MovieVerse App - Vue Component!'
            },
            template: '<div class="vue-component">{{ message }}</div>'
        });
    </script>

    <!-- Page content, which will be dynamically populated by JS -->
    <div class="container">
        <div class="row">
            <div class="col-12">
                <h1 class="text-center">The MovieVerse Database</h1>
            </div>
        </div>
    </div>

    <!-- Bootstrap and other necessary JavaScript -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

</body>

</html>