API Development and Documentation Final Project

Trivia App

Udacity is invested in creating bonding experiences for its employees and students. A bunch of team members got the idea to hold trivia on a regular basis and created a webpage to manage the trivia app and play the game, but their API experience is limited and still needs to be built out.

That's where you come in! Help them finish the trivia app so they can start holding trivia and seeing who's the most knowledgeable of the bunch. The application must:

1. Display questions - both all questions and by category. Questions should show the question, category and difficulty rating by default and can show/hide the answer.
2. Delete questions.
3. Add questions and require that they include question and answer text.
4. Search for questions based on a text query string.
5. Play the quiz game, randomizing either all questions or within a specific category.

Completing this trivia app will give you the ability to structure plan, implement, and test an API - skills essential for enabling your future applications to communicate with others.

Starting and Submitting the Project

Fork the project repository and clone your forked repository to your machine. Work on the project locally and make sure to push all your changes to the remote repository before submitting the link to your repository in the Classroom.

About the Stack

We started the full stack application for you. It is designed with some key functional areas:

Backend

The backend directory contains a partially completed Flask and SQLAlchemy server. You will work primarily in __init__.py to define your endpoints and can reference models.py for DB and SQLAlchemy setup. These are the files you'd want to edit in the backend:

1. backend/flaskr/__init__.py
2. backend/test_flaskr.py

View the Backend README for more details.

Frontend

The frontend directory contains a complete React frontend to consume the data from the Flask server. If you have prior experience building a frontend application, you should feel free to edit the endpoints as you see fit for the backend you design. If you do not have prior experience building a frontend application, you should read through the frontend code before starting and make notes regarding:

1. What are the end points and HTTP methods the frontend is expecting to consume?
2. How are the requests from the frontend formatted? Are they expecting certain parameters or payloads?

Pay special attention to what data the frontend is expecting from each API response to help guide how you format your API. The places where you may change the frontend behavior, and where you should be looking for the above information, are marked with TODO. These are the files you'd want to edit in the frontend:

1. frontend/src/components/QuestionView.js
2. frontend/src/components/FormView.js
3. frontend/src/components/QuizView.js

By making notes ahead of time, you will practice the core skill of being able to read and understand code and will have a simple plan to follow to build out the endpoints of your backend API.

View the Frontend README for more details.

Local Development

The instructions below are meant for the local setup only.

Pre-requisites

• Developers using this project should already have Python3, pip and node installed on their local machines.

• Start your virtual environment From the backend folder run

# Mac users
python3 -m venv venv
source venv/bin/activate
# Windows users
> py -3 -m venv venv
> venv\Scripts\activate

• Install dependencies
  From the backend folder run

# All required packages are included in the requirements file. 
pip3 install -r requirements.txt

Step 1 - Create and Populate the database

1. Verify the database username
   Verify that the database user in the /backend/trivia.psql, /backend/models.py, and /backend/test_flaskr.py files must be either the student or postgres (default username).(See the /backend/setup.sql for more details!)

2. Create the database and a user
   In your terminal, navigate to the /ALX-T-Fullstack-nd-Project-2-API-Development-and-Documentation/backend/ directory, and run the following:

cd ALX-T-Fullstack-nd-Project-2-API-Development-and-Documentation/backend
# Connect to the PostgreSQL
psql postgres
#View all databases
\l
# Create the database, create a user - `student`, grant all privileges to the student
\i setup.sql
# Exit the PostgreSQL prompt
\q

3. Create tables
   Once your database is created, you can create tables (trivia) and apply contraints

# Mac users
psql -f books.psql -U student -d trivia
# Linux users
su - postgres bash -c "psql trivia < /path/to/exercise/backend/books.psql"

You can even drop the database and repopulate it, if needed, using the commands above.

Step 2: Start the backend server

Start the (backend) Flask server by running the command below from the /backend/ directory.

# Mac Users
export FLASK_APP=flaskr
export FLASK_DEBUG=true

# Windows Users
$env:FLASK_APP="flaskr" 
$env:FLASK_DEBUD="true"

flask run

These commands put the application in development and directs our application to use the __init__.py file in our flaskr folder. Working in development mode shows an interactive debugger in the console and restarts the server whenever changes are made. If running locally on Windows, look for the commands in the Flask documentation.

The application will run on http://127.0.0.1:5000/ by default and is set as a proxy in the frontend configuration. Also, the current version of the application does not require authentication or API keys.

Step 3: Start the frontend

(You can start the frontend even before the backend is up!) From the frontend folder, run the following commands to start the client:

npm install // only once to install dependencies
npm start 

By default, the frontend will run on localhost:3000. Close the terminal if you wish to stop the frontend server.

---

Additional information

Running Tests

If any exercise needs testing, navigate to the /backend folder and run the following commands:

psql postgres
dropdb trivia_test
createdb trivia_test
\q
psql trivia_test < trivia.psql
python test_flaskr.py