TriviaDart is a simple Trivia web application that utilizes both the Open Trivia DB and The Trivia API, which both offer generous free API usage. The Open Trivia DB Source is rate limited to one question every 5 seconds (an alert is shown when that source is selected to inform users). TriviaDart also has an in-house API that has over 45,000 trivia questions. Currently, there are no options available for these questions, but this will be added in the future. The in-house API utilizes Supabase.
TriviaDart allows you to select one of the above mentioned APIs, a category (Any by default), and the ability to show multiple choice options if you are stuck!
Themes! There are many themes and fonts available for you to customize TriviaDart to your preference. Simply click/press on the settings icon in the bottom right of the screen to select your theme, font, and font size.
You are able to install TriviaDart as a Progressive Web Application (PWA) on any modern device. This will allow the application to be "installed" and appear like any other application on your phone/tablet/desktop. To install TriviaDart as a PWA, follow these steps:
- Go to TriviaDart in your browser.
- Depending on your browser, the next steps may change.
- Click on the "install" icon in the URL bar (often at the far-right end next to the share or favorite buttons).
- More information can be found in the Mozilla Developer Documentation.
- Go to TriviaDart in your browser.
- Depending on your browser, the next steps may change.
- If you are on iOS Safari, click the "Share" button, then click "Add to Home Screen".
- If you are on Android, click on the settings button, then click "Install".
Note: Chromium-based browsers work best for installation of PWAs.
- Clone this repo locally:
git clone https://github.com/tpbnick/Trivia-Dart.git. - Run
npm installto install dependencies. - Run
npm run devto start up the application.
If you want to use Supabase to run your own trivia database, you can create a database and a .env file in the root of this project. Add VITE_SUPABASE_URL and VITE_SUPABASE_APIKEY to the .env for the SupaBase.ts file to load correctly. The TriviaDart database is setup with the table name questions, and the following columns:
| Column Name | Data Type |
|---|---|
id |
int4 |
category |
text |
question |
text |
answer |
text |
incorrect_answers |
text[] |
The data inside the incorrect_answers is formatted as follows (Note: there must be three wrong answers for the Trivia.tsx component to render correctly):
["wrong answer 1", "wrong answer 2", "wrong answer 3"]You are free to use the trivia.csv file found in this repository to populate your own database. The questions inside this csv were sourced from this Reddit post. No incorrect_answers are provided in this csv because of the amount of time it would require to add.
If you do NOT want to host your own TriviaDart source, see How to Remove TriviaDart Source.
I personally host this web application on Netlify, which will automatically build any time I make a push/merge to the master branch. Make sure to add the environment variables to your deployments on your preferred hosting provider.
TriviaDart is also deployable using Docker. Simply run docker-compose up inside the root folder of this application, with the Docker service running on your machine, and it should stand up a TriviaDart container running on port 3000. If you want to change this port, you can edit the docker-compose.yml file to use whichever port you want. Important: If you do not want to self host your own Supabase source, please review the next section. If you don't, the application will fail to build/deploy.
If you don't want to see the TriviaDart source in the sources dropdown, comment out the TriviaDart source in the TriviaSources dropdown, copy/paste the Trivia.tsx file from the NoTriviaDartSource folder into the Trivia.tsx file in the main src/components folder. You will also need to delete the SupaBase.ts file in the components folder. After making these changes, redeploy the application.
You should now only see the OpenTriviaDB and The-Trivia-API sources in the source dropdown.
All trivia questions provided by OpenTriviaDB and The-Trivia-API are licensed under the Creative Commons Attribution-NonCommercial 4.0 International License.