Stack
Stack refers to the tools we use in our webapp.
Languages
We count markup languages as part of the language section. These languages used in some way in our webapp development, although we prefer using tsx over plain HTML CSS due to the nature of react framework.
- Typescript: Javascript but with typings.
- HTML: Markup language to write the user interface of websites
- CSS: Styling your HTML with
classNamefield and reuse it across code
Primary Stack
These are the nessarary tools we need in order to build our webapp. You must learn all of these tools listed here, or you have no idea how to continue this project.
- NextJS: A full stack web framework that smoothly integrates with web hosting tools like vercel
- React: The library for websites, very bloated and has a bit of steep learning curve to grasp all the concepts.
- MongoDB: Datastore hosting and its easier to setup compared to traditional datastores like SQL.
Secondary Stack
These tools are optional to learn. However, the webapp is tightly coupled with these tools. Opting out these libraries will be very painful and hard.
- Jotai: Global, immutable state library that can store states that are preservable across pages.
- TailwindCSS: Utility CSS classes that can be used directly in code
- Flowbite React: A mixture of flowbite (flowbite is built off of TailwindCSS) and react components
Utility Stack
You don't need to learn these tools, but some code uses these libraries. They are sort of helpful and can speed up the development process quite a bit.
- Immer: Dealing with Immutable data such as react states, jotai atoms
- React Use: Helpful react hooks that isn't provided by default react library
- Zod: Schema validation, helpful to deal with a object matching a schema or not
- Type Fest: Utility types not provided by typescript, provides features like
IntRange<> - Apollo: A "framework?" to send queries using graphql strings to websites that adopt graphql
- Lodash: Utility library to transform data structures, for example a map to a array