chore: rewrite README.md for better documentation

README.md

@@ -1,44 +1,119 @@
 # Custom QR Code Styling
 
-Generate a modern, styled and branded QR code for Free!. Build with React, based on [QR Code Styling](https://github.com/kozakdenys/qr-code-styling) JS library and [Custom QR Code Styling](https://github.com/awran5/custom-qr-code-styling) 
+Generate modern, styled, and branded QR codes for free! Built with React, based on the [QR Code Styling](https://github.com/kozakdenys/qr-code-styling) JS library and [Custom QR Code Styling](https://github.com/awran5/custom-qr-code-styling).
 
 <hr />
 
 <p align="center">
   <img width="1362" alt="screenshot" src="https://github.com/sctg-development/custom-qr-code-styling/assets/165936401/080219e1-7d03-4e97-8baf-6463fd919cbe">
 </p>
 
-### Instructions
+## Features
 
-- Download or clone the repo:
+- Modern and stylish QR code generation
+- Customizable designs
+- Easy to use interface
+- Free and open-source
 
-```
-git clone https://github.com/sctg-development/custom-qr-code-styling
-```
+## Live Demo
 
-## Install
+Check out the live demo: [QR Code Generator](https://qr.lesailesdumontblanc.com/)
 
-```bash
-# npm
-> cd custom-qr-code-styling
-> npm install
+## Getting Started
 
-# Yarn
-> cd custom-qr-code-styling
-> yarn
-```
+### Prerequisites
 
-### Customization
+- Node.js (v20 or later)
+- npm or Yarn
 
-If you want to customize this QR code generator, first give us a star, clone this repository and then follow the steps below:
+### Installation
+
+1. Clone the repository:
+
+   ```bash
+   git clone https://github.com/sctg-development/custom-qr-code-styling
+   cd custom-qr-code-styling
+   ```
+
+2. Install dependencies:
+
+   ```bash
+   # Using npm
+   npm install
+
+   # Or using Yarn
+   yarn
+   ```
+
+3. Start the development server:
+
+   ```bash
+   npm start
+   # or
+   yarn start
+   ```
+
+4. Open your browser and visit `http://localhost:3000`
+
+## Customization
+
+To customize the QR code generator:
 
 1. Open the `src/configuration.ts` file.
-2. Edit the configuration object as you wish.
+2. Edit the configuration object as desired.
 3. Save the file.
-4. Build the project. With npm:
+4. Rebuild the project:
+
+   ```bash
+   npm run build
+   # or
+   yarn build
+   ```
+
+## Deployment
+
+You can deploy this QR code generator for free using Cloudflare Pages or Azure Static Web Apps.
+
+### Cloudflare Pages
+
+1. Create a free [Cloudflare account](https://www.cloudflare.com/).
+2. Log in to your Cloudflare dashboard.
+3. Go to "Pages" and click "Create a project".
+4. Choose "Connect to Git" and select your GitHub repository.
+5. Configure build settings:
+   - Build command: `npm run build`
+   - Build output directory: `build`
+6. Click "Save and Deploy".
+
+### Azure Static Web Apps
+
+1. Create a free [Azure account](https://azure.microsoft.com/).
+2. Log in to the [Azure Portal](https://portal.azure.com/).
+3. Click "Create a resource" and search for "Static Web App".
+4. Click "Create" and fill in the required details.
+5. In "Build Details":
+   - Select "React" as the build preset
+   - App location: `/`
+   - API location: `api`
+   - Output location: `build`
+6. Click "Review + create" and then "Create".
+7. Connect to your GitHub repository in the deployment center.
+
+Both platforms offer continuous deployment, automatically rebuilding and redeploying when you push changes to your main branch.
+
+## Contributing
+
+We welcome contributions! Please feel free to submit a Pull Request.
+
+## License
+
+This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.
+
+## Acknowledgments
+
+- [QR Code Styling](https://github.com/kozakdenys/qr-code-styling) for the core QR code generation library
+- [Custom QR Code Styling](https://github.com/awran5/custom-qr-code-styling) for inspiration and initial implementation
 
-```bash
-> npm run build
-```
+## Support
 
-### [Live](https://qr.lesailesdumontblanc.com/)
+If you find this project helpful, please give it a star on GitHub!