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.

ranker setup

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.

ranker design

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.

ranker scores

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.

ranker 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.

ranker save

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.

ranker dashboard

Interested in Working Together?

Let Me Know