update readme

README.md

@@ -2,12 +2,85 @@
 
 [![CI](https://github.com/status-im/status-web/actions/workflows/ci.yml/badge.svg)](https://github.com/status-im/status-web/actions/workflows/ci.yml)
 
+This monorepo contains packages for building web applications in the Status ecosystem. These packages can be used separately or combined to create consistent and beautiful user interfaces.
+
 ## Packages
 
-| Name                                                   | `npm`                                                                                                                           |
-| ------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------- |
-| [`@status-im/colors`](./packages/colors)               | [![npm version](https://img.shields.io/npm/v/@status-im/colors.svg)](https://www.npmjs.com/package/@status-im/colors)           |
-| [`@status-im/icons`](./packages/icons)                 | [![npm version](https://img.shields.io/npm/v/@status-im/icons)](https://www.npmjs.com/package/@status-im/icons)                 |
-| [`@status-im/components`](./packages/components)       | [![npm version](https://img.shields.io/npm/v/@status-im/components)](https://www.npmjs.com/package/@status-im/components)       |
-| [`@status-im/js`](./packages/status-js)                | [![npm version](https://img.shields.io/npm/v/@status-im/js)](https://www.npmjs.com/package/@status-im/js)                       |
-| [`@status-im/eslint-config`](./packages/eslint-config) | [![npm version](https://img.shields.io/npm/v/@status-im/eslint-config)](https://www.npmjs.com/package/@status-im/eslint-config) |
+| Name                                                   | `npm`                                                                                                                           | Description                                                                                                                                                                   |
+| ------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [`@status-im/components`](./packages/components)       | [![npm version](https://img.shields.io/npm/v/@status-im/components)](https://www.npmjs.com/package/@status-im/components)       | Component library built with Radix UI, React Aria, Tailwind CSS.                                                                                                              |
+| [`@status-im/js`](./packages/status-js)                | [![npm version](https://img.shields.io/npm/v/@status-im/js)](https://www.npmjs.com/package/@status-im/js)                       | Libary for Waku protocol integration and blockchain interactions.                                                                                                             |
+| [`@status-im/icons`](./packages/icons)                 | [![npm version](https://img.shields.io/npm/v/@status-im/icons)](https://www.npmjs.com/package/@status-im/icons)                 | Auto-generated icon library based on our [design system](https://www.figma.com/design/qLLuMLfpGxK9OfpIavwsmK/Iconset?node-id=3239-987&node-type=frame&t=0h8iIiZ3Sf0g4MRV-11). |
+| [`@status-im/colors`](./packages/colors)               | [![npm version](https://img.shields.io/npm/v/@status-im/colors.svg)](https://www.npmjs.com/package/@status-im/colors)           | Auto-generated color palette based on our [design system](https://www.figma.com/design/v98g9ZiaSHYUdKWrbFg9eM/Foundations?node-id=619-5995&node-type=canvas&m=dev).           |
+| [`@status-im/eslint-config`](./packages/eslint-config) | [![npm version](https://img.shields.io/npm/v/@status-im/eslint-config)](https://www.npmjs.com/package/@status-im/eslint-config) | Shared ESLint configuration for consistent code style across projects.                                                                                                        |
+
+## Prerequisites
+
+Required:
+
+- **[Node.js](https://nodejs.org/)**: v18.19.0 or later
+- **[Yarn](https://yarnpkg.com/)**: Package manager
+
+Recommended:
+
+- **[Visual Studio Code](https://code.visualstudio.com/)**: Code editor
+  - install extensions listed in `.vscode/extensions.json` for optimal development experience
+
+## Stack
+
+- **Turborepo**: Manages our monorepo and speeds up builds
+- **TypeScript**: Adds type safety to our code
+- **React**: Our main library for building UIs
+- **Radix UI / React Aria**: Provides accessible UI primitives
+- **Tailwind CSS**: Used for styling
+- **Vite**: Our build tool and dev server
+- **Storybook**: For developing and showcasing components
+- **ESLint**: Keeps our code consistent and catches potential issues
+- **Prettier**: Formats our code
+- **Changesets**: Manages versioning and changelogs
+
+## Getting Started
+
+1. Clone the repository:
+
+   ```
+   git clone https://github.com/status-im/status-web.git
+   cd status-web
+   ```
+
+2. Install dependencies:
+
+   ```
+   yarn install
+   ```
+
+3. Build all packages:
+
+   ```
+   yarn build
+   ```
+
+4. Run tests:
+
+   ```
+   yarn test
+   ```
+
+5. Start development mode:
+   ```
+   yarn dev
+   ```
+
+## Storybook
+
+To view and interact with the components, you can run Storybook:
+
+```
+yarn storybook
+```
+
+This will start the Storybook server, allowing you to browse and test components in isolation.
+
+## Sponsors
+
+This project is sponsored by Browserstack.