Live Link: https://phasmophobia-helper.herokuapp.com/
This is a simple companion webapp for Phasmophobia that helps you and your team track the ghost name, its behaviour and the objectives. It also helps you decide what kind of ghost you're dealing with. Also works with Speech Recognition (only available in Chrome/Chromium browsers as of 2021).
| ✨ Features | ⚙️ Installation | 🏗️ Concepts | 📃 Todo list | ⭐ Tech Stack | 📦 Packages | 🔐 License |
- Easy tracking of ghost name, response & objectives
- Automatically find the correct ghost
- Immersive Voice Commands as an alternative input
Looking to just use this webapp? Go to the Live Link here: https://phasmophobia-helper.herokuapp.com/
- Clone this Repo locally
git clone https://github.com/SjorsWijsman/real-time-web-2021/
- With Node & NPM download here installed, run the following command to install dependencies:
npm install
- Setup a MongoDB database, rename the
.env-examplefile to.envand fill in the credentials.
- Build & Start a local server with:
npm start
- Or start a dev environment (with automatic local server updates on code changes) with:
npm dev
For the Real Time Web course I started with 3 concepts to develop during the course. I started with the first concept (Gameplaylists), still visible on the old branch of this repo. Eventually I got demotivated by this concept (not enough challenge) and switched to the Phasmophobia Helper concept.
3 Concepts
| Gameplaylists | Phasmophobia Book | Poker |
|---|---|---|
 |
 |
 |
- Reimplement old Phasmophobia Helper Svelte code
- Implement static site generation with Snowpack
- Setup server & Serve files wtith Express
- Implement basic Socket functionalities
- Add Socket rooms with ingame lobby codes
- Improve Socket stability
- Add better feedback for joining lobbies
- Prevent bottom of page from jumping around when reducing possible ghost amount
Svelte Docs: https://svelte.dev/docs
Svelte is a front-end compiler that makes writing front-end code a lot more fun. Absolutely recommended to use for any project.
Express Docs: https://expressjs.com/
Express is a web framework for Node that allows you to run a simple back-end server.
Snowpack Docs: https://www.snowpack.dev/
Snowpack is a front-end build tool, used in this project to compile the Svelte code to a static site.
Socket.io Docs: https://socket.io/
Socket.io allows you to create realtime and bidirectional communication events between the server and connected clients.
Nodemon Docs: https://www.npmjs.com/package/nodemon
Nodemon watches the files in a working directory and restarts the server when it notices a change, allowing for a seamless dev experience.
Concurrently Docs: https://www.npmjs.com/package/concurrently
Concurrently allows multiple npm commands to be ran 'concurrently' (makes sense, right?)