SideQuest

A web app created to work as a wiki for a personal Dungeons and Dragons campaign and a character and story manager.

· View Demo ·

Table of Contents

1. About The Project
   • Built With
2. Getting Started
   • Prerequisites
   • Installation
3. Roadmap
4. Abilities Mastered
5. Dependency List
6. Versions
7. License
8. Contact
9. Acknowledgments

About The Project

SideQuest is a web app created to work as a wiki for a personal Dungeons and Dragons campaign and a character and story manager. It is made to facilitate and enhance the Dungeons and Dragons players' experience and facilitate worldbuilding and session creation for the Dungeon Master that runs the Dungeons and Dragons campaign. The main objective of this fullstack development project was to practice and perfect my overall backend development skills.

(back to top)

Built With

(back to top)

Getting Started

To get a local copy up and running follow these simple example steps.

Prerequisites

This project requires Node.js, MongoDB, and Cloudinary. A MongoDB server must be set up locally or in the cloud before using this project. Also, a Cloudinary account must be setup.

• Install npm:

  npm install npm@latest -g

• Install MongoDB Community Server or set up MongoDB Atlas. Instructions for MongoDB Community Server can be found here.
• Setup a Cloudinary account by following the first step on this tutorial.

Installation

1. Clone the repo

   git clone https://github.com/empobla/SideQuest.git

2. Install NPM packages

   npm install

3. In the project's directory, create a .env file with the following keys:

   DB=<MONGODB_URI>
   
   SECRET=<CREATE_A_SECRET>
   
   CLOUDINARY_NAME=<CLOUDINARY_NAME>
   CLOUDINARY_API_KEY=<CLOUDINARY_API_KEY>
   CLOUDINARY_API_SECRET=<CLOUDINARY_API_SECRET_KEY>
   

   Note: Replace everything in between <> with your actual keys, and create a secret key.

4. Start the server in development mode!

   npm run devstart

(back to top)

Roadmap

• Announcements
• CRUD
  • Hero
  • Story
  • Character
  • Spell
  • Maps
• Pagedown markdown text editor
  • Update editor to be CKEditor5 WYSIWYG
• PDF generation and display of character sheet
• Admin Panel
  • User management
• UI
  • Responsive design for all screens
  • Improve hero view
  • Improve character view
  • Improve story view
• DM Panel
  • Race and Class CRUD
  • Notes
• Comments
• Search
• Templatable CSS using variables

(back to top)

Abilities Mastered

• Fullstack Web Development
• Web Security
• Ajax
• Webpack
• Implementation of WYSIWYG text editors (such as CKEditor)
• PDF creation and manipulation through JavaScript
• Use of APIs
• JavaScript DOM and CSS manipulation
• Templatable CSS
• Application and use of Regular Expressions
• Responsive web design
• Version control (GitHub)
• Wireframing
• Deployment to platforms such as Heroku

(back to top)

Dependency List

Data dependencies:

• mongodb: For connecting to MongoDB
• mongoose: Middleware for MongoDB

Media dependencies:

• cloudinary: For image uploads
• multer: For handling enctype="multipart/form-data"

Production dependencies:

• dotenv: For allowing .env files and usage through process.env.VAR for delicate data
• compression: For compressesing files and optimizing website for user use
• helmet: For securing website data

Security dependencies:

• body-parser: For limiting the request body payload the user can submit
• express-rate-limit: For limiting the amount of requests per window of time a user can make
• express-mongo-sanitize: For replacing '$' and '.' from user inputs to prevent NoSQL injection attacks

User dependencies:

• express-session: For handling sessions
• express-validator: For validating and sanitizing user inputs
• connect-mongo: MongoDB session store
• mongoose-bcrypt: For hashing and salting passwords and sensitive information
• passport: For authenticating info and passwords through strategies
  • passport-local: Local strategy for passport
  • passport-local-mongoose: Local strategy for mongoose passport

Flash messages:

• connect-flash: Provides methods for flash messages

PDF Dependencies:

• pdflib: For editing and rendering pdfs programatically

WYSIWYG Editors:

• webpack: For compiling ckeditor5 javascript files into client-side usable javascript modules
• ckeditor5: For the WYSIWYG editor

(back to top)

Versions

These are the versions that have existed for SideQuest D&D website, with some pictures and a description of each version.

SideQuest D&D Alpha

This was the first release of SideQuest D&D. It was released August 4, 2020. This version of the website was not very popular and was in a primitively functional state.

This release offered the following functionalities:

• Announcement creation and display in homepage
• Hero creation and modification
• Story creation and modification
• Character creation and modification
• Spell creation and modification
• Markdown text editor (pagedown)
• PDF generation and display of character sheet
• Superficial admin user management

This release had the following problems:

• DM had to create heroes for the users
• Hero creation UI was non-intuitive and 100% manual
• UI overall was ugly
• Admin section was unintuitive and had very restricted functionality

SideQuest D&D Alpha can no longer be found in this repository.

Images

Home Page

Hero View

Hero Spells View

Story View

Edit Hero Spells

Edit Story

SideQuest D&D Release v1.0.0

This is the current stable released version of SideQuest D&D. It has a completely reworked UI and has many more features than the alpha version offered. Users liked this version a lot and used it much more.

The most popular pages of this release are the Characters and Story pages.

This release offered the following functionalities:

• Improved UI:
  • Responsive design for all screens
  • Improved hero view UI
  • Improved character view UI
  • Improved story view UI
• New additions:
  • Race and Class creation
  • Map section
  • DM Notes section
  • Comment section
  • Search bar for stories, characters, maps, spells, races, classes, and notes
  • Dedicated DM and Admin Sections
  • WYSIWYG Text Editors (CKEditor5)
• Improved security:
  • Validation and sanitization of all input fields (Prevent XSS attacks)
  • Body-parsing to limit user input payloads (prevent DoS attacks)
  • Rate-limiting to limit amount of user requests in a time window (prevent DoS and Brute Force attacks)
  • Further sanitization of strings starting with '$' and '.' to prevent NoSQL injection attacks
  • Default production render page as to not show actual errors to users
• Re-designed hero schema
• More intutive character creation, many things were made automatic
• Dedicated spell page for spell creation, lookup, and editing
• Ajax implementation for spells
• More expansive Admin permisions and functionality
• Templatable code
• GitHub deployment

Images

Home Page

Hero Page

Hero View

Character Page

Character View

Story Page

Story View

Map Page

Map View

Login Page

Signup Page

User Account Page

Edit Hero

Spells Page

Edit Character Page

Edit Story Page

Edit Map Page

Admin Account Page

Admin Users Page

Admin User Edit

Admin and DM Announcement Edit

Admin Races Edit

Admin Classes Edit

DM Account Page

DM Note Page

DM Note Creator

DM Note Viewer

DM Note Editor

Fun Fact: This project is composed of 11,272 lines of code.

(back to top)

License

This project is property of Emilio Popovits Blake. All rights are reserved. Modification or redistribution of this code must have explicit consent from the owner.

(back to top)

Contact

Emilio Popovits Blake - Contact

Project Link: https://github.com/empobla/SideQuest

(back to top)

Acknowledgments

• [CKEditor5] Quick Start
• [CKEditor5] Advanced Setup
• [CKEditor5] Configuration
• [CKEditor5] Config Class
• [CKEditor5] Getting and Saving Data
• [ui.dev] WebPack

(back to top)