Merge pull request #38 from emmanueposu/pbranch

Pbranch

README.md

@@ -1,2 +1,16 @@
 # Trivia-Forge
-Trivia game generator
+
+### About:
+Trivia Forge is a web-based trivia game generator that leverages the ChatGPT API to generate trivia questions, choices, hints, and answers. Users can create their own accounts, allowing them to save and access previously created games.
+
+<br>
+
+### Deployment URL:
+https://trivia-forge.onrender.com
+
+<br>
+
+### Screenshots:
+![Home Page](https://yxdrsdfocuonvorowgaa.supabase.co/storage/v1/object/sign/readme.md/homepage.PNG?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1cmwiOiJyZWFkbWUubWQvaG9tZXBhZ2UuUE5HIiwiaWF0IjoxNzE3MzM3ODI5LCJleHAiOjMzMjIxODAxODI5fQ.xZmcZMzwmbCg2d4KAUV2Rljn7gKNONawS_h4Hdy0gas&t=2024-06-02T14%3A17%3A09.538Z)\
+\
+![Game Play](https://yxdrsdfocuonvorowgaa.supabase.co/storage/v1/object/sign/readme.md/gameplay.PNG?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1cmwiOiJyZWFkbWUubWQvZ2FtZXBsYXkuUE5HIiwiaWF0IjoxNzE3MzM4MDMxLCJleHAiOjMzMjIxODAyMDMxfQ.fVkeGYVkkaKZfHFC6EC7jtiwsEwODnaIx6enHhmouG8&t=2024-06-02T14%3A20%3A31.742Z)

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

@@ -25,10 +25,10 @@ function SignUpPage() {
         // call addUser function to add new user to database
         const addedUser = await addUser(user);
         if (addedUser) {
-            alert('User added:', addedUser);
+            alert('Account activated!');
             navigate('/');
         } else {
-            console.error('Error adding user');
+            console.error('Error signing up');
         }
     }
 
@@ -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);