Stack References

• Core Stack Components
  • Javascript/Typescript
  • React
  • Firebase
    • Cloud Firestore
    • Firebase Authentication
  • Google Classroom API
  • MUI
• Other important packages
  • React Query v3
  • Spritesheet animations
    • react-responsive-spritesheet
    • ReactPixi
  • React Router
  • React Quill
  • Fuse.js
• Future Stack Options
  • Next.js
  • Alternate component frameworks
• Development Tools
  • Linting and formatting tools
  • Misc. tools

This page is for compiling important resources, references, and information for Questable's tech stack! The list of technologies below is not exhaustive, and additional project dependencies can be found in the package.json in the repository.

A Senior SWE leading a Questable-related project should read this page carefully and familiarize themselves deeply with the different stack components. Any technical questions can be directed to matthewsu@college.harvard.edu.

---

Core Stack Components

Javascript/Typescript

Our stack language!

• Typescript Documentation
• TS in 100 seconds

React

Our frontend JS framework!

• Beta documentation is most helpful
• React documentation on composition

Firebase

Cloud Firestore

Our database

• Cloud Firestore documentation

Firebase Authentication

Our user authentication manager

• Firebase Authentication documentation

Google Classroom API

• GCR API documentation
• Guide to webapp authorization using Google Identity Services
  • As of May 2023, our authorization flow is handled using google-oauth-gsi
• Guide to accessing Google API using OAuth 2.0

MUI

Our frontend component library

• MUI Documentation
  • Make sure you're on v5 docs and not v4 docs!
  • Generally the condensed code snippets in the documentation are enough for understanding the components, but you can click <> to view detailed source code in Typescript and/or Javascript
• MUI guide to creating reusable components and utilizing app-wide theming

---

Other important packages

React Query v3

Hooks for fetching and managing 3rd party data (Firebase, APIs)

• React Query v3 documentation (We are using v3, not v4!)
• react-query-firebase documentation
  • react-query v3 hooks for working with Firebase (Firebase auth, Firestore database)

Spritesheet animations

react-responsive-spritesheet

Questable's current spritesheet navigation/animation package. This is pretty old and so it does not work well with modern React state

• react-responsive-spritesheet documentation

ReactPixi

Future spritesheet naviation/animation package that will integrate well with React state and provide better animations

• ReactPixi documentation

React Router

Client side page routing in React

• React Router documentation

React Quill

Rich text editor used in Questable

• react-quill documentation
• Original Quill.js documentation

Fuse.js

Fuzzy search engine used in Questable

• Fuse.js documentation

---

Future Stack Options

Next.js

An industry-grade "extension" of React with several optimizations for more performant webapps

• Documentation

Alternate component frameworks

• Potentially Chakra UI or Mantine or even Tailwind UI with Tailwind CSS

---

Development Tools

Linting and formatting tools

• ESLint: Our Javascript linter. Statically analyzes our code to detect issues in formatting/consistency
• Prettier: Our automatic code formatter. Better formatting capabilities than ESLint but doesn't handle quality issues
• EditorConfig: Helps VSCode conform to our formatting settings as we code.
• Husky: Git hooks that auto-lint and format our code when we make a git commit

Misc. tools

• Better Comments: Allows you to add different types of comments like // TODO (todo), // ! (error), // ? (question), etc.
• Git Blame: Shows who made the last commit to the current line of code in VS Code's bottom status bar
• VS Code Liveshare: Allows you to share your codespace with a teammate for working on the same files