No Clocks Frontend Development Template

Note

This project serves the purpose of scaffolding out a boilerplate setup using React, TypeScript, Vite, and our preferred development environment tooling for frontend development.

This project is not intended to be used as a standalone project, but rather as a starting point for new projects.

Table of Contents

• Table of Contents
• Badges
• Tech Stack
• Usage
  • Prerequisites
  • Installation
  • Development
  • Testing
  • Code Coverage
  • Linting
  • Building

Badges

Tech Stack

This project uses the following technologies:

• Vite for fast development
• React for building user interfaces
• TypeScript for static type checking
• Vitest and JSDOM for testing
• Testing Library for testing utilities
• ESLint and various AirBnB ESLint Configurations for linting
• Prettier for code formatting
• React Router for routing
• GitHub Actions: for CI/CD and testing automation

Usage

To get started with this project, follow the instructions below.

Prerequisites

• Node.js
• NPM and PNPM
• Git
• GitHub CLI

Installation

Create a new local project using the template:

Warning

• GitHub CLI is required to use the gh repo create command.
• Replace my-new-project with the name of your project.

# assuming project name is: my-new-project
gh repo create my-new-project --public --clone --template noclocks/template-react-ts-starter

if you do not have the GitHub CLI installed, you can use the following command:

# assuming project name is: my-new-project
pnpm dlx degit noclocks/template-react-ts-starter my-new-project

Change into the new project directory:

cd my-new-project

Install the dependencies:

pnpm install

Development

Start the development server:

pnpm run dev

Open your browser and navigate to http://localhost:5173 to see your application.

Testing

Run the tests:

pnpm run test

Output:

> [email protected] test X:\github\noclocks\template-react-ts-starter
> vitest

 RUN  v1.4.0 X:/github/noclocks/template-react-ts-starter

 ✓ tests/App.test.tsx (3)
   ✓ App (3)
     ✓ Rendering (3)
       ✓ Shouold render without throwing
       ✓ Renders hello world
       ✓ Renders not found if invalid path

 Test Files  1 passed (1)
      Tests  3 passed (3)
   Start at  19:39:59
   Duration  1.49s (transform 78ms, setup 180ms, collect 322ms, tests 95ms, environment 482ms, prepare 134ms)

Code Coverage

Run the tests with code coverage:

pnpm run test:coverage

Output:

> [email protected] test:coverage X:\github\noclocks\template-react-ts-starter
> vitest run --coverage


 RUN  v1.4.0 X:/github/noclocks/template-react-ts-starter
      Coverage enabled with v8

 ✓ tests/App.test.tsx (3)
   ✓ App (3)
     ✓ Rendering (3)
       ✓ Shouold render without throwing
       ✓ Renders hello world
       ✓ Renders not found if invalid path

 Test Files  1 passed (1)
      Tests  3 passed (3)
   Start at  19:40:41
   Duration  1.64s (transform 106ms, setup 144ms, collect 343ms, tests 104ms, environment 523ms, prepare 138ms)

 % Coverage report from v8
---------------|---------|----------|---------|---------|-------------------
File            | % Stmts   | % Branch   | % Funcs   | % Lines   | Uncovered Line \#s
----------------|-----------|------------|-----------|-----------|--------------------
All files       | 100       | 100        | 100       | 100       |
src             | 100       | 100        | 100       | 100       |
App.tsx         | 100       | 100        | 100       | 100       |
main.tsx        | 100       | 100        | 100       | 100       |
src/pages       | 100       | 100        | 100       | 100       |
Home.tsx        | 100       | 100        | 100       | 100       |
NotFound.tsx    | 100       | 100        | 100       | 100       |
--------------- | --------- | ---------- | --------- | --------- | -------------------

Linting

Run the linter:

pnpm run lint

Fix linting issues:

pnpm run lint:fix

Building

Build the application:

pnpm run build

Serve the production build:

pnpm run serve

---

No Clocks, LLC | 2024