Ranker

A full stack app that offers a fun take on decision fatigue in modern life. Users can quickly list and rank items based on aggregated score inputs and save for later recall. Don't make decisions - rank them!
Tech Used
React
MongoDB
Express
Node.js
Jest
JWT
Sass
Netlify
Heroku
MongoDB Atlas
Figma
Affinity Designer
Source Code
APIFrontend

Making Decisions More Fun

Project Overview

Ranker is simple app built to tackle the challenge of filtering the overwhelming amount of decisions we're asked to make in modern life. The goal of the project was to create a platform that makes it easier to list options and create choices.

Building a Clean UI

While doing research to build the concept of Ranker, I knew the app needed to have a clean, simple interface that worked well on mobile views. The UI had to feel responsive, easy to use, also have open-ended scoring criteria. I decided on a split form pattern that neatly groups each section of the form onto it's own page.

Scoring the Options

I organized user interaction to flow in a vertical direction that better accommodates mobile usability. After setting up a form, users run down a quick vertical list and score each item based on an open-ended scale of their choosing. Advanced options can be toggled on the form to give users greater control of their results.

Math Can Be Fun

Ranking hierarchy is displayed at the top of the Score page, so users can immediately see the result of their input. Below this, users can also view a detailed breakdown of each score category to build insight into how each score influenced the results.

Creating a Digital Memory Bank

I developed a database solution that allows users to store rankings for long term use and provide for easier recall. To solve this challenge I wrote a custom backend server using Express and connected it to a flexible, cloud-based MongoDB database.

Organizing the Results

Users can utilize a their personal dashboard to view or edit forms at a later time. I designed custom sliding drawer components that give users a higher degree of interaction with the app. This also helped to neatly organizing the page into user created categories that maximize screen efficiency.

Interested in Working Together?

Let Me Know

Copyright 2021

Brandon Corey Web Development

Designed & Built in KCMO