Typescript Reddit Clone

Monorepo

This project is a monorepo handled by Turbopack. This means that all dependent local packages share the same node_modules folder, which exists in the root (top-most) directory of the project.

This project uses pnpm as a package manager.

Initial Installation

After cloning the repo run:

pnpm install

Installing a Package

To install a new third-party package, run the following from root:

 pnpm add <package> --filter <workspace>

<workspace> is the name of the local project where that dependency should be installed. For global packages omit the --filter flag.

Consider the following file structure:

root
├─ apps
│  ├─ web
├─ packages
│  ├─ tsconfig
│  └─ shared-utils

To install react in the web workspace we would run the following from the root directory:

pnpm add react --filter web

To uninstall:

pnpm uninstall <package> --filter <workspace>

Workspaces

This project has 2 top-level workspace directories:

1. ./apps
2. ./packages

Apps contains workspaces for the front end and backend applications. Packages contains workspaces for packages used by either an app or another package. These top-level directories are specified in the pnpm-workspace.yaml config file.

Running Applications in Development Mode

The core applications in the apps workspace all have a dev script as defined in their individual package.json files. From root run:

pnpm run dev

This command will run the dev command for each individual application in the known workspaces. Workspaces without an explicitly named dev command will be skipped. You can start the front end and backend dev environments with a single command.

Running an individual application in Development Mode

Navigate to an individual application and run:

pnpm run dev

Front End Application Styling

The web workspace, which houses the projects front end application uses SASS as a CSS pre-compiler. Style sheets should be post-fixed with a .scss file extension. create-react-app handles SCSS out-of-the-box so a loader is not necessary.

Front-End / Client

React Redux-Toolkit

We have organized our Redux state management using the "slices" concept, which allows us to easily manage different parts of the application's state. Additionally, we are using the "ducks" methodology to organize our Redux code.

creating custom hooks

We used useDispatch + useSelector to create custom hooks useAppDispatch + useAppSelector that are typed to make sure we interact with our redux store in a type safe way.

Storybook

We are using JSDocs to document our components. Within this project, all component props should be commented with JSDocs.

As for functions, we are documenting all params, including their name and type. Lastly you should write a brief description on what the function does

Svgr / working with SVG icons within our src/assets folder

When working with SVG icons in React, we can use the svgr package to convert them into reusable React components. This not only optimizes the SVG but also allows the browser to render the icon as a react component.

In order to import our SVGs as React components, we uuse the ReactComponent import syntax. For example, import { ReactComponent as Icon-Name } from '...'

To streamline the process of converting SVG icons to React components, we've included a script in our package.json file: "build:svgs": "svgr --icon --out-dir src/assets". Running this script each time we add a new icon to our assets folder ensures that we don't forget to convert it and that we're always up-to-date with the latest icons in our application.

Global Theme / Color Scheme

Defining the Color Theme

Create a Colors.scss file to define a set of colors that will be used throughout the project. Use the :root pseudo-class to define the list of colors in the Colors.scss file.

Defining Global Styles

Create a Global.scss file to define global styles that will be used throughout the project. Import the Colors.scss file into the Global.scss file so that the color variables can be used in the global styles.

Importing Global Styles

Import the Global.scss file into your main SCSS file so that the global styles are applied to the entire application. You can then simply use the css function var() to call the color you'd like to use. For example, var(--black).

Using Storybook

Global styles will not be applied to the Storybook stories by default. To make the global styles available in Storybook, add the import statement for the Global.scss file to the preview.js file in the Storybook configuration. This ensures that the stories are consistent with the rest of the application.

Back-End / API

We are using Express, popular Node.js framework.

changing type to module for es6 modules

Rather than relying on require() to import our dependencies, we can use ES6 modules to enable straightforward imports, similar to React.