In this repository I researched React (with TypeScript) for SPA frontend development.
Frontend (client):
- React
- React Hooks
- React Router
- TanStack Query (auto-managed API queries and mutations)
- JSX
- TypeScript
- Vite (local development server)
- Authorization Bearer (JWT)
- Auto Signout
- Forms (Signup/Signin, Create and Edit)
- CSS Modules
- CSS Flexbox
Backend (server):
Database (docker):
Install modules and start application:
cd ./src/client
# clean
rm -rf dist node_modules
# install
npm install
# run spa
npm run dev
Install modules, run database and start application:
cd ./src/server
# clean
rm -rf dist node_modules
# install
npm install
# run database server
npm run db:restart
# run api server
npm run start
# run database server up/down (optional)
# npm run db:up
# npm run db:down
Run Prisma Studio:
cd ./src/server
# run prisma studio
npm run prisma:studio
Open Prisma web UI: Prisma Studio
Open Adminer web UI: Adminer
Login:
- System: PostgreSQL
- Server: db-dev
- Username: root
- Password: pasSworD
- Database: nestjs-api
Open Swagger web UI: Swagger
nest --version
10.3.0
node --version
v20.11.0
npm --version
10.4.0
nvm --version
0.39.7
docker --version
Docker version 25.0.4, build 1a576c5
code --version
1.87.2
Useful extensions:
dbaeumer.vscode-eslint
esbenp.prettier-vscode
editorconfig.editorconfig
ms-azuretools.vscode-docker
prisma.prisma
pkief.material-icon-theme