Project - React Vite - Networks QrCode Generator

QRCode Generator

About

• When a social network url is entered, the central image is replaced by the network icon.

  • options :
    • Networks : Github, Linkedin, Facebook, Instagram, Pinterest, Youtube, Twitter, Twitch, Tiktok, Reddit
    • Supports : KissKissBankBank, Liberapay, Patreon, Tipee, Utip

• The QrCode can then be downloaded as a png file

• There are 4 input fields accessible by clicking on the corresponding arrows, to modify the qrcode :

  • social network url
  • the qrcode correction scale
  • the background color
  • the foreground color

Screenshots

• When the application is launched

• After entering a social network address

• Downloadable Png image

• Mobile view (280px max)

Get Started

Recommended IDE Setup

• VSCode + ESLint + Prettier

Getting Started with Vite

This project was bootstrapped with Create vite.

Available Scripts

In the project directory, you can run:

npm run dev

Runs the app in the development mode.
Open http://localhost:5173/ to view it in your browser.

The page will reload when you make changes.
You may also see any lint errors in the console.

npm run build

Builds the app for production to the build directory.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about building for production for more information.

Learn More

You can learn more in the Vite documentation.

To learn React, check out the React documentation.

Dependencies

This project use:

• styled-components to do CSS in JS and @types/styled-components for TypeScript compatibility.
• qrcode.react to generate the QRCode
• react-icons for Burger icon in menu
• react-router-dom for routing