Home

Web Exhibit

Description

Purpose

To help people learn HTML and CSS by example.

Functionality

• fuzzy search on the homepage
  • keyboard navigation (arrow keys, enter)
• exhibit page
  • add an exhibit
  • view exhibits
• exhibits
  • codemirror editor
  • favorite star (doesn't save anything yet)
• log in

Database Schema

Collection

A collection represents a single HTML tag or CSS property and its examples.

{
    _id: "5661efa77648c1a3115bce54",
    title: "background",
    summary: "a shorthand for setting the individual background values in a single place in the style sheet.",
    category: "css",
    exhibits: [{
        _id: "5668d7a24c3d3f94101e3492",
        title: "Green Background",
        code: "<div style='background: green;'></div>"
    }]
}

Fields
title - a string representing the title of the collection, e.g. '<div>' or 'margin'
summary - a string representing a brief description of the collection
category - a string representing the type of collection, e.g. 'css' or 'html'
exhibits - an array of exhibit objects associated with the collection

Exhibit

An exhibit is a code snippet that demonstrates a specific HTML tag or CSS property in action.

{
    _id: "5668d7a24c3d3f94101e3492",
    title: "Centered Text",
    code: "<div style='text-align:center;'>Centered Text</div>"
}

Fields
title - a string representing the title of the exhibit, e.g. 'Simple Flexbox Layout'
code - a string representing the raw code of the exhibit

User

A User represents someone using the site.

{
    "_id": "5669b57f537c1dd01ad06a7e",
    "username": "johnsmith",
    "name": "John Smith",
    "password_hash": "$2a$10$rDY/n5/ftpgQiyaHE0HrOufHSG02L0PxkrKMcLHfrGCzgRNvG/4iy"
}

Fields
username - a string representing the username
name - a string representing the user's preferred name
password_hash - a string representation of a hashed and salted password

Future work

• hook up favorites to the back end
• fix navbar contrast
• get user login fixed
• add UX flow for when users submit new proposals. No response after submit click right now
• allow users to add proposals for collections that already have one exhibit
• screenshots to the wiki