This was my honours project for BsC(Hons) Computing: Application Software Development at Robert Gordon University, I have since graduated with first class honours
This is a web app for designing an escape room using drag and drop components, videos of the project can be found here
This web app is aimed at escape room designers of all levels
There will be a focus on ease of use for users such as teachers, as the web app could be used to design escape rooms for a classroom
- Allows the creation of escape room designs using a drag and drop interface
- Allows the export of escape room designs in JSON or PDF format
- All designs are tied to a user account and can be accessed by signing in
- Allows accessibility options to be set for a room, that defines constraings that the room must adhere to
- Were possible, will auto generate puzzle solutions
A simple wireframe of the design can be found here, this was the original wireframe submitted as part of the project and may not reflect the projects current state
There are 3 main focuses of the project:
This web app has been designed to allow easy creation and exchange of escape room designs
As far as I am aware there is no set standard for an escape room design, this project attempts to address this by defining escape room designs in JSON format
The web app has been designed to be easy to use so that novice designers such as teachers could use the web app for purposes such as gamification of the classroom
Where possible the web app will attempt to generate solutions to puzzles within a design
Various methods will be experimented with
Escape rooms are becoming more and more popular however accessibility within the escape room industry has not been heavily researched
I have incorporated accessibility options within the designer so that designers can specify the accessibility of their designs
The project is made up of two main packages. One is the client side react app and the other is a node/feathersjs backend server. Please refer to the readmes in the client and server folders.
In the project directory, you can run:
Starts the server project
Builds the react appp Refer to the readme in the client folder for the environment variables needed for the client application.
Puts React App build into servers public directory
Runs the build script first and then starts the server. Use this command to get the project working on your own machine. Please refer to the readmes of the client and server folders.
Starts both the client server and the main server for easier development of the react application.
Runs npm install in both the client and server package after npm install is run
You will need to setup two sets of environment variables, one for the client and one for the server. You can do this using .env files within the client and server folders of this project. Refer to the readmes in the client and server folders to setup your environment variables
Once you've done this, from the root directory run the following script
npm run dev
This will start both the client and server projects in dev mode on your machine
Once you are happy with your build use the following script from the root directory
npm run build
This will build the react app and put the build in the servers public folder
You can then start the server with the following script
npm start
Alternativly you can run the script:
npm buildandstart
To build the react app, put it in the servers client folder and then start the server
Refer to your hosting platforms docs for how to host your server with the react build. Remember to set the server environment variables from the readme
Please refer to the attached license