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.
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 โ
- 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
src
โโโ __tests__
โโโ components
โ โโโ auth
โ โโโ logs
โ โโโ users
โโโ config
โโโ loaders
โ โโโ api
โ โโโ database
โ โโโ errorHandler
โ โโโ middlewares
โ โโโ server
โ โโโ app.ts
โโโ types
โโโ utils
โโโ index.ts
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
- 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, fillAUTH_ACCESS_TOKEN_SECRET
property. - In
.env
file, fillDATABASE_URI
property, with user password, and database. $ git checkout -b main
$ git add .
$ git commit -m "Initial commit"
$ git push -u origin main
- Add
INLINE_RUNTIME_CHUNK=false
before scriptreact-scripts build
. - Write
set INLINE_RUNTIME_CHUNK=false&&react-scripts build
for Windows. - Set
proxy
value (port should match default value insrc > config > index.ts
).
- 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.
- Server port should be read from the variable name
PORT
inprocess.env.PORT
. - Server port default value should match port value in
client > package.json > proxy
.
- Avoid
JSON.stringify()
error. - Keep
_next
in the method catching Express middleware errors.
- Avoid naming a script
install
.
This project is MIT licensed.