├── api
    ├── requirements.txt
    ├── .env.example
    ├── main.py
    └── .gitignore
├── frontend
    ├── public
    │   ├── robots.txt
    │   ├── favicon.ico
    │   ├── logo192.png
    │   ├── logo512.png
    │   ├── manifest.json
    │   └── index.html
    ├── src
    │   ├── setupTests.js
    │   ├── App.test.js
    │   ├── index.css
    │   ├── reportWebVitals.js
    │   ├── index.js
    │   ├── App.css
    │   ├── App.module.css
    │   ├── logo.svg
    │   └── App.js
    ├── .gitignore
    ├── package.json
    └── README.md
├── images
    ├── api-tvshows.png
    └── react-frontend.png
├── LICENSE
└── README.md


/api/requirements.txt:
--------------------------------------------------------------------------------
1 | fastapi 
2 | azure-cosmos 
3 | uvicorn
4 | python-dotenv


--------------------------------------------------------------------------------
/api/.env.example:
--------------------------------------------------------------------------------
1 | CosmosDBEndpoint=your_cosmos_db_endpoint_here
2 | CosmosDBKey=your_cosmos_db_key_here


--------------------------------------------------------------------------------
/frontend/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 | 


--------------------------------------------------------------------------------
/images/api-tvshows.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rishabkumar7/ltc-devops-project/HEAD/images/api-tvshows.png


--------------------------------------------------------------------------------
/images/react-frontend.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rishabkumar7/ltc-devops-project/HEAD/images/react-frontend.png


--------------------------------------------------------------------------------
/frontend/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rishabkumar7/ltc-devops-project/HEAD/frontend/public/favicon.ico


--------------------------------------------------------------------------------
/frontend/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rishabkumar7/ltc-devops-project/HEAD/frontend/public/logo192.png


--------------------------------------------------------------------------------
/frontend/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rishabkumar7/ltc-devops-project/HEAD/frontend/public/logo512.png


--------------------------------------------------------------------------------
/frontend/src/setupTests.js:
--------------------------------------------------------------------------------
1 | // jest-dom adds custom jest matchers for asserting on DOM nodes.
2 | // allows you to do things like:
3 | // expect(element).toHaveTextContent(/react/i)
4 | // learn more: https://github.com/testing-library/jest-dom
5 | import '@testing-library/jest-dom';
6 | 


--------------------------------------------------------------------------------
/frontend/src/App.test.js:
--------------------------------------------------------------------------------
1 | import { render, screen } from '@testing-library/react';
2 | import App from './App';
3 | 
4 | test('renders learn react link', () => {
5 |   render(<App />);
6 |   const linkElement = screen.getByText(/learn react/i);
7 |   expect(linkElement).toBeInTheDocument();
8 | });
9 | 


--------------------------------------------------------------------------------
/frontend/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # production
12 | /build
13 | 
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 | 
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 | 


--------------------------------------------------------------------------------
/frontend/src/index.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   margin: 0;
 3 |   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
 4 |     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
 5 |     sans-serif;
 6 |   -webkit-font-smoothing: antialiased;
 7 |   -moz-osx-font-smoothing: grayscale;
 8 | }
 9 | 
10 | code {
11 |   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
12 |     monospace;
13 | }
14 | 


--------------------------------------------------------------------------------
/frontend/src/reportWebVitals.js:
--------------------------------------------------------------------------------
 1 | const reportWebVitals = onPerfEntry => {
 2 |   if (onPerfEntry && onPerfEntry instanceof Function) {
 3 |     import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
 4 |       getCLS(onPerfEntry);
 5 |       getFID(onPerfEntry);
 6 |       getFCP(onPerfEntry);
 7 |       getLCP(onPerfEntry);
 8 |       getTTFB(onPerfEntry);
 9 |     });
10 |   }
11 | };
12 | 
13 | export default reportWebVitals;
14 | 


--------------------------------------------------------------------------------
/frontend/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom/client';
 3 | import './index.css';
 4 | import App from './App';
 5 | import reportWebVitals from './reportWebVitals';
 6 | 
 7 | const root = ReactDOM.createRoot(document.getElementById('root'));
 8 | root.render(
 9 |   <React.StrictMode>
10 |     <App />
11 |   </React.StrictMode>
12 | );
13 | 
14 | // If you want to start measuring performance in your app, pass a function
15 | // to log results (for example: reportWebVitals(console.log))
16 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
17 | reportWebVitals();
18 | 


--------------------------------------------------------------------------------
/frontend/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React App",
 3 |   "name": "Create React App Sample",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     },
10 |     {
11 |       "src": "logo192.png",
12 |       "type": "image/png",
13 |       "sizes": "192x192"
14 |     },
15 |     {
16 |       "src": "logo512.png",
17 |       "type": "image/png",
18 |       "sizes": "512x512"
19 |     }
20 |   ],
21 |   "start_url": ".",
22 |   "display": "standalone",
23 |   "theme_color": "#000000",
24 |   "background_color": "#ffffff"
25 | }
26 | 


--------------------------------------------------------------------------------
/frontend/src/App.css:
--------------------------------------------------------------------------------
 1 | .App {
 2 |   text-align: center;
 3 | }
 4 | 
 5 | .App-logo {
 6 |   height: 40vmin;
 7 |   pointer-events: none;
 8 | }
 9 | 
10 | @media (prefers-reduced-motion: no-preference) {
11 |   .App-logo {
12 |     animation: App-logo-spin infinite 20s linear;
13 |   }
14 | }
15 | 
16 | .App-header {
17 |   background-color: #282c34;
18 |   min-height: 100vh;
19 |   display: flex;
20 |   flex-direction: column;
21 |   align-items: center;
22 |   justify-content: center;
23 |   font-size: calc(10px + 2vmin);
24 |   color: white;
25 | }
26 | 
27 | .App-link {
28 |   color: #61dafb;
29 | }
30 | 
31 | @keyframes App-logo-spin {
32 |   from {
33 |     transform: rotate(0deg);
34 |   }
35 |   to {
36 |     transform: rotate(360deg);
37 |   }
38 | }
39 | 


--------------------------------------------------------------------------------
/frontend/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "frontend",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@testing-library/jest-dom": "^5.17.0",
 7 |     "@testing-library/react": "^13.4.0",
 8 |     "@testing-library/user-event": "^13.5.0",
 9 |     "axios": "^1.7.7",
10 |     "react": "^18.3.1",
11 |     "react-dom": "^18.3.1",
12 |     "react-scripts": "5.0.1",
13 |     "web-vitals": "^2.1.4"
14 |   },
15 |   "scripts": {
16 |     "start": "react-scripts start",
17 |     "build": "react-scripts build",
18 |     "test": "react-scripts test",
19 |     "eject": "react-scripts eject"
20 |   },
21 |   "eslintConfig": {
22 |     "extends": [
23 |       "react-app",
24 |       "react-app/jest"
25 |     ]
26 |   },
27 |   "browserslist": {
28 |     "production": [
29 |       ">0.2%",
30 |       "not dead",
31 |       "not op_mini all"
32 |     ],
33 |     "development": [
34 |       "last 1 chrome version",
35 |       "last 1 firefox version",
36 |       "last 1 safari version"
37 |     ]
38 |   }
39 | }
40 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2024 Rishab Kumar
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/frontend/src/App.module.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   margin: 0;
 3 |   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
 4 |     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
 5 |     sans-serif;
 6 |   -webkit-font-smoothing: antialiased;
 7 |   -moz-osx-font-smoothing: grayscale;
 8 |   background-color: #121212;
 9 |   color: #ffffff;
10 | }
11 | 
12 | .app {
13 |   max-width: 1200px;
14 |   margin: 0 auto;
15 |   padding: 20px;
16 | }
17 | 
18 | .header {
19 |   text-align: center;
20 |   margin-bottom: 30px;
21 |   color: #bb86fc;
22 | }
23 | 
24 | .container {
25 |   display: flex;
26 |   gap: 30px;
27 | }
28 | 
29 | .showList {
30 |   flex: 1;
31 |   background-color: #1e1e1e;
32 |   border-radius: 8px;
33 |   padding: 20px;
34 |   max-height: 80vh;
35 |   overflow-y: auto;
36 | }
37 | 
38 | .showList h2 {
39 |   color: #8f39f0;
40 |   margin-top: 0;
41 | }
42 | 
43 | .showList ul {
44 |   list-style-type: none;
45 |   padding: 0;
46 | }
47 | 
48 | .showList li {
49 |   padding: 10px;
50 |   margin-bottom: 10px;
51 |   background-color: #2c2c2c;
52 |   border-radius: 4px;
53 |   cursor: pointer;
54 |   transition: background-color 0.3s ease;
55 | }
56 | 
57 | .showList li:hover {
58 |   background-color: #3c3c3c;
59 | }
60 | 
61 | .seasonList {
62 |   flex: 2;
63 |   background-color: #1e1e1e;
64 |   border-radius: 8px;
65 |   padding: 20px;
66 |   max-height: 80vh;
67 |   overflow-y: auto;
68 | }
69 | 
70 | .seasonList h2 {
71 |   color: #8f39f0;
72 |   margin-top: 0;
73 | }
74 | 
75 | .season h3 {
76 |   color: #cf6679;
77 | }
78 | 
79 | .episode {
80 |   background-color: #2c2c2c;
81 |   border-radius: 4px;
82 |   padding: 15px;
83 |   margin-bottom: 15px;
84 | }
85 | 
86 | .episode h4 {
87 |   color: #bb86fc;
88 |   margin-top: 0;
89 | }
90 | 
91 | .episode p {
92 |   margin: 5px 0;
93 | }
94 | 
95 | .episodeInfo {
96 |   font-size: 0.9em;
97 |   color: #a0a0a0;
98 | }


--------------------------------------------------------------------------------
/frontend/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 |     <meta name="theme-color" content="#000000" />
 8 |     <meta
 9 |       name="description"
10 |       content="Web site created using create-react-app"
11 |     />
12 |     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
13 |     <!--
14 |       manifest.json provides metadata used when your web app is installed on a
15 |       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
16 |     -->
17 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
18 |     <!--
19 |       Notice the use of %PUBLIC_URL% in the tags above.
20 |       It will be replaced with the URL of the `public` folder during the build.
21 |       Only files inside the `public` folder can be referenced from the HTML.
22 | 
23 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
24 |       work correctly both with client-side routing and a non-root public URL.
25 |       Learn how to configure a non-root public URL by running `npm run build`.
26 |     -->
27 |     <title>React App</title>
28 |   </head>
29 |   <body>
30 |     <noscript>You need to enable JavaScript to run this app.</noscript>
31 |     <div id="root"></div>
32 |     <!--
33 |       This HTML file is a template.
34 |       If you open it directly in the browser, you will see an empty page.
35 | 
36 |       You can add webfonts, meta tags, or analytics to this file.
37 |       The build step will place the bundled scripts into the <body> tag.
38 | 
39 |       To begin the development, run `npm start` or `yarn start`.
40 |       To create a production bundle, use `npm run build` or `yarn build`.
41 |     -->
42 |   </body>
43 | </html>
44 | 


--------------------------------------------------------------------------------
/api/main.py:
--------------------------------------------------------------------------------
 1 | from fastapi import FastAPI, HTTPException, Query
 2 | from fastapi.middleware.cors import CORSMiddleware
 3 | from azure.cosmos import CosmosClient
 4 | from dotenv import load_dotenv
 5 | import os
 6 | from typing import Optional
 7 | 
 8 | # Load environment variables from .env file
 9 | load_dotenv()
10 | 
11 | app = FastAPI()
12 | 
13 | 
14 | # Enable CORS
15 | app.add_middleware(
16 |     CORSMiddleware,
17 |     allow_origins=["http://localhost:3000"],  # React app's URL
18 |     allow_credentials=True,
19 |     allow_methods=["*"],
20 |     allow_headers=["*"],
21 | )
22 | 
23 | # Initialize the Cosmos DB client using environment variables
24 | endpoint = os.getenv("CosmosDBEndpoint")
25 | key = os.getenv("CosmosDBKey")
26 | 
27 | if not endpoint or not key:
28 |     raise ValueError("CosmosDBEndpoint and CosmosDBKey must be set in the .env file")
29 | 
30 | client = CosmosClient(endpoint, key)
31 | 
32 | # Get a reference to the database and container
33 | database = client.get_database_client("TvShows")
34 | container = database.get_container_client("TvShowsContainer")
35 | 
36 | @app.get("/")
37 | async def root():
38 |     return {"message": "Welcome to the TV Shows API!"}
39 | 
40 | @app.get("/api/shows")
41 | async def get_tv_shows():
42 |     try:
43 |         query = "SELECT c.id, c.title FROM c"
44 |         items = list(container.query_items(query=query, enable_cross_partition_query=True))
45 |         return items
46 |     except Exception as e:
47 |         raise HTTPException(status_code=500, detail="Error accessing Cosmos DB")
48 | 
49 | @app.get("/api/seasons")
50 | async def get_seasons(show_id: Optional[str] = Query(None, title="Show ID")):
51 |     if not show_id:
52 |         raise HTTPException(status_code=400, detail="Please provide a show_id query parameter. If unaware of the showId, check out the /api/shows endpoint.")
53 | 
54 |     try:
55 |         query = "SELECT c.seasons FROM c WHERE c.id = @showId"
56 |         parameters = [{"name": "@showId", "value": show_id}]
57 |         
58 |         items = list(container.query_items(
59 |             query=query,
60 |             parameters=parameters,
61 |             enable_cross_partition_query=True
62 |         ))
63 | 
64 |         if not items:
65 |             return {"message": "No seasons found for the given show ID"}
66 |         
67 |         return items[0]
68 |     except Exception as e:
69 |         raise HTTPException(status_code=500, detail=f"Error querying Cosmos DB: {str(e)}")


--------------------------------------------------------------------------------
/frontend/src/logo.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # LTC DevOps Project
 2 | 
 3 | This is the sample application for the DevOps Capstone Project on [Learn to Cloud.](https://learntocloud.guide)
 4 | It shows your favorite TV Shows or movies, the front-end is in React and the API is written in Python using FastAPI.
 5 | 
 6 | ## Application
 7 | 
 8 | **Front-End** - A web application where users can view.
 9 | ![React Frontend application](./images/react-frontend.png)
10 | 
11 | **API**: API that receives request to fetch TV Shows or Movies data, stored in NoSQL Database. For this sample app I am using CosmosDB from Azure. But you can modify the code according to your provider within the API.
12 | ![API for TV Shows](./images/api-tvshows.png)
13 | 
14 | ## Running locally
15 | 
16 | ### API
17 | 
18 | The API code exists in the `api` directory. You can run the API server locally:
19 | 
20 | - Clone this repo
21 | - Make sure you are in the `api` directory
22 | - Create a virtualenv by typing in the following command: `python -m venv .venv`
23 | - Install the required packages: `pip install -r requirements.txt`
24 | - Create a `.env` file, and add your CosmosDB connection details(only if you are using Azure CosmosDB), check  `.env.example`
25 | - Also, change the API code depending on the data stored in your NoSQL Database in `main.py` accordingly
26 | - Run the API server: `uvicorn main:app --reload`
27 | - Your API Server should be running on port `http://localhost:8000`
28 | 
29 | ### Front-end
30 | 
31 | The front-end code exits in the `frontend` directory. You can run the front-end server locally:
32 | 
33 | - Clone this repo
34 | - Make sure you are in the `frontend` directory
35 | - Install the dependencies: `npm install`
36 | - Run the NextJS Server: `npm start`
37 | - Your Front-end Server should be running on `http://localhost:3000`
38 | 
39 | ## Goal
40 | 
41 | The goal is to get hands-on with DevOps practices like Containerization, CICD and monitoring.
42 | 
43 | - Containerize the Application: Create Dockerfiles for both api and frontend.
44 | - CI/CD: Setup CI/CD pipeline to push images to Dockerhub or other container registries like [ACR](https://azure.microsoft.com/en-us/products/container-registry) or [ECR](https://aws.amazon.com/ecr/).
45 | - Infrastructure as Code: Deploy a Kubernetes cluster to your choice of cloud provider, using Terraform.
46 | - Kubernetes: Create deployments for both of your containers using YAML files, and deploy it to your cluster.
47 | - Monitoring: Setup monitoring for your cluster, look into Prometheus and Grafana.
48 | 
49 | Look at the [Phase 4 capstone project](https://learntocloud.guide/phase4/) for more details.
50 | 
51 | ## Author
52 | 
53 | [Rishab Kumar](https://github.com/rishabkumar7)
54 | 
55 | ## License
56 | 
57 | [MIT](./LICENSE)
58 | 


--------------------------------------------------------------------------------
/frontend/README.md:
--------------------------------------------------------------------------------
 1 | # Getting Started with Create React App
 2 | 
 3 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
 4 | 
 5 | ## Available Scripts
 6 | 
 7 | In the project directory, you can run:
 8 | 
 9 | ### `npm start`
10 | 
11 | Runs the app in the development mode.\
12 | Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
13 | 
14 | The page will reload when you make changes.\
15 | You may also see any lint errors in the console.
16 | 
17 | ### `npm test`
18 | 
19 | Launches the test runner in the interactive watch mode.\
20 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
21 | 
22 | ### `npm run build`
23 | 
24 | Builds the app for production to the `build` folder.\
25 | It correctly bundles React in production mode and optimizes the build for the best performance.
26 | 
27 | The build is minified and the filenames include the hashes.\
28 | Your app is ready to be deployed!
29 | 
30 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
31 | 
32 | ### `npm run eject`
33 | 
34 | **Note: this is a one-way operation. Once you `eject`, you can't go back!**
35 | 
36 | If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
37 | 
38 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
39 | 
40 | You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
41 | 
42 | ## Learn More
43 | 
44 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
45 | 
46 | To learn React, check out the [React documentation](https://reactjs.org/).
47 | 
48 | ### Code Splitting
49 | 
50 | This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
51 | 
52 | ### Analyzing the Bundle Size
53 | 
54 | This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
55 | 
56 | ### Making a Progressive Web App
57 | 
58 | This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
59 | 
60 | ### Advanced Configuration
61 | 
62 | This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
63 | 
64 | ### Deployment
65 | 
66 | This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
67 | 
68 | ### `npm run build` fails to minify
69 | 
70 | This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
71 | 


--------------------------------------------------------------------------------
/frontend/src/App.js:
--------------------------------------------------------------------------------
  1 | import React, { useState, useEffect } from 'react';
  2 | import axios from 'axios';
  3 | import styles from './App.module.css';
  4 | 
  5 | const API_BASE_URL = 'http://localhost:8000/api';
  6 | 
  7 | const TvShowList = ({ onSelectShow }) => {
  8 |   const [shows, setShows] = useState([]);
  9 | 
 10 |   useEffect(() => {
 11 |     const fetchShows = async () => {
 12 |       try {
 13 |         const response = await axios.get(`${API_BASE_URL}/shows`);
 14 |         setShows(response.data);
 15 |       } catch (error) {
 16 |         console.error('Error fetching TV shows:', error);
 17 |       }
 18 |     };
 19 | 
 20 |     fetchShows();
 21 |   }, []);
 22 | 
 23 |   return (
 24 |     <div className={styles.showList}>
 25 |       <h2>TV Shows</h2>
 26 |       <ul>
 27 |         {shows.map(show => (
 28 |           <li key={show.id} onClick={() => onSelectShow(show.id)}>
 29 |             {show.title}
 30 |           </li>
 31 |         ))}
 32 |       </ul>
 33 |     </div>
 34 |   );
 35 | };
 36 | 
 37 | const SeasonList = ({ showId }) => {
 38 |   const [seasons, setSeasons] = useState([]);
 39 | 
 40 |   useEffect(() => {
 41 |     const fetchSeasons = async () => {
 42 |       if (!showId) return;
 43 | 
 44 |       try {
 45 |         const response = await axios.get(`${API_BASE_URL}/seasons?show_id=${showId}`);
 46 |         setSeasons(response.data.seasons || []);
 47 |       } catch (error) {
 48 |         console.error('Error fetching seasons:', error);
 49 |       }
 50 |     };
 51 | 
 52 |     fetchSeasons();
 53 |   }, [showId]);
 54 | 
 55 |   if (!showId) return <p>Select a show to see its episodes.</p>;
 56 | 
 57 |   const episodesBySeason = seasons.reduce((acc, episode) => {
 58 |     if (!acc[episode.season]) {
 59 |       acc[episode.season] = [];
 60 |     }
 61 |     acc[episode.season].push(episode);
 62 |     return acc;
 63 |   }, {});
 64 | 
 65 |   return (
 66 |     <div className={styles.seasonList}>
 67 |       <h2>Seasons and Episodes</h2>
 68 |       {Object.entries(episodesBySeason).length === 0 ? (
 69 |         <p>No episodes found for this show.</p>
 70 |       ) : (
 71 |         Object.entries(episodesBySeason).map(([season, episodes]) => (
 72 |           <div key={season} className={styles.season}>
 73 |             <h3>Season {season}</h3>
 74 |             <ul>
 75 |               {episodes.map((episode, index) => (
 76 |                 <li key={index} className={styles.episode}>
 77 |                   <h4>Episode {episode.episode}: {episode.title}</h4>
 78 |                   <p>{episode.description}</p>
 79 |                   <div className={styles.episodeInfo}>
 80 |                     {episode.airDate && <p>Air Date: {episode.airDate}</p>}
 81 |                     {episode.imdbRating && <p>IMDB Rating: {episode.imdbRating}</p>}
 82 |                     {episode.directedBy && <p>Directed by: {episode.directedBy}</p>}
 83 |                     {episode.writtenBy && <p>Written by: {episode.writtenBy}</p>}
 84 |                   </div>
 85 |                 </li>
 86 |               ))}
 87 |             </ul>
 88 |           </div>
 89 |         ))
 90 |       )}
 91 |     </div>
 92 |   );
 93 | };
 94 | 
 95 | const App = () => {
 96 |   const [selectedShowId, setSelectedShowId] = useState(null);
 97 | 
 98 |   return (
 99 |     <div className={styles.app}>
100 |       <h1 className={styles.header}>Rishab's Favorite TV Shows</h1>
101 |       <div className={styles.container}>
102 |         <TvShowList onSelectShow={setSelectedShowId} />
103 |         <SeasonList showId={selectedShowId} />
104 |       </div>
105 |     </div>
106 |   );
107 | };
108 | 
109 | export default App;


--------------------------------------------------------------------------------
/api/.gitignore:
--------------------------------------------------------------------------------
  1 | # Byte-compiled / optimized / DLL files
  2 | __pycache__/
  3 | *.py[cod]
  4 | *$py.class
  5 | 
  6 | # C extensions
  7 | *.so
  8 | 
  9 | # Distribution / packaging
 10 | .Python
 11 | build/
 12 | develop-eggs/
 13 | dist/
 14 | downloads/
 15 | eggs/
 16 | .eggs/
 17 | lib/
 18 | lib64/
 19 | parts/
 20 | sdist/
 21 | var/
 22 | wheels/
 23 | share/python-wheels/
 24 | *.egg-info/
 25 | .installed.cfg
 26 | *.egg
 27 | MANIFEST
 28 | 
 29 | # PyInstaller
 30 | #  Usually these files are written by a python script from a template
 31 | #  before PyInstaller builds the exe, so as to inject date/other infos into it.
 32 | *.manifest
 33 | *.spec
 34 | 
 35 | # Installer logs
 36 | pip-log.txt
 37 | pip-delete-this-directory.txt
 38 | 
 39 | # Unit test / coverage reports
 40 | htmlcov/
 41 | .tox/
 42 | .nox/
 43 | .coverage
 44 | .coverage.*
 45 | .cache
 46 | nosetests.xml
 47 | coverage.xml
 48 | *.cover
 49 | *.py,cover
 50 | .hypothesis/
 51 | .pytest_cache/
 52 | cover/
 53 | 
 54 | # Translations
 55 | *.mo
 56 | *.pot
 57 | 
 58 | # Django stuff:
 59 | *.log
 60 | local_settings.py
 61 | db.sqlite3
 62 | db.sqlite3-journal
 63 | 
 64 | # Flask stuff:
 65 | instance/
 66 | .webassets-cache
 67 | 
 68 | # Scrapy stuff:
 69 | .scrapy
 70 | 
 71 | # Sphinx documentation
 72 | docs/_build/
 73 | 
 74 | # PyBuilder
 75 | .pybuilder/
 76 | target/
 77 | 
 78 | # Jupyter Notebook
 79 | .ipynb_checkpoints
 80 | 
 81 | # IPython
 82 | profile_default/
 83 | ipython_config.py
 84 | 
 85 | # pyenv
 86 | #   For a library or package, you might want to ignore these files since the code is
 87 | #   intended to run in multiple environments; otherwise, check them in:
 88 | # .python-version
 89 | 
 90 | # pipenv
 91 | #   According to pypa/pipenv#598, it is recommended to include Pipfile.lock in version control.
 92 | #   However, in case of collaboration, if having platform-specific dependencies or dependencies
 93 | #   having no cross-platform support, pipenv may install dependencies that don't work, or not
 94 | #   install all needed dependencies.
 95 | #Pipfile.lock
 96 | 
 97 | # poetry
 98 | #   Similar to Pipfile.lock, it is generally recommended to include poetry.lock in version control.
 99 | #   This is especially recommended for binary packages to ensure reproducibility, and is more
100 | #   commonly ignored for libraries.
101 | #   https://python-poetry.org/docs/basic-usage/#commit-your-poetrylock-file-to-version-control
102 | #poetry.lock
103 | 
104 | # pdm
105 | #   Similar to Pipfile.lock, it is generally recommended to include pdm.lock in version control.
106 | #pdm.lock
107 | #   pdm stores project-wide configurations in .pdm.toml, but it is recommended to not include it
108 | #   in version control.
109 | #   https://pdm.fming.dev/latest/usage/project/#working-with-version-control
110 | .pdm.toml
111 | .pdm-python
112 | .pdm-build/
113 | 
114 | # PEP 582; used by e.g. github.com/David-OConnor/pyflow and github.com/pdm-project/pdm
115 | __pypackages__/
116 | 
117 | # Celery stuff
118 | celerybeat-schedule
119 | celerybeat.pid
120 | 
121 | # SageMath parsed files
122 | *.sage.py
123 | 
124 | # Environments
125 | .env
126 | .venv
127 | env/
128 | venv/
129 | ENV/
130 | env.bak/
131 | venv.bak/
132 | 
133 | # Spyder project settings
134 | .spyderproject
135 | .spyproject
136 | 
137 | # Rope project settings
138 | .ropeproject
139 | 
140 | # mkdocs documentation
141 | /site
142 | 
143 | # mypy
144 | .mypy_cache/
145 | .dmypy.json
146 | dmypy.json
147 | 
148 | # Pyre type checker
149 | .pyre/
150 | 
151 | # pytype static type analyzer
152 | .pytype/
153 | 
154 | # Cython debug symbols
155 | cython_debug/
156 | 
157 | # PyCharm
158 | #  JetBrains specific template is maintained in a separate JetBrains.gitignore that can
159 | #  be found at https://github.com/github/gitignore/blob/main/Global/JetBrains.gitignore
160 | #  and can be added to the global gitignore or merged into this file.  For a more nuclear
161 | #  option (not recommended) you can uncomment the following to ignore the entire idea folder.
162 | #.idea/


--------------------------------------------------------------------------------