boolean-uk · DennisOsmani · Oct 18, 2024
diff --git a/GUIDE.md b/GUIDE.md
@@ -3,11 +3,56 @@
 # Project Guide
 
 ## Setup
+1. RDS Database Setup:
+- Created and configured an RDS instance.
+- Established a connection to the RDS database from the backend.
+
+2. EC2 Instance Configuration:
+- Launched an EC2 instance with an AWS server.
+- Installed necessary tools such as YUM and .NET SDK 8.0 to run the backend.
+
+3. Source Code Deployment:
+- Cloned the backend Git repository into the AWS server.
+- Configured and ran the backend application on the EC2 instance.
+
+4. Frontend Deployment:
+- Created an S3 bucket to host the frontend.
+- Deployed the frontend code (HTML, CSS, JavaScript) to the S3 bucket.
+- 
 
 ## Introduction
+This project involves the development of a full stack application using AWS services such as RDS, EC2, and S3. The backend is connected to an RDS database, while the frontend is hosted on an S3 bucket. The entire infrastructure is deployed and run on AWS.
 
 ## Technical Designs
+1. AWS Infrastructure
+- RDS: The Relational Database Service (RDS) is used to store application data (CRUD operations).
+- EC2: The Elastic Compute Cloud (EC2) instance runs the backend application, exposing the API endpoints.
+- S3: Simple Storage Service (S3) is used to serve static assets of the frontend.
+2. System Architecture
+- The frontend hosted on S3 sends requests to the backend running on the EC2 instance. The backend is connected to the RDS database for data persistence.
 
 ## Technical Descriptions
+1. RDS Setup:
+- Created an RDS database with appropriate configurations for the backend.
+- Connected the backend to the RDS using connection strings configured in the appsettings.json.
+
+2. EC2 Instance:
+- Launched an AWS EC2 instance with the required configuration to run .NET applications.
+- Installed YUM package manager and .NET SDK 8.0 to support the backend app.
+- Cloned the Git repository of the backend app and ran the application using "dotnet run --urls http://0.0.0.0:5000".
+
+3. S3 Bucket:
+- Created an S3 bucket to host the frontend.
+- Uploaded the frontend files (HTML, CSS, JavaScript) to the bucket, ensuring that public access was enabled for web hosting.
+
+4. CORS Setup:
+- Configured CORS in the backend (Program.cs) to allow requests from the S3-hosted frontend by adding the appropriate policy in the .NET application.
 
 ## References
+- **AWS Documentation:**
+  - [Amazon RDS](https://docs.aws.amazon.com/rds/index.html)
+  - [Amazon EC2](https://docs.aws.amazon.com/ec2/index.html)
+  - [Amazon S3](https://docs.aws.amazon.com/s3/index.html)
+
+- **.NET Documentation:**
+  - [.NET SDK 8.0](https://dotnet.microsoft.com/download/dotnet/8.0)
diff --git a/Screenshot 2024-10-18 085215.png b/Screenshot 2024-10-18 085215.png
diff --git a/Screenshot 2024-10-18 102031.png b/Screenshot 2024-10-18 102031.png
diff --git a/frontend/CinemaFrontend.html b/frontend/CinemaFrontend.html
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Simple Frontend</title>
+    <style>
+        body { font-family: Arial, sans-serif; }
+        h1 { color: #333; }
+        form { margin-top: 20px; }
+        input, textarea { margin: 5px; }
+    </style>
+</head>
+<body>
+    <h1>Welcome to My Simple Cinema Frontend!</h1>
+
+    <h2>Fetch Data from API</h2>
+    <button id="fetchData">Fetch Data</button>
+    <pre id="data"></pre>
+
+    <h2>Add Movie</h2>
+    <form id="movieForm">
+        <input type="text" id="title" placeholder="Title" required />
+        <input type="text" id="rating" placeholder="Rating" required />
+        <textarea id="description" placeholder="Description" required></textarea>
+        <input type="number" id="runtimeMins" placeholder="Run Time (minutes)" min="0" required />
+
+        <h3>Screening Details</h3>
+        <input type="number" id="screenNumber" placeholder="Screen Number" min="0" required />
+        <input type="number" id="capacity" placeholder="Capacity" min="0" required />
+        <input type="datetime-local" id="startsAt" required />
+
+        <button type="submit">Submit Movie</button>
+    </form>
+
+
+    <script>
+        document.getElementById('fetchData').addEventListener('click', async () => {
+            try {
+                const response = await fetch('http://13.60.228.100:5000/movies'); 
+                if (!response.ok) throw new Error('Network response was not ok');
+                const data = await response.json();
+                document.getElementById('data').innerText = JSON.stringify(data, null, 2);
+            } catch (error) {
+                document.getElementById('data').innerText = 'Error: ' + error.message;
+            }
+        });
+
+        document.getElementById('movieForm').addEventListener('submit', async (event) => {
+            event.preventDefault(); // Prevent the form from submitting the default way
+
+            const movieData = {
+        title: document.getElementById('title').value,
+        rating: document.getElementById('rating').value,
+        description: document.getElementById('description').value,
+        runtimeMins: parseInt(document.getElementById('runtimeMins').value),
+        screenings: [
+            {
+                screenNumber: parseInt(document.getElementById('screenNumber').value),
+                capacity: parseInt(document.getElementById('capacity').value),
+                startsAt: new Date(document.getElementById('startsAt').value).toISOString()
+            }
+        ]
+    };
+
+            try {
+                const response = await fetch('http://13.60.228.100:5000/movies', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify(movieData)
+                });
+
+                if (!response.ok) throw new Error('Failed to submit movie');
+                const result = await response.json();
+                document.getElementById('data').innerText = JSON.stringify(result, null, 2);
+            } catch (error) {
+                document.getElementById('data').innerText = 'Error: ' + error.message;
+            }
+        });
+    </script>
+</body>
+</html>