niteshthori24198 / qr-insight

It is a web application that allows users to generate and scan QR codes, as well as provide analysis on QR code usage.

QR-Insight

Logo

QR Code Generator, Scanner and Analysis

This project is a collaborative effort by a team of 5 members, completed in a time span of 6 days. It is a web application that allows users to generate and scan QR codes, as well as provide analysis on QR code usage.

Prerequisites

• Node.js
• npm modules
• MongoDB
• Redis
• Git

Installation

• Clone the repository: git clone : https://github.com/Niteshthori24198/substantial-money-3994
• Install dependencies: npm install
• Start the server: npm run server

Features

• This project has the following features:

  • QR Code Generation
  • QR Code Scanner
  • QR Code Analysis
  • Download and Sharing
  • User Accounts
  • About Us Page
  • Blog Page
  • Contact Page
  • Good UI
  • Responsiveness
  • User-friendly

Table of contents

QR-Insight/

• backend/

  • config/
    • database.js
  • controllers/
    • QRController.js
    • userController.js
  • middlewares/
    • authentication.js
    • authorization.js
  • models/
    • userModel.js
    • QRModel.js
  • routes/
    • QRRoutes.js
    • userRoutes.js
  • index.js

• frontend/

  • public/
  • src/
  • css/
  • index.html

• node_modules/

• gitignore

• package.json

• README.md

Home Page

ChatBot

Sign In / Sign Up Page

The OAuth and GitHub Authentication features allow users to sign up and log in to the website using their Google or GitHub accounts.

QR Code Generator Page

The QR Code Generator page allows users to generate QR codes for text, URL, Wi-Fi, Zoom, WhatsApp, phone, vCard, and email. Users can also download, print, or share the generated QR code via email or WhatsApp.

QR Scanner and Analysis Page

The QR Scanner page allows users to scan QR codes using their device's camera or by uploading an image. The Scanner and Analysis page provides statistical data and analysis on the usage of generated QR codes.

User Profile Section

The User Profile section allows users to view their profile information, update their profile picture, and change their password.

About Us Page

The About Us page provides information about the project and the team behind it.

Blog Page

The Blog page displays articles and posts related to the website's content.

Contact Page

The Contact page provides users with a form to contact the website's administrators.

Technologies Used

This project was built using the following technologies:

• Node.js
• Express.js
• MongoDB
• Mongoose
• Redis
• HTML
• CSS
• Bootstrap
• JavaScript
• qrcode
• html5qr code
• Socket.io
• bcrypt
• JWT
• OAuth
• GitHub auth

Deployment

• The backend of this project has been deployed using Cyclick, and the front end has been deployed using Netlify.
  • Front-End : https://qr-insight-niteshthori24198.vercel.app/
  • BackEnd : https://angry-cummerbund-newt.cyclic.app/
  • Documentation : https://angry-cummerbund-newt.cyclic.app/doc/
  • Github : https://github.com/Niteshthori24198/substantial-money-3994

Team Members

• Nitesh Kumar
• Kishan Sharma
• Venkatesh Tiwari
• Rajesh Kumar
• Pankaj Jain

License

This project is licensed under the MIT License. See the LICENSE file for details.

qr-insight's Issues

QR-Vcard-FE-JS

• handle media queries to make responsive
• testing for different screen size
• writing logic to catch all element to display data
• append qr code in front end
• handle multiple redirect of pages

QR-Generation-Text-MSG-BE

• Create a backend controller
• Apply fields validation
• Generating QR
• Storing info into DB
• Handling errors

QR-Generation-Zoom-FE+BE

• write backend route for zoom meet qr code generation
• write front end for layout
• write functionality part for qr code
• write styling for front end
• make page layout responsive

API Docs

QR-Scanner-BE-JS

• writing backend route for scanning using camera using cdn
• writing logic for scanning qr images
• appending appropriate data in result container after scan
• handling of auto redirect of different pages
• handling all errors

about-page

• about section
• html
• css

Implementing Media Queries and Handling Controller

• Implement media queries on final layout
• testing media queries and fixing as per different screen sizes
• Creation of controller for routers
• making folder structure as per mvc format and testing
• Handling connection beetween front end and backend for qr generation

Fixing-Bug

• Oauth bug fixed
• Gauth bug fixed
• User display bug fixed
• Responsiveness bugs fixed
• Functionalities bugs fixed

chat

• chat.html
• chat.js
• backend.chat

Schema Designing-BE

• Creation of user schema
• creation of QR Schema
• Implementing Relationships
• Setting Basic Workflows
• Connect DB

data card

• chat box
• data save message
• backend

Vcard-QR-BE

• write backend route for qr generation
• handle details of vcard
• select color cobination and qr generation logic
• handle route controller
• handling of errors and sending response to fe

Adding Nav-bar and footer -to About page

• Addition of Nav bar
• managing workflow
• Adding footer
• managing workflows
• applying responsiveness

QR-Generation-Phone-BE+FE

• write backend route for phone qr code generation
• write front end for layout
• write functionality part for qr
• write styling for front end
• make page layout responsive

Vcard-QR-FE

• creation of vcard section
• adding form to get data
• adding qr container section
• working on nested elements to show data
• writing styling for layout

Testing-and-fixing-Phase-1

• Home page testing
• QR generator testing
• QR scanner testing
• Login register testing
• All other pages testing

Nav-Footer in QR Generator page

• navbar layout
• navbar fully working all link
• footer layout fix
• full link work of footer
• fix whole page layout

QR-Generation-Whatsapp-FE+BE

• write backend route for Whatsapp qr code generation
• write front end for layout
• write functionality part for qr
• write styling for front end
• make page layout responsive

QR-Generate for WIFI-BE+FE

• write backend route for wifi qr code generation
• write front end for layout
• write functionality part for qr
• write styling for front end
• make page layout responsive

QR-Scanner-FE

• creation of frontend layout
• design of scanner container
• adding various feilds for UI
• Adding camera selection button
• Adding Upload section

Home-Page Final

• Check Responsiveness
• Check Anchor links
• Image Alignment
• Text Alignment

QR-Scanner-FE+JS

• writing styling for front end
• adding media queries to make responsive
• testing media queries for different screens
• catching scanner or upload section
• catching html elements to append result

QR-Generation-UPI-ID-BE

• Create a backend controller
• Fix Amount
• Apply fields validation
• Generating QR
• Storing info into DB
• Handling errors

Generate-QR-Whatsapp-BE

• Create a backend controller
• Apply fields validation
• Generating QR
• Storing info into DB
• Handling errors

blog page

• add navbar in blog page
• add footer in blog page
• set layout of blog page
• write some blogs and handle css
• proper error handle

QR-Generation-Phone-BE

• Create a backend controller
• Apply fields validation
• Generating QR
• Storing info into DB
• Handling errors

Profile-page

• Make It Responsive
• Add nav bar
• Add footer
• Fetch data from localstroage

QR-Generation-OF-URL-BE

• Create a backend controller
• Apply fields validation
• Generating QR
• Storing info into DB
• Handling errors

profile page working

• show user details in profile page
• update profile
• delete user account
• forgot password in profile page
• handle error and fix css

feedback fom

• whole feedback fom
• add Q. in chatbox

frontend

• login page frontend
• signup page frontend

QR-Generation-Email-FE+BE

• write backend route for Email-sending qr code generation
• write front end for layout
• write functionality part for qr code
• write styling for front end
• make page layout responsive