Tech Stack
- Kevin Ge
This is an overarching description, not a comprehensive guide, of Planner’s tech stack.
Website is written in React / Next.js.
React in most cases is used as client-rendering library (JavaScript is sent to browser, entire website is loaded on the browser by the JavaScript code).
Next.js builds on top of React by allowing some HTML to be rendered on the server, before it is send to the browser. It also acts as the server itself (whereas React is not a server and a server needs to be configured separately).
Our backend consists of routes that accept requests to create and modify user accounts and plan data.
For these routes we use tRPC, which is a Typescript framework that allows us to maintain type safety across the HTTP request boundary.
Each route is run on a Next.js serverless function.
Here’s an example of a router: https://github.com/UTDNebula/planner/blob/develop/src/server/trpc/router/user.ts.
For authentication, we use NextAuth.
The authentication route also live on a Next.js serverless function.
Authentication route lives here: https://github.com/UTDNebula/planner/blob/develop/src/pages/api/auth/%5B...nextauth%5D.ts
For database access, we use Prisma.
This allows us to define a schema as such: https://github.com/UTDNebula/planner/blob/develop/prisma/schema.prisma and Prisma will generate Typescript code. It simplifies database access because we no longer have to worry about PostgreSQL internals.
This is also what’s known as an ORM. See: What is an ORM, how does it work, and how should I use one?.
Our validator is written in Python. More information can be found here: Validator.