Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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: 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 (almost 7 years ago)
- Default Branch: main
- Last Pushed: 2024-11-03T23:56:25.000Z (2 months ago)
- Last Synced: 2024-11-04T00:25:35.680Z (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.43 MB
- Stars: 760
- Watchers: 27
- Forks: 160
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- 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
[](https://github.com/alan345/ter/issues)
[](https://github.com/alan345/ter/network)
[](https://github.com/alan345/ter/stargazers)
[](https://github.com/alan345/ter/blob/master/LICENSE)
[](https://buymeacoffee.com/fullstackter)
[](https://buymeacoffee.com/fullstackter)
[](https://twitter.com/intent/tweet?text=Wow!:&url=https%3A%2F%2Fgithub.com%2Falan345%2Fter)
## Main Stack
- **T**rpc [trpc.io](https://trpc.io) - End-to-end typesafe APIs made easy
- **E**xpress [expressjs.com](https://expressjs.com) - Fast, unopinionated, minimalist web framework for Node.js
- **R**eact [reactjs.org](https://reactjs.org) - A JavaScript library for building user interfaces
## Preview
## Other Libraries
- [Bcrypt](https://www.npmjs.com/package/bcrypt) - A JavaScript library for hashing passwords
- [Drizzle](https://orm.drizzle.team/) - A TypeScript-first ORM for Node.js
- [JWT](https://jwt.io) - JSON Web Tokens for authentication
- [NPM](https://www.npmjs.com) - Node Package Manager for managing dependencies
- [phosphoricons](https://phosphoricons.com) - A flexible icon family for interfaces, diagrams, presentations — whatever, really
- [Playwright](https://playwright.dev) - Test your web apps headlessly with a single API
- [Postgres](https://www.postgresql.org) - The world's most advanced open source database
- [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
- [HttpOnly cookies](https://owasp.org/www-community/HttpOnly) for Authentication (Signup, login, and logout)
- [NPM Workspace](https://docs.npmjs.com/cli/v8/using-npm/workspaces) in a monorepo setup to share files between the client and server
- 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
- Make sure a postgres database is running
- Create a database called `ter`
```bash
psql -U user // replace user by your postgres user
CREATE DATABASE ter;
```
- Update the [file](https://github.com/alan345/TER/blob/main/shared/env.ts) `env.ts` with with your database credentials
- Run in the terminal In the root directory:
```bash
// Install the dependencies
npm i
// Setup the database
npm run push
// Seed the database
npm run seed
// Run the app (it will run the client and the server automatically)
npm run dev
```
## Building for production
- Remove this [file](https://github.com/alan345/TER/blob/main/shared/env.ts) `env.ts` and use [dotenv](https://www.dotenv.org) to store these values
```bash
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.
## End-to-end typesafe with Trpc
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
```
## Other recommendations
- Need a component library? Check out [Chakra UI](https://v2.chakra-ui.com/)
## Who is using TER?
- [Nachonacho.com](https://Nachonacho.com) - The world's largest marketplace for Software & Services
Create a PR if you want to add your project here.
## Miscellaneous
Discover the details of this project in this [Medium post](https://alan-szternberg.medium.com/create-a-full-stack-app-with-trpc-react-and-express-35ed95f0851a)
A "TER" in France stands for "Train Express Régional." It's a regional rail network that provides a vital service connecting smaller towns and cities across various regions to larger urban centers. Managed by SNCF, the French national railway company, TERs are often used for commuting to work, school, or for regional travel, offering an efficient and environmentally friendly alternative to driving. The trains vary in frequency and speed, depending on the region and the distances they cover.