A starter template for building full-stack applications with a monorepo structure. This project includes a React frontend and a Node.js Express API, both written in TypeScript. It comes preconfigured with Prettier, ESLint, and Husky for code quality and consistency.

• Show list of transactions
• Add and delete transactions

Based on Traversy Media tutorial.

• React (create-react-app) + TypeScript
• Node.js + Express (server API) + TypeScript
• Yarn (package manager)
• Volta (Node.js/Yarn version manager)
• Package.json workspaces (allows managing dependencies and running both client and server with a single command from the root folder)
• Prettier (code formatting) + ESLint (code linting with different configs for client and server) + Husky (pre-commit hooks)

For additional features, check feature/* branches. Currently available:

• feature/redux - Redux integration for state management
• feature/mongodb - MongoDB integration for storing transactions
• feature/sqllite - TODO: SQLite integration for storing transactions

To see step-by-step guide how to create this app from scratch, check the step-by-step guide.

Follow these instructions to install Volta. Volta manages Node and Yarn versions automatically.

Open terminal and run scripts:

yarn install

yarn dev

It will start both client and server apps in development mode and open http://localhost:3000 in the browser.

Run the client app in development mode:

yarn dev:client

Run the server app in development mode:

yarn dev:server

Run both the client and server apps in development mode:

yarn dev

Build the client app for production:

yarn build:client

Build the server app for production:

yarn build:server

Build both the client and server apps for production:

yarn build:all

Run the server app in production mode:

yarn start

Check the code formatting of all files in the codebase using Prettier:

yarn format

Note: Prettier is run automatically on every commit (using a configured Husky pre-commit hook).

Run the code linter on all files in the codebase using ESLint:

yarn lint

yarn start

Open http://localhost:5001 to view it in the browser.

Add a section to the root package.json file:

{
  ...
  "workspaces": [
    "client",
    "server"
  ],
  ...
}

Each workspace points to its own subfolder with its own package.json file.

List all workspaces:

yarn workspaces info

For all operations with dependencies, run commands in the project's root folder.

To add a dependency for a specific workspace:

yarn workspace <workspace-name> add <package-name>
yarn workspace <workspace-name> remove <package-name>

where <workspace-name> should be test-app-client or test-app-server and <package-name> is the name of the package to install/remove.

To add a dependency for all workspaces:

yarn add <package-name> -W
yarn remove <package-name> -W

To restore all dependencies (for root and all workspaces) run yarn install in the root folder.

To run a script in a specific workspace:

yarn workspace <workspace-name> <script-name>