Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/alan345/TER

Fullstack Boilerplate with tRPC, Express and React.
https://github.com/alan345/TER

authentication bcrypt expressjs full-stack fullstack fullstack-javascript httponly-cookie jwt jwt-authentication nodejs npm playwright react reactjs tailwind tailwindcss trpc typescript zod

Last synced: about 2 months ago
JSON representation

Fullstack Boilerplate with tRPC, Express and React.

Host: GitHub
URL: https://github.com/alan345/TER
Owner: alan345
License: mit
Created: 2018-02-27T22:35:39.000Z (over 6 years ago)
Default Branch: main
Last Pushed: 2024-07-24T15:57:05.000Z (about 2 months ago)
Last Synced: 2024-07-25T08:29:17.634Z (about 2 months ago)
Topics: authentication, bcrypt, expressjs, full-stack, fullstack, fullstack-javascript, httponly-cookie, jwt, jwt-authentication, nodejs, npm, playwright, react, reactjs, tailwind, tailwindcss, trpc, typescript, zod
Language: TypeScript
Homepage: https://alan345.github.io/TER/
Size: 1.27 MB
Stars: 739
Watchers: 28
Forks: 155
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

awesome-graphql - NAPERG - Fullstack Boilerplate GraphQL. Made with React & Prisma + authentication & roles. (Implementations / JavaScript/TypeScript)

README

        







Trpc Express React



Boilerplate for a Fullstack App with authentication


## Project

[![GitHub issues](https://img.shields.io/github/issues/alan345/ter.svg)](https://github.com/alan345/ter/issues)

[![GitHub forks](https://img.shields.io/github/forks/alan345/ter.svg)](https://github.com/alan345/ter/network)

[![GitHub stars](https://img.shields.io/github/stars/alan345/ter.svg)](https://github.com/alan345/ter/stargazers)

[![GitHub license](https://img.shields.io/github/license/alan345/ter.svg)](https://github.com/alan345/ter/blob/master/LICENSE)

[![price](https://img.shields.io/badge/Price-Free-green.svg)](https://buymeacoffee.com/fullstackter)

[![paypal](https://img.shields.io/badge/Donate-PayPal-green.svg)](https://buymeacoffee.com/fullstackter)

[![Twitter](https://img.shields.io/twitter/url/https/github.com/alan345/ter.svg?style=social)](https://twitter.com/intent/tweet?text=Wow!:&url=https%3A%2F%2Fgithub.com%2Falan345%2Fter)

## Main Stack

- Trpc https://trpc.io (End-to-end typesafe APIs made easy)

- Express https://expressjs.com (Fast, unopinionated, minimalist web framework for node)

- React https://reactjs.org (A JavaScript library for building user interfaces)

## Other Libraries

- 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)

- JWT https://jwt.io (JSON Web Tokens)

- ZOD https://zod.dev (TypeScript-first schema validation with static type inference)

- Vite https://vitejs.dev (Next generation frontend tooling. It's fast!)

- Bcrypt https://www.npmjs.com/package/bcrypt (A JavaScript library for hashing passwords)

- Playwright https://playwright.dev (Test your web apps headlessly with a single API)

- NPM https://www.npmjs.com (Node Package Manager)

## Features

- Authentication with JWT and HttpOnly cookies (https://owasp.org/www-community/HttpOnly)

- Example of pulling data from an external REST API: Random Beers and random Users (https://random-data-api.com)

- Store the user's details in the React context when logged in (https://react.dev/learn/passing-data-deeply-with-context)

- 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:

```bash

npm i

npm run dev

```

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

## Building

```bash

npm run build

npm run start

```

## Printscreens

#### Main Screen Desktop

![video-demo-ter](https://github.com/user-attachments/assets/e040babe-1d37-4e24-bd8f-cf5c90be93dc)

#### Main Screen Mobile

![ter-mobile-demo](https://github.com/user-attachments/assets/955e33d0-c6be-4680-a961-73f8c060d2cf)

#### 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.

## End-to-end typesafe with Trpc

![trpc-video-ter](https://github.com/user-attachments/assets/7ee27bbb-5e56-484c-b046-fe0186b4321d)

Video from https://trpc.io

## E2E Testing

The tests must be run while the app is running.

#### Running the tests in the Terminal

```

npm run test:e2e

```

![test-ter-terminal](https://github.com/user-attachments/assets/8c6a718b-b4ee-4938-a665-cfd118bdc46c)

#### Running the tests in Vscode

![test-ter-vscode](https://github.com/user-attachments/assets/d87b91ba-e7c8-4f60-ab17-1d61caa4f112)

## Thanks!