fix: added readme

contributing.md

@@ -1,6 +1,7 @@
 # Contributing
 
 ## Repo Setup
+
 ```
 git clone https://github.com/ethereum-push-notification-service/sdk.git
 
@@ -10,31 +11,22 @@ cd sdk
 ```
 yarn install
 ```
-***Note*** -
-We are using `yarn` and **strongly** advise to use yarn 1.x to avoid any NPM issues.
-
-## Running the Demo React App
-We have a `demoreact` playground to test the individual packages being built out. To run the `demoreact` app
-### By GUI (preferred)
-1. click on the `NX console` extension icon in the VSCode sidebar.
-2. click on the `build` target execute icon under `demoreact`
-3. click on the `serve` target execute icon under `demoreact`
-4. wait for the localhost to be ready in the terminal & then hit `http://localhost:4200/` on your browser to run the app.
 
-### By CLI
-1. run `yarn nx build demoreact`
-2. run `yarn nx run demoreact:build:production`
+**_Note_** -
+We are using `yarn` and **strongly** advise to use yarn 1.x to avoid any NPM issues.
 
 ## Pull Requests process
+
 - All changes should be requested through PRs from a feature/bug branch to `main` branch.
-- We are using 
-   - [conventional-commits](https://www.conventionalcommits.org/en/v1.0.0/#summary): to follow [semver](https://semver.org/#summary) for npm package versioning
-   - [commitizen](https://github.com/commitizen/cz-cli) to restrict commits to follow conventional commits
-   - [husky](https://typicode.github.io/husky/#/) to run pre-commit checks
+- We are using
+  - [conventional-commits](https://www.conventionalcommits.org/en/v1.0.0/#summary): to follow [semver](https://semver.org/#summary) for npm package versioning
+  - [commitizen](https://github.com/commitizen/cz-cli) to restrict commits to follow conventional commits
+  - [husky](https://typicode.github.io/husky/#/) to run pre-commit checks
 
 So, use `yarn cz` to commit changes after `git add` (recommended) or hand crafted git commit messages to follow conventional commit. Otherwise the CLI will prevent you from committing code.
 
-- Before starting on any dev on the repo, 
+- Before starting on any dev on the repo,
+
 ```bash
 # pull latest from main
 git pull origin main
@@ -45,14 +37,16 @@ git checkout -b <your-branch-name>
 ```
 
 ### How to add commits which will decide versioning when deploying
+
 When you are ready to commit your changes.
 
 Run
+
 ```
 git add -A
 ```
 
-then 
+then
 
 ```
 yarn cz
@@ -65,42 +59,55 @@ this will pop up the below CLI
 Read through the [conventional-commits](https://www.conventionalcommits.org/en/v1.0.0/#summary) and [semver](https://semver.org/#summary) to get a better understanding for selecting which option.
 
 ### General guideline
-* for bug fixes use `fix`
-* for backward compatible new features use `feat`
 
-## NX 
+- for bug fixes use `fix`
+- for backward compatible new features use `feat`
+
+## NX
+
 We are using [NX](https://nx.dev/getting-started/intro) and some NX plugins for monorepo management, verison & publish.
 
 ### NX console
+
 The repo comes in with a baked in NX console and some other VSCode extensions to -
-* help simplify processes like build, lint, test, run demo apps
-* run scripts on affected parts of the codebase
 
-***Note*** -
+- help simplify processes like build, lint, test, run demo apps
+- run scripts on affected parts of the codebase
+
+**_Note_** -
 <span style="color:red">Don't run CI-prefixed targets in the NX console in local, they are only for CI.</span>.
 
-## Adding new packages 
+## Adding new packages
+
 The NX monorepo uses `project.json` & `package.json` to manage the monorepo workspace and also ultimately build out the bundle that will be published to NPM registry.
 
 ### - adding `dependencies` to a package
-at root, simply run 
+
+at root, simply run
+
 ```
 yarn add "dependency_package_name@x.y.z"
 ```
+
 And then simply import that dependency in your package. NX while running `build` for that package will take care of making it a `dependency` in the final bundle.
 
 ### - adding `devDependencies` to a package
-at root, simply run 
+
+at root, simply run
+
 ```
 yarn add -D "dependency_package_name@x.y.z"
 ```
+
 And then simply import that dependency in your package. NX while running `build` for that package will take care of making it a `devDependency` in the final bundle.
 
 ### - adding `peerDependencies` to a package
-at root, simply run 
+
+at root, simply run
+
 ```
 yarn add "dependency_package_name@x.y.z"
 ```
+
 And then simply import that dependency in your package. In the `package.json` of the package where you want to consume it, simply declare the dependency as `peerDependency`
 NX while running `build` for that package will take care of making it a `peerDependency` in the final bundle.
-

packages/examples/Readme.md

@@ -12,20 +12,22 @@
 </p>
 
 # Welcome to Push SDK Examples!
+
 This repository houses various practical examples that illustrate how to use the Push SDK effectively to enhance your applications with advanced web3 communication functionalities.
 
 ## One-Stop Solution for Understanding the Implementation of Push Protocol's SDK
 
 The `push-sdk` repository provides two comprehensive examples that serve as practical guides for developers:
 
 1. `sdk-backend-node`: A backend implementation using Node.js.
-2. `sdk-frontend/video`: A frontend implementation focusing on video notifications.
+2. `sdk-frontend-react`: A frontend implementation of notifications and chat using react.
+3. `sdk-frontend/video`: A frontend implementation focusing on video notifications.
 
 These examples illuminate the application of the Push Protocol in real-world scenarios, making it easier for you to effectively incorporate it into your own projects.
 
 They are the perfect starting point for any hacker looking to dive into the world of decentralized notifications. Explore, learn, and create with the Push Protocol. Happy hacking!
 
 # Docs
+
 - [Developer Docs](https://docs.push.org/developers)
 - [Documentation Hub](https://docs.push.org)
-

packages/examples/sdk-frontend-react/Readme.md

@@ -0,0 +1,42 @@
+# SDK Frontend React Example
+
+Welcome to the SDK Frontend React Example project, a hands-on guide demonstrating how to leverage the power of Push Protocol in a frontend environment using reactJs. This resource is an invaluable companion for developers keen to integrate Push Protocol into their frontend services. Dive into the code to gain a comprehensive understanding of how to deploy various features of the Push Protocol.
+
+## Overview
+
+The `sdk-frontend-react` project offers a practical tutorial on how to set up and configure Push Protocol on a client application, including guidance on managing notifications and interfacing with the blockchain. This includes essential examples related to:
+
+- Push Notifications
+- Push Chat
+- Push NFT Chat
+- Push UI-Web
+
+Through these examples, you'll see how these features can be successfully implemented and integrated using Push Protocol.
+
+## Getting Started
+
+Embark on your journey with this project by cloning the repository and installing the dependencies:
+
+```bash
+git clone https://github.com/ethereum-push-notification-service/push-sdk.git
+cd push-sdk
+yarn install
+```
+
+**_Note_** - We are using `yarn` and **strongly** advise to use yarn 1.x to avoid any NPM issues.
+
+## Setting up the SDK-Frontend-React
+
+1. Navigate to the `packages/examples/sdk-frontend-react` directory.
+
+## Running the SDK-Frontend-React
+
+### By GUI (preferred)
+
+1. Click on the `NX console` extension icon in the VSCode sidebar.
+2. Click on the `serve` target execute icon under `examples-sdk-frontend-react`
+
+### By CLI
+
+1. Navigate to the root level of push-sdk repository.
+2. Run `yarn nx serve packages/examples/sdk-frontend-react`