Home

Web Exhibit

Description

Purpose

To help people learn HTML and CSS by example.

Functionality

• Fuzzy Search for HTML Tags and CSS Properties From the homepage users can immediately search for HTML tags or CSS properties. The search menu implements fuzzy search and is completely navigable using arrow keys and the enter key. A smaller search menu implements the same functionality on the navigation of every page.

• Collection Page On the Collection Page users can view all the exhibits for a given collection or choose to submit their own exhibit.

• Exhibit Page On an exhibit page users can interact with a live code editor that provides a real-time preview of the code. They can also click on the star icon to save an exhibit as a favorite.

• Register & Login Users who wish to mark certain exhibits as their favorites may register for an account or login if they already have an account on the login and registration page.

• Favorites Page Users can see the list of all their favorite exhibits on the favorites page.

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

• Increase favorites functionality. Get the stars to show up right initially.
• Add UX flow for when users submit new proposals. Button only changes text at this point.
• Allow users to add proposals for collections that already have one exhibit.
• Allow users to submit edits to exhibits.
• Some sort of voting system to filter out bad exhibits.
• Pre-set collection needs. E.g. an item for every option of a CSS attribute.
• A list of needed exhibits.