/dandd_milestonepro

Primary LanguagePython

D&D Portal

UX

My goal was to build a website where a users could share their experiences, read useful articles related to Dungeons and Dragons and to learn about it searching through our guide, which is well organized by section. Here is can learn about classes, races, spells to be well prepared to play Dungeons and Dragons.

Objective

  • Get more numbers of viewers.
  • Share experiences between users.
  • Teach Dungeons and Dragons to new gamers.

Users

  • Users interested in role playing board games.

Technologies used

  • CSS3
  • HTML
  • Bootstrap
  • GIT
  • GITHUB
  • PyCharm IDE
  • JavaScript
  • Python
  • MongoDB
  • Flask
  • Json file
  • Heroku

Features

  • Browser tested
  • Social Media follow links
  • Registration
  • Forum
  • Articles

Features left to implement

  • Create your own D&D campaign, where you can select battles, monsters and players.

UX Files

Ux files can be found here, they are organized in the following order:

  • Scope Plane
  • Skeleton Plane
  • Strategy Plane
  • Structure Plane

Menu Items

Homepage

Main page of the website. Contains the "About us" section and Guides section

Articles

Contain articles regarding various subjects related to Dungeons and Dragons.

Forum

Where users can ask and reply questions related to Dungeons and Dragon. They can delete and edit their own comments.

Guides

Users can find guides to organize their campaigh, by Races, Classes, Battles and Spells

Login

Users need to be logged in to use Forum section.

Testing

  • User is able to learn about Dungeons and Dragon.
  • User is able to read Articles.
  • User is able to check our guide.
  • User is able to connect on Social networks.
  • User is able to interact through our forum.
  • User is able to log in and log out.

Code

The site was checked with W3C HTML and CSS validators.

Browser

Tested on the following browsers and devices:

  • Chrome
  • Firefox
  • Safari
  • Internet Explorer
  • Apple iPhone 6/7/8/X / iPad / iMac
  • Samsung Galaxy
  • PC Desktop

Work based on other code

My code was first based on the previous Thorin&Company website, Task Management and Chat.

What changed after the user design experience (UDX) phase

  • I tried to organize the content of the website by section, I would like to expand it in the future and it need to have a well based structure.
  • I changed the spell collection on mongodb, as I was not able to retrive distinct value from it, making spells page heavly clutered with informatio.
  • Comments were organized by card.
  • Login was changed to Modal.

Deployment

Website was written using PyCharm IDE, incorporating the technologies listed above. Every step of the project was commited to GITHUB, I have used Heroku to deploy it. The website can be found here: Link preview.

I have commited each change to GITHUB by using feature to commit and push on PyCharm.

To deploy the app I have used Heroku.

  1. Create the App Heroku
  2. Set the Host
  3. Create a Procfile Heroku
  4. Push my Github Repo to Heroku to Deploy

MONGOURI connection string was set on Heroku to prevent it to be show on app.py file, which would be available in github.

Content

Content used in Article and Guides Sections were obtained from:

Forum Section was written by me and my friends

Acknowledgements

The Template can be found here Hamburger navegation bar was found here

This is for educational use only.