How-To

How-To is an app that makes it easy to browse and create tutorials or “how-to” guides. Users are guided through a quick sign-up/sign-in process before they can begin creating their own guides. Users are able to fill in their guide’s info, upload images, and add guide instructions from their personalized user dashboard.

The app utilizes React as it’s front-end framework and handles state management using Redux. Node and Express were used to create the app’s backend and API. The app’s database was created using PostgreSQL. Uploaded images are stored in a modular AWS S3 bucket.

Tech Stack

React.js

Redux.js

Node.js

PostgreSQL

Express

AWS S3


Details

Completed: OCT 2019

Project Duration: 2 Weeks

Role: Identity, UI/UX, Front & Back End


UI Design

I designed How-To to work best on phone-sized devices and worked my way up to bigger screen sizes. My ultimate goal was to keep the design simple but still visually interesting.

#55D55A

#3AB6EC

#F3C41E

#E94949

#EC7723

#171717

Fonts
UI Elements
Prototype