Research React SPA

In this repository I researched React (with TypeScript) for SPA frontend development.

Tech-Facts

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

• NestJS API

Database (docker):

• PostgreSQL

Start React SPA

Install modules and start application:

cd ./src/client

# clean
rm -rf dist node_modules

# install
npm install

# run spa
npm run dev

Start NestJS API

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

Prisma Studio (Database Administration)

Run Prisma Studio:

cd ./src/server

# run prisma studio
npm run prisma:studio

Open Prisma web UI: Prisma Studio

Adminer (Database Administration)

Open Adminer web UI: Adminer

Login:

• System: PostgreSQL
• Server: db-dev
• Username: root
• Password: pasSworD
• Database: nestjs-api

Swagger (OpenAPI interface)

Open Swagger web UI: Swagger

Toolchain Requirements and Versions

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