MessicaH / DnD-Bundle

Combination of weekly assignment and final project concepts for Promineo Tech front-end course.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

D&D Beginner's Bundle (in progress)

Combination of Week 9, 12, and final project concepts for Promineo Tech front-end course.

Project Summary πŸ“–

  • This started as an exploration of HTML and CSS styling for a basic webpage. We slowly added Bootstrap grid layouts and DOM Manipulation concepts to improve web styling consistencies. (Week 9-10)
  • We then added on API calls and .json files for, say, a way for a DM (Dungeon Master) to manage their various playing groups and their special character attributes. (Week 12 and 15)
  • The final project combined these all within the React-Router framework for easier iteration and manipulation for further updates.

Programming Languages Used:

  • HTML
  • CSS
  • JavaScript
  • Bootstrap
  • React

Helpful Generators for Content

  • D&D Beyond
  • ChatGPT
  • Lorem Picsum
  • Pattern Monster

To-Do Items

  • Finish "Charclass" page for twelve Classes of D&D per each Card element, including: redirect URL, image URL, info, details
  • Launch to live site

After Launch Add-Ons

  • Make a Glossary page or widget
  • How to Roll a new character section
  • Descriptions of all Skills per Class selection/proficiencies
  • Iterative template for Class and Race/Origin cards. Use JSON for stored information

Additional Notes

Share a live URL

  • Remember to include a link to the live demo site in the README file.
  • Be sure to include any relevant login credentials or demo accounts.

For example:

Styling created using ChatGPT Assistant Chat transcript

List the technologies used

  • Include a list of the programming languages, frameworks, libraries, and any other tools used in the development process.
  • This section can help readers understand the technical details of your project.

Highlight your favorite features

  • Choose at least two (but not more than five) features of the app that you are most proud of and explain why.
  • Include the challenges faced in implementing these features and the solutions you came up with to overcome them.
  • You can demonstrate strong problem-solving skills by providing detailed insight into your development process.

Follow the Journey

Posts from working on this project:

Previous To-Do Items

  • Copy/pasta 🍝 Week 9 content and convert into new React components
  • Put above ^^ text and such into Container elements
  • Resolve πŸ”§ Week 12_FINAL issue for updateState (re-rendering) when an item is removed - or use scrape & replace from Week 15 (which already works) βš’οΈ
  • Add in Week 16-MyRouterApp bits for navigation and resolved React-Bootstrap-Icons usage ❀️‍πŸ”₯
  • Update mockAPI "players" list data with saved .json file for names to have reverted version of players list 🎲

Add some code snippets or screenshots

  • Use a section for code snippets to highlight your best code.
  • Include code that demonstrates coding best practices and your technical expertise.
  • Use Markdown code snippets instead of screenshots to make it easy for other developers to understand and replicate the code.

A silver laptop with Visual Studio Code open on screen

Include installation & usage instructions

  • Provide clear instructions on how to install the project on the user's system, including any dependencies or prerequisites that need to be installed.
  • Offer clear instructions on how to use the project (e.g. any relevant command-line options and any configuration files or settings).

Offer a contributing section

  • Use this section to share guidelines for other developers who want to contribute to the project.
  • Share how to submit bug reports, feature requests, and pull requests.

Add a license section

  • Include any relevant terms and conditions, as well as any disclaimers or warranties.

Include your contact info

  • Even though this should be on your main GitHub profile page, you can add your email address, blog URL, or links to your social media profiles here as well.

For other template ideas, check out: https://github.com/Louis3797/awesome-readme-template/tree/main

About

Combination of weekly assignment and final project concepts for Promineo Tech front-end course.


Languages

Language:JavaScript 80.7%Language:CSS 18.4%Language:HTML 0.9%