Stories of Todo

Using a Todo List application, this project demonstrates how to use Storybook to develop components in isolation, document them, and test them.

Made with:

• Vite,
• React,
• TypeScript,
• Storybook,
• daisyUI,
• Api Platform (backend API),
• FakeRest (mock API),
• TanStack Query,
• React Hook Form

Getting Started

Prerequisites

• make
• Node.js (20.x or newer)
• npm
• docker and docker-compose

Installation

Run the following command to install the project dependencies:

make install

Development

Frontend

Isolated components

The frontend components are built in isolation thanks to Storybook. It mokes the API with FakeRest in conjuction with MSW. It means that you will be able to see fetch requests in your browser dev tools 🤩.

This method is the recommended way to develop components, document them, and test them.

To develop the frontend with Storybook, run the following command:

make storybook

Navigate to the url displayed in the terminal to see the Storybook interface.

Full Application

The final point of this application is to request a real API. To achieve this, an Api Platform server is provided. It is useful to test the fronted application works great with a real API.

To run the API and the application, run the following command:

make dev

Before accessing the application, navigate to the https://localhost and make sure to accept the self-signed certificate. Otherwise, the application will not be able to fetch the API.

You can also access the API documentation at https://localhost/docs

Then, navigate to the url displayed in the terminal to see the application running.

To stop the application, press Ctrl+C in the terminal and run the following command:

make stop-api

Testing

Tests are written in Storybook Play functions. Storybook test runner turns all of your stories into executable tests. It is powered by Jest and Playwright.

Before running tests, make sure to install playwright with the following command:

npx playwright install --with-deps

To run the interactions-tests, run the following command:

make storybook # if not already running
make interaction-test

Run Presentation

To run the presentation, run the following command:

make storybook-build
make storybook-serve
# in another terminal
make preview