Project Structure

Your project structure will depend on the scope of your project, however, there are 3 main approaches I cover in this guide. In all cases, I would recommend a monorepository.

Simple Frontend App

Simple here means that it is a single frontend app with its backend in a separate repository. It is suitable for small projects that are not expected to grow in scope and where for example you do not plan to build a design system or components library.

Directorysrc
- Directoryfeatures
  - Directoryauth
    Directoryapis/
    …
    Directorycomponents/
    …
    Directorystore/
    …
  - Directorydashboard
    Directoryapis/
    …
    Directorycomponents/
    …
    Directorystore/
    …
package.json
pnpm-lock.yaml

Large Frontend App

Large here means a single frontend app that is expected to grow in scope and where for example you plan to build a design system or components library.

In this case, I recommend to use pnpm workspaces. You will need to add a pnpm-workspace.yaml file at the root of your project to define your project packages:

packages:
  - 'packages/*'

An example project structure could look like this:

Directorypackages
- Directoryui-components
  - Directorysrc
    Directorybutton/
    …
    Directorycard/
    …
  - package.json
- Directoryapp
  - Directorysrc
    Directoryfeatures
    Directoryauth
    Directoryapis/
    …
    Directorycomponents/
    …
    Directorystore/
    …
    Directorydashboard
    Directoryapis/
    …
    Directorycomponents/
    …
    Directorystore/
    …
  - package.json
package.json
pnpm-lock.yaml
pnpm-workspace.yaml

Multiple Frontend Apps

This is the typical monorepository use case where you have multiple frontend apps and potentially multiple backend services that you want to maintain in the same repository.

In this case, I recommend to use pnpm workspaces. You will need to add a pnpm-workspace.yaml file at the root of your project to define your project packages:

packages:
  - 'packages/*'
  - 'apps/*'

Here is an example for a monorepo supporting multiple applications and packages: Organize your frontend applications - different domain per application.

An example project structure could look like this:

Directorypackages
- Directoryui-components
  - Directorysrc
    Directorybutton/
    …
    Directorycard/
    …
  - package.json
- Directoryapps
  - Directorydashboard
    Directorysrc
    Directoryfeatures
    Directoryhome
    Directoryapis/
    …
    Directorycomponents/
    …
    Directorystore/
    …
    Directorysettings
    Directoryapis/
    …
    Directorycomponents/
    …
    Directorystore/
    …
    package.json
  - Directoryaccount
    Directorysrc
    Directoryfeatures
    Directoryauth
    Directoryapis/
    …
    Directorycomponents/
    …
    Directorystore/
    …
    Directoryprofile
    Directoryapis/
    …
    Directorycomponents/
    …
    Directorystore/
    …
    package.json
package.json
pnpm-lock.yaml
pnpm-workspace.yaml

Your project structure will of course evolve over time but this should give you a good starting point.