Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/cerivitos/what-the-fake-web
What The Fake web game - Can you tell which headline is REAL?
https://github.com/cerivitos/what-the-fake-web
angular angular13 fake-news firebase firestore news quiz reddit-api tailwind tailwind-css trivia trivia-game trivia-quiz-game vercel vercel-serverless
Last synced: 8 days ago
JSON representation
What The Fake web game - Can you tell which headline is REAL?
- Host: GitHub
- URL: https://github.com/cerivitos/what-the-fake-web
- Owner: cerivitos
- License: mit
- Created: 2022-01-16T14:52:59.000Z (about 3 years ago)
- Default Branch: master
- Last Pushed: 2022-02-11T14:23:14.000Z (almost 3 years ago)
- Last Synced: 2024-11-23T02:29:53.472Z (2 months ago)
- Topics: angular, angular13, fake-news, firebase, firestore, news, quiz, reddit-api, tailwind, tailwind-css, trivia, trivia-game, trivia-quiz-game, vercel, vercel-serverless
- Language: TypeScript
- Homepage: https://wtf.notmydayjob.fyi
- Size: 2.12 MB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
[What The Fake](https://wtf.notmydayjob.fyi)
###
🤔 Choose which headline is REAL
🔥 5 rounds
🎖️ Challenge your friends
This is the web version of an Android game I made some time back. You can try out the app [here](https://play.google.com/store/apps/details?id=com.chanwaikit.fakenews).
## Stack
- Angular 13
- Tailwind CSS v3
- Firebase (Firestore and App Check)
- Hosted on Vercel
## Try it
Ensure you have installed the Angular CLI and clone the repo.
Install required dependencies
```
npm install
```
As this project uses Vercel serverless functions (located in the `/api` folder), we need to use a Vercel dev server to call the endpoints. Install the Vercel CLI and run
```
vercel dev
```
to start a dev server on `http://localhost:3000`.
## Notes
### Vercel
The setup of this app is specific to hosting on Vercel.
- As mentioned above, `/api/posts` and `api/query-env` endpoints will only work when hosted on Vercel, as Vercel will automatically create the serverless function end points.
- In addition, `api/query-env` reads a Vercel system env variable to get the latest commit hash to display as a version number.
### Firebase
Players can send a game link to challenge friends using the same set of news headlines.
- News headlines are stored in Firestore and dynamic routing using the Firestore document ID is used to retrieve the news headlines.
- Firebase App Check is used for authentication.
To try for yourself, you need to create your own Firebase project and replace the config object in `/src/environment.ts` and `/src/environment.prod.ts` with your own.
```
firebase: {
apiKey: 'xxx',
authDomain: 'xxx.firebaseapp.com',
projectId: 'xxx',
storageBucket: 'xxx.appspot.com',
messagingSenderId: 'xxx',
appId: 'xxx',
measurementId: 'xxx',
},
appCheck: {
key: 'xxx',
},
```
You also need to [configure App Check](https://firebase.google.com/docs/app-check) to whitelist your hosting domain.
Note: In my experience, some VPN and DNS settings block the App Check authentication flow. If you encounter 403 or 400 http errors, check if that is the issue.
### Services
The following services are used in this app:
- `get-posts.service.ts`: Retrieves the news headlines from the Reddit API.
- `game-controller.service.ts`: Handles the game loop, sets number of rounds and checks answers.
- `results.service.ts`: Writes to Firestore when the player creates a Challenge game, or updates the latest score to an existing Challenge game.
## Licence
MIT
## Appreciation 😀
If you like the game and want to support the developer, please consider [buying me a coffee](https://www.buymeacoffee.com/cerivitos).
