Gallery

Meritt

Released September 2023 Published Deployable
Open Demo
Tech Stack / APIs
Better Auth
Drizzle ORM
React
Bun
Tan Stack Start
SQLite
Meritt is a dedicated tool built for school clubs and honor societies to replace the patchwork of Google Sheets, Drive folders, and Forms that most organizations rely on. Members can submit proof of their activities and service hours directly through the app, where officers and advisors can review and verify each submission before points are officially counted — no more chasing down screenshots over text or digging through a shared Drive to find who submitted what. Attendance is tracked in-app as well, making it easy to log who showed up and credit them automatically. Everything lives in one place, so advisors spend less time managing files and more time actually running the club.

Meritt is an application, originally designed for High School Honors Societies, for organizations to manage point based submissions, allowing for photo uploads as evidence of a completed task, or QR Submission for automated approvals.

Coming from a background as a manager of one of these point managers, to having two different methods to log submissions, and view submissions, this application consolidates all of it into a single process. Designed with ease-of-use in mind, the application provides easy to use permission and brings everything into delicately designed dashboards

The Initial Version

The initial proof-of-concept version was built specifically for the honors society that I was working on at the time, Tri-M. In this initial version, I ensured that the features we needed worked well enough, including file-submissions, and quick and easy approval submissions. While this version wasn't perfect, it taught me a lot of useful information and improvements that could be brought into the next version. initially, photos uploaded from iPhones (using their common HEIC format), wouldn't render on the interface, and had to be converted into the more widely accepted JPG format, that could be rendered properly.

In this version, I made some technical decisions, that I decided to move away from for some reason or another:

  • Next.JS
    • Next.JS is the most common of the React full-stack frameworks built for the variety of different types of web applications
    • Next.JS seemed slow for the implementation used in Meritt, and wanted enhancements for the next version
  • React
    • The frontend framework that manages state
    • React has the biggest ecosystem of apps and components, shadcn/ui being the biggest reason I used React, for the ease of use of their components
  • DrizzleORM (w/ PostgreSQL)
    • The BEST way (in my opinion), to deal with databases for any JavaScript project.
    • PostreSQL for data storage
  • S3
    • The standard and sufficient way of managing user-uploaded files.
  • Better-Auth
    • Auth.js (or next-auth) migrated auth system, works very reliably

The Next (Current) Version

The following technologies are used in the Meritt Application, and the reasons why I chose these decisions.

  • TanStack Start
    • This was my first project incorperating the TanStack Framework into an application, I used this oppertunity to build the skills, and provide fast and reliable user experience.
  • React
    • Continued using the React because of the expansive ecosystem, including shadcn/ui.
    • The state management is customizable, such as the useEffect hooks
  • DrizzleORM (w/ Turso SQLite)
    • Again, the BEST way to deal with databases
    • However, this application uses SQLite for lighter overhead and doesn't need all the awesome features in PSQL.
  • S3
    • Again, a great way to manage files
  • Better-Auth
    • Makes user management nice to deal with