Open Source Ecosystems

Project

Main Stack

Trpc https://trpc.io (End-to-end typesafe APIs made easy)
Express https://expressjs.com (Fast, unopinionated, minimalist web framework for Node.js)
React https://reactjs.org (A JavaScript library for building user interfaces)

Other Libraries

Bcrypt https://www.npmjs.com/package/bcrypt (A JavaScript library for hashing passwords)
JWT https://jwt.io (JSON Web Tokens for authentication)
NPM https://www.npmjs.com (Node Package Manager for managing dependencies)
Playwright https://playwright.dev (Test your web apps headlessly with a single API)
Tailwind CSS https://tailwindcss.com (A utility-first CSS framework for rapid UI development)
TypeScript https://www.typescriptlang.org (TypeScript is a typed superset of JavaScript)
Vite https://vitejs.dev (Next generation frontend tooling. It's fast!)
ZOD https://zod.dev (TypeScript-first schema validation with static type inference)

Features

Authentication with JWT and HttpOnly cookies (https://owasp.org/www-community/HttpOnly)
Example of pulling data from an external REST API
- Beers and Users (https://random-data-api.com)
- Facts (https://catfact.ninja)
- Movies (https://dummyapi.online)
- Employees (https://dummy.restapiexample.com)
- Albums and Photos (https://jsonplaceholder.typicode.com)
Store the user's details in the React context when logged in (https://react.dev/reference/react/useContext)
Health Check for the server (http://localhost:2022/health)
Select the number of rows to display in the table

Installation

In the root directory (it will run the client and the server automatically). Run:

npm i
npm run dev

Try editing the ts files to see the type checking in action, thanks to Trpc :)

Building for production

Make sure to rename the file (https://github.com/alan345/TER/blob/main/server/env.ts) env.ts to .env
Update the key
Use dotenv (https://www.dotenv.org)
Run:

npm run build
npm run start

Printscreens

Main Screen

Health Check for the server (http://localhost:2022/health)

Motivation

Focusing on developer experience: simple, efficient, and fast. This modern stack uses top-tier libraries to build a full-stack web application. Unlike the T3 app (https://create.t3.gg), we opted not to use Next.js, allowing the frontend to remain as static files, easily stored in cloud object storage like AWS S3. Consequently, this stack is designed for building web apps rather than traditional websites, as it is not SEO-friendly.