ts-fullstack-starter: A TypeScript repository from alaneparisot

⭐ Motivation

Well, I don't know about you, but for me, when I have an idea, I don't want my time, energy, and motivation to be eaten by some boilerplate hassle or tedious configuration, which can very quickly become very tiresome 🥱

What I want, at least at first, is to move fast and take the shortest path to make my idea real and alive 🚀

Here comes TS Fullstack Starter 🎉

Now you have the base structure to start the development of your next fullstack web application at light speed ⚡

Check out the demo! Note: You can log in by submitting test as username and password.

📅 Update (December 2021)

Software crafting is a never-ending challenge, with always more modern ways to do things, especially in the fast-paced JavaScript environment. In December 2021, considering what I’ve learned since the beginning of this project, there are things I would do differently:

I would use Apollo GraphQL combined with TypeGraphQL, or at least RTK Query, for productivity reasons.
I would use PostgreSQL combined with TypeORM, for performance reasons.
I would use Redis to handle session-based authentication, for security reasons.
And many other things, but I try not to be too hard with myself 😄

Anyway, for a starter project, good enough is good enough, and done is better than perfect ✅

✨ Features

Types everywhere with TypeScript, on both backend (Express) and frontend (React 17 and Redux Toolkit)
Tests everywhere with Jest, on both backend and frontend (React Testing Library)
NoSQL database with MondoDB
Authentication with JSON Web Token
Routing with React Router
Form with React Hook Form
Internationalization with react-i18next
Logging with Winston
Light/dark theme with Material-UI
Pre-commit hook with Husky

🏭 Architecture

🧱 Backend

src
├── __tests__
├── components
│   ├── auth
│   ├── logs
│   └── users
├── config
├── loaders
│   ├── api
│   ├── database
│   ├── errorHandler
│   ├── middlewares
│   ├── server
│   └── app.ts
├── types
├── utils
└── index.ts

🧱 Frontend

client
├── src
│   ├── __tests__
│   ├── app
│   │   ├── App.tsx
│   │   ├── store.ts
│   │   └── theme.ts
│   ├── components
│   │   ├── styled
│   │   │   └── StyledLink.tsx
│   │   ├── ErrorFallback.tsx
│   │   ├── Page.tsx
│   │   ├── PageFallback.tsx
│   │   ├── ProcessButton.tsx
│   │   ├── Spinner.tsx
│   │   └── TopBar.tsx
│   ├── features
│   │   ├── auth
│   │   ├── home
│   │   └── user
│   ├── types
│   └── utils
│       └── test-utils.tsx
├── i18n.ts
└── index.tsx

🏃 Getting Started

🔧 How to Fork

Import code directly on GitHub.
Delete .git folder.
Delete .git folder in client folder.
$ git init
Change git remote.
Update package.json.
Update README.md.
On MongoDB Atlas, create a new project.
In this new project, create a new user.
In this new project, create a database (main), and a collection (users).
Create a .env file.
In .env file, fill AUTH_ACCESS_TOKEN_SECRET property.
In .env file, fill DATABASE_URI property, with user password, and database.
$ git checkout -b main
$ git add .
$ git commit -m "Initial commit"
$ git push -u origin main

⚠️ Warnings

client > package.json

Add INLINE_RUNTIME_CHUNK=false before script react-scripts build.
Write set INLINE_RUNTIME_CHUNK=false&&react-scripts build for Windows.
Set proxy value (port should match default value in src > config > index.ts).

src > tests

Global environment variables are defined in src > utils > test-utils.ts.
You may need to add jasmine.DEFAULT_TIMEOUT_INTERVAL = 600000 to be able to download MongoDB binaries.

src > config > index.ts

Server port should be read from the variable name PORT in process.env.PORT.
Server port default value should match port value in client > package.json > proxy.

src > loaders > errorHandlers.ts

Avoid JSON.stringify() error.
Keep _next in the method catching Express middleware errors.

package.json

Avoid naming a script install.

📄 License

This project is MIT licensed.

alaneparisot/ts-fullstack-starter