Skip to content

Style Guide

Jump to bottom
8illy edited this page Dec 3, 2022 · 17 revisions

App Name

Poll Buddy

(not PollBuddy)

Branding

Here you can find our branding folder that holds our files for our logo and fonts.

Fonts

For text we use Baloo 2.

For the logo font we use Fredoka One.

Colors

Name Used For Hex Color
Darkest Purple Header Background #25162c
Dark Purple Main Background #4d3658
Base Purple Logo Background #7f6491
Light Purple Logo Text #dfcfea
White Most Text #FFFFFF
Light Gray #EEEEEE
Gray Placeholder Text #707070
Dark Gray #25292A

Terminology

'Term" is the official name of the item, whereas "What it refers to" offers alternative ways to describe the Term, but these should not be used in an official capacity.

Term What it refers to
People Users, Students, someone registered on Poll Buddy
Groups Classes, can contain Polls and People
Group Admin Instructors, people who can manage a group
Group Members People who are in the group
Polls Lessons, they comprise of multiple Questions
Poll Viewers People who have access to look at the poll, may or may not have answered the Questions
Questions Part of Polls
Login Logging into a Poll Buddy Account
Register Registering for a Poll Buddy Account
Development Mode Running the app in development rather than production mode. Also called dev mode for short

Design Guide

Text boxes

  • Label above
  • Placeholder text inside
  • Colors: Darkest Purple for background, White for text

Poll Code Formatting

  • a-z0-0
  • 6 characters
  • Case insensitive
  • Visually use capital letters

Code and Wiki Documentation

Please note, this is a work-in-progress. There will be issues. Please feel free to open an issue or PR.

Code

We use JSDoc 3 for documentation throughout the code. It should hopefully be pretty self-explanatory. The main things we care about are just a brief description, what the endpoint returns, the name (for the spec more than anything), and what parameters it takes in.

Example (taken from backend/routes/users.js):

/**
 * A basic high-level description about what this code section does.
 * @getdata {void} Data that the endpoint expects to receive as part of the url. Ex: `/api/endpoint?var1=test1&var2=test2`
 * @postdata {void} Data that the endpoint expects to receive in the body of the request. Ex: `var1=test`
 * @returns {void} Generally a JSON object with a status code. Ex: Status 200: { "result": "success", "data": "This works" }. Please explain all possibilities. 
 * @name backend/users/whatever-the-route-is + "_GET" or "_POST" depending on the type.
 * @param {string} path - Express path (generally just say exactly that)
 * @param {middleware} middleware - Optional, could be something like rpi.bounce or other Express middleware functions
 * @param {callback} callback- function handler for endpoint (generally just say exactly that)
 */
router.get("/", function (req, res, next) {
  ...
}

We are not currently using the HTML generation feature, but may explore it in the future. Please feel free to open an issue or PR. Our current focus is simply to have things documented in a standard and simplistic way.

Error Container Popup

Styling Value Notes
border border: 2px solid #e84e43;
background background: #e83225;
font n/a defaults to white (see fonts section)

Wiki

The Wiki documentation should have the same information as the code, but visually formatted and expanded upon. This would be a good spot to explain further how/why things are what they are, or other details that may not fit well in the code. Please feel free to add on examples/usages to the end as well.

Example:

## GET /api/users/whatever-the-route-is
* A high-level description about what this code section does, plus additional relevant details. This can (ideally) be long to cover all relevant information.
* GET Parameters: Data that the endpoint expects to receive as part of the url. Ex: `/api/endpoint?var1=test1&var2=test2`
* POST Data: Data that the endpoint expects to receive in the body of the request. Ex: `var1=test`
* Returns: A JSON object with a status code. Ex: Status 200: { "result": "success", "data": "This works" }. Please explain all possibilities. 
* Parameters: 
  * {string} path - Express path (generally just say exactly that)
  * {middleware} middleware - Optional, could be something like rpi.bounce or other Express middleware functions
  * {callback} callback - function handler for endpoint (generally just say exactly that)
Clone this wiki locally