Updated backend and frontend for app deployment

trivia-forge/backend/endpoints/category.py

@@ -1,13 +1,14 @@
+import os
+from dotenv import load_dotenv
 from flask import Blueprint, request, jsonify
 from supabase import create_client, Client
-from dotenv import dotenv_values
 
+load_dotenv()
 
 bp = Blueprint('category', __name__, url_prefix='/categories')
 
-config = dotenv_values("./.env")
-url: str = config.get('SUPABASE_URL')
-key: str = config.get('SUPABASE_KEY')
+url: str = os.environ.get("SUPABASE_URL")
+key: str = os.environ.get("SUPABASE_KEY")
 supabase: Client = create_client(url, key)
 
 

trivia-forge/backend/endpoints/choice.py

@@ -1,13 +1,14 @@
+import os
+from dotenv import load_dotenv
 from flask import Blueprint, request, jsonify
 from supabase import create_client, Client
-from dotenv import dotenv_values
 
+load_dotenv()
 
 bp = Blueprint('choice', __name__, url_prefix='/choices')
 
-config = dotenv_values("./.env")
-url: str = config.get('SUPABASE_URL')
-key: str = config.get('SUPABASE_KEY')
+url: str = os.environ.get("SUPABASE_URL")
+key: str = os.environ.get("SUPABASE_KEY")
 supabase: Client = create_client(url, key)
 
 

trivia-forge/backend/endpoints/game.py

@@ -1,14 +1,14 @@
+import os
+from dotenv import load_dotenv
 from flask import Blueprint, request, jsonify
 from supabase import create_client, Client
-from dotenv import dotenv_values
-
 
+load_dotenv()
 
 bp = Blueprint('game', __name__, url_prefix='/games')
 
-config = dotenv_values("./.env")
-url: str = config.get('SUPABASE_URL')
-key: str = config.get('SUPABASE_KEY')
+url: str = os.environ.get("SUPABASE_URL")
+key: str = os.environ.get("SUPABASE_KEY")
 supabase: Client = create_client(url, key)
 
 

trivia-forge/backend/endpoints/home.py

@@ -6,4 +6,4 @@
 
 @bp.get('')
 def get_home():
-    return 'Welcome to Trivia Forge!'
+    return 'Trivia Forge API'

trivia-forge/backend/endpoints/question.py

@@ -1,13 +1,14 @@
+import os
+from dotenv import load_dotenv
 from flask import Blueprint, request, jsonify
 from supabase import create_client, Client
-from dotenv import dotenv_values
 
+load_dotenv()
 
 bp = Blueprint('question', __name__, url_prefix='/questions')
 
-config = dotenv_values("./.env")
-url: str = config.get('SUPABASE_URL')
-key: str = config.get('SUPABASE_KEY')
+url: str = os.environ.get("SUPABASE_URL")
+key: str = os.environ.get("SUPABASE_KEY")
 supabase: Client = create_client(url, key)
 
 

trivia-forge/backend/endpoints/user.py

@@ -1,14 +1,14 @@
+import os
+from dotenv import load_dotenv
 from flask import Blueprint, request, jsonify
 from supabase import create_client, Client
-from dotenv import dotenv_values
-
 
+load_dotenv()
 
 bp = Blueprint('user', __name__, url_prefix='/users')
 
-config = dotenv_values("./.env")
-url: str = config.get('SUPABASE_URL')
-key: str = config.get('SUPABASE_KEY')
+url: str = os.environ.get("SUPABASE_URL")
+key: str = os.environ.get("SUPABASE_KEY")
 supabase: Client = create_client(url, key)
 
 

trivia-forge/backend/main.py

@@ -1,7 +1,13 @@
-from flask import Flask, request, jsonify
+import os
+from dotenv import load_dotenv
+from flask import Flask
 from endpoints import home, user, game, category, question, choice
 from flask_cors import CORS
 
+load_dotenv()
+
+host = os.environ.get("HOST")
+
 
 app = Flask(__name__)
 CORS(app)
@@ -15,4 +21,4 @@
 
 
 if __name__ == '__main__':
-    app.run(debug=True)
+    app.run(host=host, port=5000, debug=True)

trivia-forge/backend/pyproject.toml

@@ -10,6 +10,8 @@ python = "^3.10"
 supabase = "^2.4.3"
 flask = "^3.0.3"
 python-dotenv = "^1.0.1"
+flask-cors = "^4.0.1"
+gunicorn = "^22.0.0"
 
 
 [build-system]

trivia-forge/frontend/src/App.jsx

@@ -11,12 +11,9 @@ import SignUpPage from './pages/signUpPage';
 import React from 'react';
 import 'bootstrap/dist/css/bootstrap.min.css';
 
-let signedIn = false;
 
 function App() {
-  const [count, setCount] = useState(0)
   return (
-
     <div className="App">
       <BrowserRouter>
 
@@ -40,7 +37,6 @@ function App() {
         </footer>
       </BrowserRouter>
     </div>
-
   )
 }
 

trivia-forge/frontend/src/components/Navigation.jsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { Navbar } from "react-bootstrap";
 import { Nav, Button} from "react-bootstrap";
-import { useNavigate } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
 import useStore from '../hooks/useStore';
 
 
@@ -20,8 +20,8 @@ function Navigation() {
             <Navbar bg="dark" data-bs-theme="dark">
                 <Nav className="me-auto">
                     <Nav.Link className="navbar-brand" href="/">Home</Nav.Link>
-                    <Nav.Link href="/triviaGen">Create New Trivia</Nav.Link>
-                    <Nav.Link href="/myTrivia">My Trivia</Nav.Link>
+                    <Nav.Link as={Link} to="/triviaGen">Create New Trivia</Nav.Link>
+                    <Nav.Link as={Link} to="/myTrivia">My Trivia</Nav.Link>
                 </Nav>
 
                 <Nav className="me-2">

trivia-forge/frontend/src/main.jsx

@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom/client'
 import App from './App.jsx'
 import './index.css'
 
+
 ReactDOM.createRoot(document.getElementById('root')).render(
   <React.StrictMode>
     <App />

trivia-forge/frontend/src/pages/homePage.jsx

@@ -33,7 +33,7 @@ function Home() {
 
                 <Row>
                     <Col>
-                        <Button variant="primary" onClick={() => navigate('/triviagen')}> <FaPlusCircle /> Create New Game </Button>
+                        <Button variant="primary" onClick={() => navigate('/triviaGen')}> <FaPlusCircle /> Create New Game </Button>
                     </Col>
                 </Row>
 

trivia-forge/frontend/src/pages/loginPage.jsx

@@ -40,12 +40,12 @@ function LoginPage() {
                     <Form onSubmit={handleSubmit} className="form-group">
                         <Form.Group className="mb-3" controlId="formBasicEmail">
                             <Form.Label>Email</Form.Label>
-                            <Form.Control type="email" placeholder="Enter email" value={email} onChange={(e) => setEmail(e.target.value)} />
+                            <Form.Control type="email" placeholder="Enter email" value={email} onChange={(e) => setEmail(e.target.value)} required />
                         </Form.Group>
 
                         <Form.Group className="mb-3" controlId="formBasicPassword">
                             <Form.Label>Password</Form.Label>
-                            <Form.Control type="password" placeholder="Enter Password" value={password} onChange={(e) => setPassword(e.target.value)} />
+                            <Form.Control type="password" placeholder="Enter Password" value={password} onChange={(e) => setPassword(e.target.value)} required />
                         </Form.Group>
 
                         <p>Not a member? <Link to="/signUp" className="text-decoration-none">Sign Up</Link></p>

trivia-forge/frontend/src/pages/myTriviaPage.jsx

@@ -62,14 +62,12 @@ function MyTriviaPage() {
 
     function handleShowWarning(game) {
         setCurrentGame(game);
-        console.log("current game", currentGame);
         setShowWarning(true);
     };
     function handleWarningClose() {
         setShowWarning(false);
     };
     function handleDelete() {
-        console.log("deleting game", currentGame);
         deleteGame(currentGame).then(res => {
             setUserGames(userGames.filter(g => g.id !== currentGame.id));
         });

trivia-forge/frontend/src/pages/signUpPage.jsx

@@ -41,25 +41,25 @@ function SignUpPage() {
                     <Form onSubmit={handleSubmit} className="form-group">
                         <Form.Group className="mb-3" controlId="formBasicEmail">
                             <Form.Label>Email address</Form.Label>
-                            <Form.Control type="email" placeholder="Enter email" value={email} onChange={(e) => setEmail(e.target.value)} />
+                            <Form.Control type="email" placeholder="Enter email" value={email} onChange={(e) => setEmail(e.target.value)} required />
                             <Form.Text className="text-muted">
                                 We'll never share your email with anyone else.
                             </Form.Text>
                         </Form.Group>
 
                         <Form.Group className="mb-3" controlId="formBasicUsername">
                             <Form.Label>Username</Form.Label>
-                            <Form.Control type="text" placeholder="Username" value={username} onChange={(e) => setUsername(e.target.value)} />
+                            <Form.Control type="text" placeholder="Username" value={username} onChange={(e) => setUsername(e.target.value)} required />
                         </Form.Group>
 
                         <Form.Group className="mb-3" controlId="formBasicPassword">
                             <Form.Label>Password</Form.Label>
-                            <Form.Control type="password" placeholder="Password" value={password} onChange={(e) => setPassword(e.target.value)} />
+                            <Form.Control type="password" placeholder="Password" value={password} onChange={(e) => setPassword(e.target.value)} required />
                         </Form.Group>
 
                         <Form.Group className="mb-3" controlId="formBasicConfirmPassword">
                             <Form.Label>Confirm Password</Form.Label>
-                            <Form.Control type="password" placeholder="Confirm Password" value={confirmPassword} onChange={(e) => setConfirmPassword(e.target.value)} />
+                            <Form.Control type="password" placeholder="Confirm Password" value={confirmPassword} onChange={(e) => setConfirmPassword(e.target.value)} required />
                         </Form.Group>
 
                         <div className="d-flex justify-content-center">

trivia-forge/frontend/src/pages/triviaGenPage.jsx

@@ -92,13 +92,10 @@ function TriviaGenPage() {
         }
         //create a new game and category object and add category to game
         //need to change third parameter to current User ID once Users can sign in.
-        console.log("User:", user);
         let game = new Game(Title, Theme, user.id);
-        console.log("Game:", game);
 
         for (let i = 0; i < categories.length; i++) {
             let newCategory = new Category(categories[i].name);
-            console.log(newCategory.name);
             game.addCategory(newCategory);
             //parse response from API
             let sections = responses[i]; // store trivia questions
@@ -138,13 +135,7 @@ function TriviaGenPage() {
                     newCategory.addQuestion(newQuestion);
                 }
             }
-            console.log("Category Questions:", newCategory.questions);
         }
-        console.log("Game Categories", game.categories);
-
-        // Save game to global state and local storage
-        console.log("test:", game)
-        // addGame(game);
         // state property to pass data as object to new route
         navigate('/review', { state: { game: game, page: 'review', isMultipleChoice: isMultipleChoice } });
         //console.log(completion.choices[0].message);

trivia-forge/frontend/src/pages/triviaReviewPage.jsx

@@ -17,8 +17,6 @@ function TriviaReviewPage() {
 	const updateGame = useStore(state => state.updateGame);
 	const addGame = useStore(state => state.addGame);
 
-	console.log(game)
-
 	const HandleUpdateGame = async () => {
 		await UpdateAllForGame(game);
 		updateGame(game)
@@ -43,7 +41,6 @@ function TriviaReviewPage() {
 		}
 	}
 
-
 	return (
 		<div>
 			<title>Trivia Review</title>

trivia-forge/frontend/src/services/saveGameService.jsx

@@ -2,7 +2,6 @@ import * as api from './triviaForgeApiService';
 
 
 export const AddAllForGame = async (game) => {
-    console.log("start game:", game)
     try {
         // Add the game to the database
         //console.log("Adding game:", game);
@@ -38,9 +37,7 @@ export const AddAllForGame = async (game) => {
             }
             newGame.categories.push(newCategory);
         }
-
         // Return the newly created game
-        console.log("end game:", newGame)
         return newGame;
     } catch (error) {
         console.error("Error adding game, categories, questions, or choices:", error);

trivia-forge/frontend/src/services/triviaForgeApiService.jsx

@@ -4,7 +4,7 @@ import { Question } from '../models/question';
 import { Category } from '../models/category';
 import { Choice } from '../models/choice';
 
-const API_URL = 'http://127.0.0.1:5000';
+const API_URL = import.meta.env.VITE_REACT_APP_API_URL;
 
 /* ************************************ User ************************************ */
 
@@ -274,10 +274,8 @@ export const editCategory = async (category) => {
 /* ************************************ Choice ************************************ */
 
 export const getChoices = async (questions) => {
-    console.log("questions:", questions)
     try {
         const response = await axios.get(`${API_URL}/choices`);
-        console.log("response.data:", response.data)
         for (let i = 0; i < response.data.length; i++) {
             if (questions[response.data[i].question_id] !== undefined) {
                 questions[response.data[i].question_id]['choices'].push(response.data[i].text);