Taskbox - Storybook Tutorial Project

This project was developed as part of my internship at Foothill Technology Solutions. The purpose of this repository is to showcase what I've learned from the Intro to Storybook tutorial, which focuses on building UI components with Storybook in a React application.

Overview

This repository contains the complete implementation of the Storybook tutorial, covering the setup, building components, adding data, and deploying Storybook.

Features Learned

• Chromatic Integration: Set up Chromatic for UI testing and visual regression tests.
• Deployment: Learned how to deploy Storybook to Chromatic.
• Writing Stories: Developed stories in a bottom-up approach, starting from atomic task component to complex task list screen.
• Error & Loading States: Implemented and handled error and loading states in the Task component.
• Inbox Screen: Created an Inbox screen that displays the entire task list using Storybook.

Demo

You can view the live Storybook demo here.

Getting Started

To get a copy of this project up and running on your local machine, follow these steps:

Prerequisites

Make sure you have the following installed on your machine:

• Node.js
• npm or yarn

Installation

1. Clone the repository:

   git clone https://github.com/Jamal-SaadEddin/Taskbox.git
   cd Taskbox
   

2. Install the dependencies:

   npm install
   # or
   yarn install
   

Running Storybook

To start Storybook locally, run the following command:

npm run storybook
# or
yarn storybook

This will start the Storybook server and you can view it in your browser at http://localhost:6006.

Learn More

To learn more about Storybook and follow the tutorial, visit the Intro to Storybook page.

Developed through my internship at Foothill Technology Solutions. Thx to my trainer @Huthaifa-Dev