This project is a QR Code generator using React, Vite, TypeScript and TailwindCSS, with integration of the QR Code generation API.
This is a simple web application that allows the user to generate QR Codes from text or URLs and adjust the size of the generated QR Code. It uses the QR Code Generation API to create the QR image based on user input.
- React: JavaScript library for building user interfaces.
- Vite: Rapid development tool for modern frontend applications.
- TypeScript: Superset of JavaScript with optional static typing.
- TailwindCSS: Utility CSS framework for styling.
- TanStack React Query: Asynchronous state management and data caching.
Before you start, you will need to have installed:
- Node.js: v14+ or higher
- npm or yarn
- Clone this repository:
- Navigate to the project directory:
cd QR-Code-Generator
- Install the dependencies:
npm install
- Run the project:
npm run dev
- Access the project in the browser:
http://localhost:5173
The API used to generate QR Codes in this project is the APGY QR Code API.
GET https://api.apgy.in/qr/?data={data}&size={size}
data(String): The data to be encoded in the QR Code. Example:https://mysite.com.size(Number): The size of the QR Code in pixels. Example:300.
Changing the QR Code Size To change the size of the generated QR Code, the default value is 300, but you can adjust it by modifying the logic in the QRCodeGenerator.tsx component:
const [size, setSize] = useState<number>(300);
Contributions are always welcome! If you want to contribute improvements to the project, follow these steps:
- Fork the project
- Create a branch for your feature (git checkout -b my-feature)
- Commit your changes (git commit -m 'Add my feature')
- Push to the branch (git push origin my-feature)
- Open a Pull Request
This project is licensed under the MIT License. See the LICENSE file for more details.