-
Notifications
You must be signed in to change notification settings - Fork 6
Stack
Story Squad is a single page react app written in Typescript. It incorporates a number of libraries such as Material UI, Stripe Elements, and more to function efficiently; below you'll find an explanation of our thought process for each added dependency.
A lot of time, effort, and research went into each decision, but Story Squad is an ever-evolving project, and as its needs change, so too might this list. The main purpose of this section is not to argue the benefits of one solution over another, but rather to explain the reasoning behind each decision for the benefit of the next wave of developers.
There were many reasons React was chosen for this project: it's at the core of the Lambda web program, so everyone on the initial project was familiar with it. It offers excellent performance, routing is simple, and it plays nicely with other libraries. The primary benefit, however, was the ability to build Story Squad as a Progressive Web App, or PWA.
Graig's initial vision for Story Squad was a mobile app, possibly built using React Native. After much discussion, it was decided that a PWA would better serve the program's needs. Not only did the minimal learning curve make development quicker, building a PWA allows Story Squad to bypass the politics of app stores and their relationships with third-parties and instead focus on COPPA compliance.
React-App-Rewired was chosen in order to make QoL tweaks and performance improvements to the project. By adjusting the BabelRC settings, we were able to reduce development size when importing from Material UI. We were also able to use an extended version of ESLint and address errors thrown when importing the PDF worker.
While Typescript was new for most of the web team, we ultimately decided to stretch ourselves because of the many advantages it offered. The Story Squad code quickly grew in complexity beyond the scope of any of our previous Lambda projects; the strong typing and exceptional error handling provided by Typescript helped us to hunt bugs and keep the project on track.
Stripe is a widely recognized, trusted payment processor. We chose to work with Stripe because it adds to the credibility of Story Squad while simultaneously allowing us to pass off responsibility for handling private data to a more secure platform. Stripe Elements, which is provided by Stripe, simplifies the integration process.
Many of UX Designer Lauren Chandler's initial designs lined up well with the components available through Material UI. As such, the web team chose to incorporate the library and tweak where needed, rather than trying to reinvent the wheel. Material UI's clean, simple designs made it easy to create a professional look while still customizing to suit our audience.
JSON Web Tokens are an industry-standard authentication solution. Paired with BCrypt for hashing passwords, this allows secure local password authentication without reliance on third-party solutions.
Paired with React, these are staple libraries of the Lambda web stack. Chosen because they were simple, familiar, and facilitated the project goals.
Story Squad currently uses a modified version of PDF.js, but will soon move to React-PDF for a number of reasons. React-PDF offers features like text highlighting, which will be useful when integrating read-along functionality in a future release. It also functions across a wider variety of browsers.
Used for parsing due dates and tracking children's progress across the competition week.
By working with a shared set of formatting standards in VS Code, the team maintained uniformity and compatibility across our work. These tools also helped cut down on merge conflicts caused by formatting issues.