The Fair Chance Project Website - A Technical Spec

Team: Zaki Smith, Michael Taylor, Alex Qin, Gaby Marraro

Overview

A proposal for the design and implementation of thefairchanceproject.com

Current Solution/Context

Currently, mycollateralconsequences.com serves as a relatively barebones website, with minimal design and information, and little opportunity for further engagement with the project.

Proposed Solution

TFCP's website should be (re)built to reflect the growing nature of the organization, with elegant design, extensive information about the project and its impetus, and clear opportunity for actionable involvement with and support of the organization, all while being technically implemented to reflect the living nature of the website, its contents, and its features.

Goals

Why: (taken from mycollateralconsequences.com) The moment an individual pleads guilty to a crime, collateral consequences legally limit that person’s job prospects, housing options, educational options—as well as their ability to support their own families. They prohibit an individual from receiving a fair chance for rehabilitation after prison. My Collateral Consequences (TFCP) [was launched] to raise awareness about the 47,000 laws affecting formerly incarcerated individuals & their families across the U.S. and to make real legal reform.

What: The Fair Chance Project website should aim to educate people about these 47,000 laws which keep formerly incarcerated people indebted to a "silent life sentence", even years after their release. The website should serve as a central hub for learning about these collateral consequences, to collect donations, and to provide people interested in joining the project, as volunteers or otherwise, with a way to communicate with the team. These goals are not exhaustive, and this section should be refined and revisited.

Who: The website's target audience is those who have been affected by these "collateral consequences", and those who have the means to target and change them.

Technical Implementation & Specifications

Requirements:

Extensible
Easy management of assets (for non-technical folks as well?)
Responsive design (mobile first)

Hosting/Content Management

Strapi with Gatsby.js
- Strapi: Content Management System (CMS); Node.js API framework with headless CMS capabilities
  - Open source (free) Headless CMS
  - Extensible plugin system
  - Customizable
  - Large set of built-in features: Admin Panel, Authentication & Permissions management, Content Management, API Generator
- Gatsby: free and open source static site generator, website framework for React
  - gatsby-source-strapi
  - Plugin for pulling documents into Gatsby from a Strapi API
  - Query with GraphQL

Resources:

Tutorial: Gatsby w/ Strapi: https://blog.strapi.io/building-a-static-website-using-gatsby-and-strapi/
Strapi Tutorial: https://snipcart.com/blog/node-js-react-strapi-tutorial

Frontend:

Gatsby.js framework
- Static Progressive Web App (PWA) generator
- -> Based on React.js,
Bulma // Github
- Lightweight, modern CSS framework based on Flexbox
- Grid system
- Responsive design
- Mobile first
- (?) React with Bulma
  - Bloomer -- React components for Bulma
  - react-bulma

Deploying

Netlify
- Deploying Gatsby to Netlify
Heroku
- Deploying Strapi to Heroku

Alternative Solutions

Hosting/Content Management
- sanity.io
  - Gatsby w/ Sanity
Responsive frameworks:
- Skeleton
- Bootstrap
- Pure

Site Design & Requirements

Logistics

Designs by Michael Taylor
Domain name purchased (thefairchanceproject.com)
Fonts purchased/acquired

Layout & Content

Pages
- Home
  - Hamburger menu navigation
- About
  - 3 full-screen callouts
  - Our mission
  - Out story
- Get involved
  - Attend a Dinner
    - Form
  - Spread the Word
    - Form
  - Donate
    - Form
- Contact
  - Join the Movement
    - Form

MVP

This should be updated after discussion with the entire team

v2