Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/empobla/sidequest

A web app created to work as a wiki for a personal Dungeons and Dragons campaign and a character and story manager.
https://github.com/empobla/sidequest

expressjs mongodb nodejs pugjs wiki

Last synced: 8 days ago
JSON representation

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

Awesome Lists containing this project

README 

        





[![Portfolio][moreinfo-shield]][moreinfo-url]

[![LinkedIn][linkedin-shield]][linkedin-url]








  

    Logo

  



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

          

        
    2. 

        
  2. 

          Getting Started

          

        
    3. 

        
  3. Roadmap
    4. 

        
  4. Abilities Mastered
    5. 

        
  5. Dependency List
    6. 

        
  6. Versions
    7. 

        
  7. License
    8. 

        
  8. Contact
    9. 

        
  9. Acknowledgments
    10. 

      



## About The Project



[![SideQuest Screen Shot][product-screenshot]](https://sidequest.demo.emilioppv.com)



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



[![MongoDB][MongoDB]][Mongo-url]

[![Express][Express.js]][Express-url]

[![Pug][Pug.js]][Pug-url]

[![Node][Node.js]][Node-url]

[![Heroku][Heroku]][Heroku-url]



(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:

  ```sh

  npm install npm@latest -g

  ```

* Install [MongoDB Community Server][MongoDB-community-url] or set up [MongoDB Atlas][MongoDB-atlas-url]. Instructions for MongoDB Community Server can be found [here][MongoDB-instructions-url].

* Setup a [Cloudinary][Cloudinary-url] account by following the first step on [this tutorial][Cloudinary-instructions-url].



### Installation



1. Clone the repo

   ```sh

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

   ```

2. Install NPM packages

   ```sh

   npm install

   ```

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

   ```text

   DB=



   SECRET=

  

   CLOUDINARY_NAME=

   CLOUDINARY_API_KEY=

   CLOUDINARY_API_SECRET=

   ```

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

  

4. Start the server in development mode!

   ```sh

   npm run devstart

   ```



(back to top)



## Roadmap



- [x] Announcements

- [x] CRUD

  - [x] Hero

  - [x] Story

  - [x] Character

  - [x] Spell

  - [x] Maps

- [x] Pagedown markdown text editor

  - [x] Update editor to be CKEditor5 WYSIWYG

- [x] PDF generation and display of character sheet

- [x] Admin Panel

  - [x] User management

- [x] UI

  - [x] Responsive design for all screens

  - [x] Improve hero view

  - [x] Improve character view

  - [x] Improve story view

- [x] DM Panel

  - [x] Race and Class CRUD

  - [x] Notes

- [x] Comments

- [x] Search

- [x] 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](#sidequest-dd-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](https://emilioppv.com/contact)



Project Link: [https://github.com/empobla/SideQuest](https://github.com/empobla/SideQuest)



(back to top)



## Acknowledgments



* [[CKEditor5] Quick Start](https://ckeditor.com/docs/ckeditor5/latest/framework/guides/quick-start.html)

* [[CKEditor5] Advanced Setup](https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/advanced-setup.html)

* [[CKEditor5] Configuration](https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/configuration.html)

* [[CKEditor5] Config Class](https://ckeditor.com/docs/ckeditor5/latest/api/module_utils_config-Config.html)

* [[CKEditor5] Getting and Saving Data](https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/saving-data.html)

* [[ui.dev] WebPack](https://ui.dev/webpack/)



(back to top)



[linkedin-shield]: https://img.shields.io/badge/-LinkedIn-black.svg?style=for-the-badge&logo=linkedin&colorB=555

[linkedin-url]: https://linkedin.com/in/emilio-popovits



[product-screenshot]: README/images/versions/1.0.0/home.png



[MongoDB]: https://img.shields.io/badge/mongodb-ffffff?style=for-the-badge&logo=mongodb&logoColor=47a248

[Mongo-url]: https://www.mongodb.com/

[Express.js]: https://img.shields.io/badge/express-000000?style=for-the-badge&logo=express&logoColor=ffffff

[Express-url]: https://expressjs.com/

[Pug.js]: https://img.shields.io/badge/pug.js-a86454?style=for-the-badge&logo=pug&logoColor=000000

[Pug-url]: https://pugjs.org

[Node.js]: https://img.shields.io/badge/node.js-090c15?style=for-the-badge&logo=nodedotjs&logoColor=339933

[Node-url]: https://nodejs.org

[Heroku]: https://img.shields.io/badge/heroku-430098?style=for-the-badge&logo=heroku&logoColor=ffffff

[Heroku-url]: https://www.heroku.com/



[MongoDB-community-url]: https://www.mongodb.com/try/download/community

[MongoDB-atlas-url]: https://www.mongodb.com/atlas/database

[MongoDB-instructions-url]: https://www.mongodb.com/docs/manual/administration/install-community

[Cloudinary-url]: https://cloudinary.com/

[Cloudinary-instructions-url]: https://cloudinary.com/documentation/how_to_integrate_cloudinary#1_create_your_account_and_set_up_your_product_environment



[moreinfo-url]: https://emilioppv.com/portfolio/sidequest

[moreinfo-shield]: https://img.shields.io/badge/more%20info-1b1f24?style=for-the-badge&logo=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAMAAAAolt3jAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAApVBMVEUbHyQbHyQbHyRnam2sra+vsbKys7Wsrq+goqQwNDgaHyQaIilbXWGChIZMT1OYmpwYQFoaICYXRF8WUHQZLjwvMzdwcnaztLZ1d3pcX2IaICUXTG0WUHMXS2sXSGcWT3MaKjcpLTFVWFyFh4lTVllvcnWpqqwYOEwZM0QXTW4XTnAaJS8lKS3IycoYPlYaIyt4e36rra60tba5urutr7BQU1cAAAB8HBV3AAAAAnRSTlOR/KrCyFQAAAABYktHRDZHv4jRAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH5wEZCiUZVutNzgAAAGpJREFUCNdjYGBkggNGBmQeiM+EAjC5zCwsrGzsHJwQLhc3ExMPLxMfP5OAIBODkLCIqBi/uASHpJS0jCyDnLyCopIyh4qqmrqGphYDk5Q2WLGOrh63PsgoA0NDI2NDE1PsFqFw0RyJ6gUAuK4HVipJCoQAAAAuelRYdGRhdGU6Y3JlYXRlAAAImTMyMDLWNTDUNTINMTSwMja3MjLVNjCwMjAAAEFRBQlQZi6pAAAALnpUWHRkYXRlOm1vZGlmeQAACJkzMjAy1jUw1DUyDTE0sDI2tzIy1TYwsDIwAABBUQUJeVmGIQAAAABJRU5ErkJggg==