Code Monkey home page Code Monkey logo

full-stack-trivia-game's Introduction

Full Stack Trivia Game

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. This trivia app was created for them to start holding trivia games and seeing who's the most knowledgeable of the bunch.

The application allows you manage questions (display, add, delete and search) and also get them by category. It also allows you to play the quiz game, randomizing either all questions or within a specific category.

The backend code adheres to the PEP 8 style guide and follows common best practices.

Getting Started

This project makes use of ReactJS and Node for the frontend and Flask, SQLAlchemy and PostgreSQL for the backend. To be able to run this project locally, all aforementioned packages/libraries must be installed first.

Backend

Installation guide

  • Install the latest version of python for your platform in the python docs
  • Working within a virtual environment is recommended whenever using Python for projects. This keeps your dependencies for each project separate and organized. Instructions for setting up a virtual enviornment when you run this platform can be found in the python docs.
  • Once you have your virtual environment setup and running, install dependencies by navigating to the /backend directory and running: bash pip install -r requirements.txt This will install all of the required packages we selected within the requirements.txt file.

Setting up the database

  • Find steps to install and get started with postgres here.
  • With Postgres running, populate your trivia database using the trivia.psql file provided. From the backend folder in terminal run: bash psql udacity_trivia < trivia.psql

Running the server

  • From within the backend directory after making sure you are working using your created virtual environment, run the server with the following command:
        export FLASK_APP=flaskr
        export FLASK_ENV=development
        flask run
    
    Setting the FLASK_ENV variable to development will detect file changes and restart the server automatically. Setting the FLASK_APP variable to flaskr directs flask to use the flaskr directory and the __init__.py file to find the application.

Testing

To run the tests, run:

    dropdb udacity_trivia_test
    createdb udacity_trivia_test
    psql udacity_trivia_test < trivia.psql
    python test_flaskr.py

This will populate the test database with data.

Frontend

Installation guide

  • This project depends on Nodejs and Node Package Manager (NPM). Before continuing, you must download and install Node (the download includes NPM) from https://nodejs.com/en/download.
  • This project uses NPM to manage software dependencies. NPM Relies on the package.json file located in the frontend directory of this repository. After cloning, open your terminal and run: npm install

Run the frontend server

  • The frontend app was built using create-react-app. In order to run the app in development mode use npm start. You can change the script in the package.json file.
  • After starting tje server successfully, open http://localhost:3000 to view it in the browser. The page will reload automatically if you make edits.

API Reference

View the README.md in the backend folder for the API documentation

Author

  • Karen Okonkwo

Acknowledgement

  • The entire Udacity team!

full-stack-trivia-game's People

Contributors

karenok avatar

Stargazers

Cansu avatar Ashley D avatar

Watchers

James Cloos avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.