feat: update readme

README.md

@@ -1,46 +1,121 @@
-# Getting Started with Create React App
+# 57blocks React Starter Kit
 
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+57blocks React Starter Kit is a boilerplate project that provides a solid foundation for building web applications using React.js. The main purpose of this starter kit is to streamline development, improve performance, and ensure maintainable code in the long run. It is designed to be flexible, scalable, and extensible, making it an ideal starting point for your React.js projects.
 
-## Available Scripts
 
-In the project directory, you can run:
+## Features
 
-### `yarn start`
+### Core Libraries and Tools
 
-Runs the app in the development mode.\
-Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+- **React.js**: A popular JavaScript library for building user interfaces. React.js provides a component-based architecture and a virtual DOM for efficient rendering.
+- **xstate**: A powerful state management library for creating and managing complex, state-driven application logic. xstate helps in modeling and visualizing application states, transitions, and side effects.
+- **Webpack**: Webpack is used as a module bundler to bundle and optimize the project's JavaScript and other assets. It enables efficient code organization and builds for production.
+- **TypeScript**: TypeScript is a statically typed superset of JavaScript that enhances code quality, improves developer productivity, and enables reliable refactoring.
 
-The page will reload if you make edits.\
-You will also see any lint errors in the console.
 
-### `yarn test`
+### Code Quality and Linting
 
-Launches the test runner in the interactive watch mode.\
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+- **SonarQube**: SonarQube is integrated into the project for code quality analysis. It provides insights and suggestions to improve code quality, maintainability, and adherence to best practices.
+- **ESLint**: ESLint is a popular JavaScript linter that enforces coding style and detects potential errors and inconsistencies in the codebase. It helps maintain code consistency across the project.
+- **Stylelint**: Stylelint is a CSS linter that ensures consistent styles, detects CSS errors, and enforces best practices for writing maintainable CSS code.
+- **Commitlint**: Commitlint enforces conventional commit messages, ensuring a consistent commit history and making it easier to track changes and collaborate with other developers.
 
-### `yarn build`
 
-Builds the app for production to the `build` folder.\
-It correctly bundles React in production mode and optimizes the build for the best performance.
+### Testing and Test Frameworks
 
-The build is minified and the filenames include the hashes.\
-Your app is ready to be deployed!
+- **Jest**: Jest is a JavaScript testing framework that provides a simple and intuitive way to write and run unit tests for React components. It offers powerful assertion utilities and mocking capabilities.
+- **Testing Library**: Testing Library is a testing utility that focuses on testing React components from the user's perspective. It encourages writing tests that simulate user interactions and assert the expected behavior of the components.
+- **Playwright**: Playwright is a powerful end-to-end testing tool that allows you to automate interactions with your web application in a real browser environment. It provides cross-browser support and enables comprehensive testing of your application's functionality.
 
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
 
-### `yarn eject`
+### Continuous Integration and Deployment
 
-**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
+- **GitHub Actions**: GitHub Actions is used for continuous integration and continuous deployment (CI/CD). An example workflow is provided that automates various checks and processes, such as verifying PR descriptions, setting up the development environment, running unit tests and linters, performing end-to-end tests, running code analysis, running Lighthouse tests for performance and accessibility, and deploying the code to a CDN.
 
-If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
 
-Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
+## Getting Started
 
-You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
+# Follow these steps to get started with the React Starter Kit:
+
+### Prerequisites
+
+Make sure you have the following software installed on your machine:- Node.js: The project requires Node.js to be installed. You can download it from the official website: [Node.js](https://nodejs.org/)
+- nvm: Node Version Manager (nvm) allows you to manage multiple Node.js versions. You can install it by following the instructions in the [nvm GitHub repository](https://github.com/nvm-sh/nvm).
+
+### Clone the Repository
+
+Start by cloning the repository to your local machine using the following 
+
+```
+git clone https://github.com/57blocks/react-starter-kit.git 
+```
+
+### Switch to the Correct Node.js Version
+
+Navigate to the project directory and switch to the correct Node.js version using nvm
+
+```   
+cd react-starter-kit 
+nvm use 
+```
+
+This command will automatically switch to the Node.js version specified in the `.nvmrc` file located in the project directory.
+
+### Install Dependencies
+
+Install the necessary dependencies by running the following command:
+
+```
+yarn install 
+```
+
+### Start the Development Server
+
+To launch the development server and run the React Starter Kit locally, use the following command:
+
+```
+yarn start 
+```
+
+This command will start the development server and automatically open the application in your default browser. Any changes you make to the source code will trigger an automatic reload.
+
+### Build the Project
+
+To build the React Starter Kit for production deployment, use the following command:
+
+```
+yarn build 
+```
+
+This command will create an optimized production build of the project in the `dist` directory.
+
+### Run Tests
+
+To execute the included unit tests, use the following command:   
+
+```
+npm test 
+```
+
+This will run the test suite using Jest and Testing Library and provide feedback on the test results.
+
+### Code Linting
+
+To lint the CSS and JavaScript code, use the following command:
+
+```
+yarn lint
+```
+This will run the Stylelint and ESLint linters to check for CSS and JavaScript code style and potential issues.
+
+### Automated Testing with Playwright
+
+To run automated end-to-end tests using Playwright, use the following command:
+
+```
+yarn e2e 
+```
+This command will execute the Playwright tests and provide test results.
 
-## Learn More
 
-You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
 
-To learn React, check out the [React documentation](https://reactjs.org/).