personal blog

Committer: @hikari-8

This repo is working in progress...🏃

Personal Blog
Project Structure
Components Breakdown
Dependencies
Design Pattern
Test
- Test library, tool
- Test rule

Getting Started

To get started with this application, follow the instructions below:

Installation

Clone this repository to your local machine
Navigate to the project directory:
```
cd blog_client
```
Install the project dependencies using npm:
```
npm install
```

Running the App

Run the npm run dev command:

npm run dev

Project Structure

WIP

The project structure is organized as follows:

└── src/
    ├── __generated__/            #  Generated types and mock data by Orval
    ├── app/                      #  Navigation for App Router
    ├── assets/                   #  Reusable or global assets like images, fonts, etc.
    └─- components/
    |    ├── page/                #  Each pages
    |    ├── *Features/           #  Application's features (begin with Uppercase)
    |    ├── ui/                  #  Globally reusable UI components
    |    └── functional/          #  Globally reusable functional which has no view, only behavior
    ├── contexts/                 #  Globally reusable state
    ├── services/                 #  Application services like API clients
    ├── themes/                   #  Globally reusable themes like color, layouts, etc.
    ├── utils/                    #  Utility/helper functions
    └── stories/                  #  Storybook ui parts and tests

＊ src/app の役割は基本的にルーティングのみとする

Components Breakdown

アプリケーションに存在する Component を以下の 4 種類に分類してディレクトリを分ける

-   src/components/page
-   src/components/${Feature}
-   src/components/ui
-   src/components/functional

src/components/page : 1 つのページを表すコンポーネント

src/components/${Feature} : 何らかのドメインに関心を持つコンポーネント (ドメインごとにディレクトリを切る, ディレクトリ名は他コンポーネントとの差別化のため大文字で始める)

src/components/ui : ドメインに関心がないコンポーネント

src/components/functional : ドメインに関心がなく、view を持たず振る舞いのみを持つコンポーネント

Dependencies

自分の右側に存在しているコンポーネントを import してよい。
page 以外は自分の所属する分類軸の参照も可能。依存関係のチェックは、eslint-plugin-strict-dependenciesで静的に行なっている。

functional or ui → models → page

Test

Test library, tool

E2E test : Playwright
Unit test : Jest
UI test : StoryBook
Accessibility test : axe-core, lighthouse

hikari-8 / blog_client