Universal Design - Final Project

Andrew Barlow

Description

A webpage built using the principles of universal design, showcasing the techniques and benefits of universal design.

Technology Stack

Built using React, typescript, sass, and webpack based on the react-create-app boilderplate on npm (but managed with yarn). To get started locally, clone this repo and run yarn install to install node packages. If you don't have yarn installed you can run npm install -g yarn. If you don't have node installed, this project is probably a few steps past where you're at (no shade, it was for me at a time).

To start a development server run yarn start

To build for a production environment, run yarn build

Files

├── package.json
├── public
│   ├── index.html
│   ├── manifest.json
│   └── robots.txt
├── README.md
├── src
│   ├── App.scss
│   ├── App.test.tsx
│   ├── App.tsx
│   ├── content
│   │   ├── content.jsx
│   │   └── img
│   │       └── cute-dog.jpg
│   ├── index.scss
│   ├── index.tsx
│   ├── react-app-env.d.ts
│   ├── reportWebVitals.ts
│   ├── reset.scss
│   ├── responsive.scss
│   └── setupTests.ts
├── tsconfig.json
└── yarn.lock

• build/ holds final compiled project. Not very human readable, but very efficient.
• public/ holds publicly served content. These are used for development server but minimized when built for production.
  • index.html is the main web page this is built on.
• src/ holds the source files which are compiled into publicly served content.
  • index.tsx is the Typescript as XML entry point. Most code is not in here, however.
  • App.tsx is where most of the code is. This mainly holds logic for rendering the site.
  • content/ holds the actual copy text in content.tsx as well as the images in img/.
  • *.scss are sass style sheets. index is the entry point, App has the bulk of the rules, responsive handles media queries for content resizing, and reset has a minimal CSS reset.

Most of the other files are autogenerated for package managers or other automations. Necessary, but not something to mess with unless you know what you're doing.