
# Reporter

[Visit production site](https://reporter.mpq.dev/) &#183; [Github](https://github.com/mpqmpqm/reporter-2021)

Reporter is a [quantified self](https://en.wikipedia.org/wiki/Quantified_self) app that lets users choose what to quantify.

Users select one or more emoji to associate with a particular board. Tapping on an emoji sends a report of that event to the Firestore database, and the app charts the number of reports over time in a calendar view that facilitates trend visualization.

<aside class="media video bleed tall">
  <video 
    controls 
    loop 
    muted 
    preload="metadata"
  >
    <source 
      src="/static/reporter-demo-vote.webm#t=0.01" 
      type="video/webm"
    >
    <source 
      src="/static/reporter-demo-vote.mp4#t=0.01"
      type="video/mp4"
    >
  </video>
  <p>
    Everyone starts out with a predefined `Mood` board, but users can choose what to track and how to express the different possibilities. The visual feedback for button presses encourages so-called "smashing."
  </p>
</aside>

One fun aspect of the app is that different users will choose more and less metaphorical emoji to represent the phenomena they're tracking. A friend of mine uses ☔ for "rainy" moods. On the other hand one of my boards uses the relatively direct 💧 to track when I last watered my plants.

<aside class="media image bleed tall">
 <img 
    src="/static/reporter-demo-cal.jpg" alt="Screenshot of the calendar view from the Reporter app"
  >
  <p>
    Use the calendar view to spot trends in the phenomena you're tracking. This user is having a fairly 😘 June, with a couple small "blue" patches. Selecting a date on the calendar summons a modal with precise report counts for that day.
  </p>
</aside>

The app is written in Next. It performs server-side authentication and uses react-router for client-side routing, with Google Cloud Firestore on the back end to manage users and data.

[Try it now!](https://reporter.mpq.dev/)
