feat: Footer Added, fix: README.md updated with full documentation

Author: Aamir-Rafique

README.md

@@ -1,12 +1,186 @@
-# React + Vite
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+# QR Code Generator
 
-Currently, two official plugins are available:
+![License](https://img.shields.io/badge/license-MIT-blue.svg)
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+> A blazing fast React application powered by [Vite](https://vitejs.dev/) and modern development practices. Perfect for rapid development, prototyping, and deployment.
 
-## Expanding the ESLint configuration
+---
 
-If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.
+## 📝 Table of Contents
+
+1. [QR Code Generator](#ar-QRcodegenerator-react)
+2. [Overview](#-overview)
+3. [Prerequisites](#-prerequisites)
+4. [Installation](#-installation)
+5. [Running the Application](#-running-the-application)
+6. [Project Structure](#-project-structure)
+7. [Available Scripts](#-available-scripts)
+8. [Deployment](#-deployment)
+9. [Technologies Used](#-technologies-used)
+10. [Contributing](#-contributing)
+11. [License](#-license)
+
+---
+
+## 📖 Overview
+
+This project is a React + Vite-based web application designed to save your url, username and password in your browsers localStorage.  
+It emphasizes performance, fast refresh, minimal configuration, and ease of use.
+
+**Key Features:**
+- Lightning-fast development with Vite
+- React with hooks and functional components
+
+---
+
+## ✅ Prerequisites
+
+Ensure you have the following installed:
+
+- [Node.js](https://nodejs.org/) (>= 16.x)
+- [npm](https://www.npmjs.com/) or [Yarn](https://yarnpkg.com/)
+- Git
+
+Check versions:
+
+```bash
+node -v
+npm -v
+git --version
+```
+
+---
+
+## 📦 Installation
+
+Clone the repository and install dependencies:
+
+```bash
+git clone https://github.com/Aamir-Rafique/ar-QRcodegenerator-react.git
+cd ar-QRcodegenerator-react
+npm install 
+# or
+yarn install
+
+# then
+npm i react-toastify
+npm i react-qr-code
+```
+
+---
+
+## 🚀 Running the Application
+
+Start the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+```
+
+Then open [http://localhost:5173](http://localhost:5173) to view it in the browser.
+
+---
+
+## 📁 Project Structure
+
+```
+ar-passwizard-react-localStorage/
+├── public
+│   |── icons/
+│   └── images/
+├── src/
+│   ├── assets/
+│   ├── components
+            |── QRCodeGen.jsx
+            └── Footer.jsx
+│   ├── App.jsx
+│   ├── main.jsx
+│   └── index.css
+├── .gitignore
+├── index.html
+├── package-lock.json
+├── package.json
+├── README.md
+├── LICENSE
+├── vite.config.js
+
+```
+
+---
+
+## ⚙️ Available Scripts
+
+| Script           | Description                           |
+|------------------|---------------------------------------|
+| `npm run dev`    | Runs app in development mode          |
+
+---
+
+## 🚢 Deployment
+
+You can deploy this app using:
+
+- **Vercel**
+- **Netlify**
+- **GitHub Pages**
+- Any static host (upload the `dist/` folder after `npm run build`)
+
+**Example (Vercel):**
+
+1. Push your repo to GitHub
+2. Link it in your [Vercel dashboard](https://vercel.com/)
+3. Set `npm run build` as the build command
+4. Set `dist` as the output directory
+
+---
+
+## 🛠 Technologies Used
+
+- [React](https://reactjs.org/)
+- [Vite](https://vitejs.dev/)
+- [Tailwind CSS](https://tailwindcss.com/) (optional)
+- [React-toastify](https://www.npmjs.com/package/react-toastify?activeTab=readme)
+- [React-qr-code](https://www.npmjs.com/package/qrcode)
+
+
+---
+
+## 🤝 Contributing
+
+Contributions are welcome! Here's how to get started:
+
+1. Fork the repository
+2. Create a new branch (`git checkout -b feature/your-feature`)
+3. Make your changes and commit them
+4. Push to your fork (`git push origin feature/your-feature`)
+5. Open a pull request
+
+Please follow the [Conventional Commits](https://www.conventionalcommits.org/) standard for commits.
+
+---
+
+## 📄 License
+
+This project is licensed under the **MIT License**.  
+See the [LICENSE](./LICENSE) file for details.
+
+---
+
+## 📷 Screenshots (Optional)
+
+<p align="center">
+  <img src="./public/images/SSQRCodeApp.png" alt="App Screenshot" width="700" />
+</p>
+
+---
+
+## 🙋‍♂️ Questions?
+
+If you have any questions or suggestions, feel free to open an issue or reach out on [Gmail](https://mail.google.com/mail/u/0/), [LinkedIn](https://www.linkedin.com/in/aamir-rafique-7a5bb1336/), [GitHub](https://github.com/Aamir-Rafique).
+
+---
+
+> Made with ❤️ by Aamir-Rafique

public/images/SSQRCodeApp.png

@@ -1,3 +1,4 @@
+import Footer from "./components/Footer"
 import QRcodeGenerator from "./components/QRCodeGen"
 
 function App() {
@@ -7,6 +8,7 @@ function App() {
       {/* <div class="absolute inset-0 -z-10 h-full w-full bg-white [background:radial-gradient(125%_125%_at_50%_10%,#fff_40%,#63e_100%)]"></div> */}
       <div class="absolute inset-0 -z-10 h-full w-full items-center px-5 py-24 [background:radial-gradient(125%_125%_at_50%_10%,#000_40%,#63e_100%)]"></div>
       <QRcodeGenerator />
+      <Footer/>
     </>
   )
 }

src/App.jsx

@@ -0,0 +1,13 @@
+import React from 'react'
+
+const Footer = () => {
+    return (
+        <footer className=" w-full text-[0.76rem] lg:text-[0.9rem] text-center absolute bottom-0 pb-3   text-black">
+            <p className='text-white'>Made with ❤️ by <a href="https://github.com/Aamir-Rafique" target="_blank" rel="noopener"
+                className="text-[#18cfbd] hover:underline hover:text-[#3d5683]">Aamir Rafique</a>
+            </p>
+        </footer>
+    )
+}
+
+export default Footer