I built this web app to give Submittable users a fun new way to explore their data. It reimagines the presentation of fiction, poetry, or other formal document submissions and through a “mission control” dashboard. Submissions become “missions,” acceptances become “landings,” and an acceptance percentage is given a touch of whimsy!
It was a chance think creatively with data and tackle new technical challenges. I drew custom illustrations, animated SVGs, devised a conditional rendering structure, and practiced uploading and validating CSV files with React and Express.
Design
Submittable as a platform is lovely, but its primary purpose is to manage files. This lead me to the idea of a space-themed approach that could simplify the data and make a fun UI.
With that in mind, I started with a logo. It went with a hand drawn design that would set the tone– simple, warm, and inviting.
I then found an accompanying icon set through Game Icons and imported them with react-icons. With a touch of color and sizing up, the icons really shine. For a bit more warmth, I added SVG animation filters on the front page and a spinning keyframe effect on the spiral in the “missions” section.
Finally, to make sure the key data was clean and sortable, I put the more complex data in a sortable table with react-bootstrap-table.
Technical
Originally, I’d hoped to use the Submittable API– having users log in to gain access to their data. However, after a bit of correspondence with their team, I learned those features are currently only available to organizations (publications), not developers or users.
However, the UI does allow for a simple CSV export:
From here, I decided to go with a user upload that would then clean and tally the CSV into a new JSON object. On the front-end, conditional rendering manages the initial submission form and an exploratory view with options to toggle between distinct and similar titles.
Find the code on Github.