├── .env.sample
├── .github
├── ISSUE_TEMPLATE
│ ├── accessibility.md
│ ├── bug_report.md
│ ├── build_issue.md
│ ├── coc_violation.md
│ ├── design_enhancement.md
│ ├── documentation_update.md
│ ├── feature_request.md
│ ├── integration_request.md
│ ├── performance_issue.md
│ ├── refactor.md
│ ├── roadmap_sugesstion.md
│ ├── security_vulnerability.md
│ ├── support_question.md
│ ├── testcase.md
│ └── translation.md
├── PULL_REQUEST_TEMPLATE.md
└── workflows
│ ├── codeql.yml
│ ├── discord-notification.yml
│ ├── greetings.yml
│ └── pr_close_greet.yml
├── .gitignore
├── Code_Of_Conduct.md
├── Contributing.md
├── README.md
├── package-lock.json
├── package.json
├── public
├── avatars
│ ├── avatar1.png
│ ├── avatar10.png
│ ├── avatar2.png
│ ├── avatar3.png
│ ├── avatar4.png
│ ├── avatar5.png
│ ├── avatar6.png
│ ├── avatar7.png
│ ├── avatar8.png
│ └── avatar9.png
├── default-avatar.png
├── favicon.ico
├── index.html
├── logo192.png
├── logo512.png
├── manifest.json
└── robots.txt
├── src
├── App.js
├── assets
│ ├── QR Code.png
│ ├── custom-pointer.png
│ ├── facebook-logo.png
│ ├── instagram-logo.png
│ ├── instagram.png
│ ├── linkedin-logo.png
│ ├── meta.png
│ ├── office-computer-table.svg
│ ├── snapchat.png
│ ├── tik-tok.png
│ ├── twitter-logo.png
│ ├── twitter.png
│ └── whatsapp.png
├── components
│ ├── AvatarSelectionModel.js
│ ├── BulkQRCode.js
│ ├── CategorySelector.js
│ ├── ColorPicker.js
│ ├── Dashboard.js
│ ├── DownloadButton.js
│ ├── Error404.js
│ ├── FileUploader.js
│ ├── ImageQRCodeGenerator.js
│ ├── Login.js
│ ├── Moreinfo.js
│ ├── Navbar.js
│ ├── PDFToQR.js
│ ├── Profile.js
│ ├── ProtectedRoute.js
│ ├── QRCodeCanvas.js
│ ├── QRCodeGenerator.js
│ ├── QRScanner.js
│ ├── Register.js
│ ├── ScrollButton.css
│ ├── ScrollButton.js
│ ├── Setting.js
│ ├── SizeSlider.js
│ ├── SocialMedia.js
│ ├── Support.js
│ ├── VCardForm.js
│ └── WifiForm.js
├── context
│ ├── AuthContext.js
│ └── ThemeContext.js
├── css
│ └── tailwind.css
├── firebase.js
├── index.js
├── pages
│ ├── DashboardPage.js
│ ├── Home.js
│ ├── ProfilePage.js
│ └── QRCodePage.js
├── service-worker.js
└── serviceWorkerRegistration.js
└── tailwind.config.js
/.env.sample:
--------------------------------------------------------------------------------
1 | REACT_APP_FIREBASE_API_KEY=""
2 | REACT_APP_FIREBASE_AUTH_DOMAIN=""
3 | REACT_APP_FIREBASE_PROJECT_ID=""
4 | REACT_APP_FIREBASE_STORAGE_BUCKET=""
5 | REACT_APP_FIREBASE_MESSAGING_SENDER_ID=""
6 | REACT_APP_FIREBASE_APP_ID=""
7 | REACT_APP_FIREBASE_MEASUREMENT_ID=""
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/accessibility.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: "♿ Accessibility Issue"
3 | about: Report an accessibility issue
4 | title: "[Accessibility]: [Brief description of the issue]"
5 | labels: accessibility
6 | assignees: ''
7 | ---
8 |
9 | **Issue Details**
10 | Describe the problem in detail.
11 |
12 | **Impact**
13 | Explain who is affected and how.
14 |
15 | **Steps to Reproduce**
16 | 1. Step one...
17 | 2. Step two...
18 |
19 | **Suggested Solution**
20 | Provide recommendations for fixing the issue.
21 |
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/bug_report.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: "🐛 Bug Report"
3 | about: Report a bug to help us improve
4 | title: "[Bug]: [Short description of the bug]"
5 | labels: bug
6 | assignees: ''
7 | ---
8 |
9 | **Description**
10 | A clear and concise description of what the bug is.
11 |
12 | **To Reproduce**
13 | Steps to reproduce the behavior:
14 | 1. Go to '...'
15 | 2. Click on '....'
16 | 3. Scroll down to '....'
17 | 4. See error
18 |
19 | **Expected behavior**
20 | A clear and concise description of what you expected to happen.
21 |
22 | **Screenshots**
23 | If applicable, add screenshots to help explain your problem.
24 |
25 | **Environment:**
26 | - OS: [e.g., iOS]
27 | - Browser [e.g., chrome, safari]
28 | - Version [e.g., 22]
29 |
30 | **Additional context**
31 | Add any other context about the problem here.
32 |
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/build_issue.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: "🚀 Build/Deployment Issue"
3 | about: Report issues with the build or deployment process
4 | title: "[Build]: [Brief description of the issue]"
5 | labels: build
6 | assignees: ''
7 | ---
8 |
9 | **Error Details**
10 | Include error messages and logs.
11 |
12 | **Environment**
13 | - Build Tool: [e.g., Maven, Gradle]
14 | - Version: [e.g., Node.js v14.0.0]
15 |
16 | **Steps to Reproduce**
17 | 1. Step one...
18 | 2. Step two...
19 |
20 | **Attempts to Resolve**
21 | Describe what you've tried so far.
22 |
23 | **Additional Information**
24 | Include any additional context or resources.
25 |
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/coc_violation.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: "🚨 Code of Conduct Violation"
3 | about: Report a violation of the project’s code of conduct
4 | title: "[Violation]: [Brief description of the incident]"
5 | labels: code-of-conduct
6 | assignees: ''
7 | ---
8 |
9 | **Incident Details**
10 | Provide a factual account of the incident.
11 |
12 | **Participants**
13 | List involved parties (use usernames).
14 |
15 | **Timestamp**
16 | When did it occur?
17 |
18 | **Supporting Evidence**
19 | Include links, screenshots, or other evidence.
20 |
21 | **Desired Outcome**
22 | What resolution are you seeking?
23 |
24 | **Additional Information**
25 | Any other context or considerations.
26 |
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/design_enhancement.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: "🎨 Design Enhancement"
3 | about: Suggest a UI/UX design improvement
4 | title: "[Design]: [Brief description of the design suggestion]"
5 | labels: design
6 | assignees: ''
7 | ---
8 |
9 | **Current Design**
10 | Describe the existing design elements.
11 |
12 | **Proposed Design**
13 | Describe the design improvement.
14 |
15 | **Mockups/Examples**
16 | Include any mockups or examples.
17 |
18 | **Benefits**
19 | Explain how this improves the user experience.
20 |
21 | **Additional Information**
22 | Any additional information about the proposal.
23 |
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/documentation_update.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: "📖 Documentation Update"
3 | about: Suggest an improvement or correction to the documentation
4 | title: "[Docs]: [Section to update]"
5 | labels: documentation
6 | assignees: ''
7 | ---
8 |
9 | **Current Section**
10 | What is currently stated or missing.
11 |
12 | **Proposed Change**
13 | The updated content you propose.
14 |
15 | **Rationale**
16 | Explain why this change is needed or valuable.
17 |
18 | **Additional Information**
19 | Any other relevant context or resources.
20 |
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/feature_request.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: "✨ Feature Request"
3 | about: Suggest an idea for this project
4 | title: "[Feature]: [Short description of the feature]"
5 | labels: enhancement
6 | assignees: ''
7 | ---
8 |
9 | **Problem Statement**
10 | A clear and concise description of the problem you're trying to solve.
11 |
12 | **Proposed Solution**
13 | Describe the solution you'd like.
14 |
15 | **Alternatives Considered**
16 | Describe any alternative solutions or features you've considered.
17 |
18 | **Additional context**
19 | Add any other context or screenshots about the feature request here.
20 |
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/integration_request.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: "🔗 Integration Request"
3 | about: Request a third-party service integration
4 | title: "[Integration]: [Service to integrate]"
5 | labels: integration
6 | assignees: ''
7 | ---
8 |
9 | **Service Details**
10 | Name and brief info about the third-party service.
11 |
12 | **Integration Benefits**
13 | Explain how this integration will help the project/users.
14 |
15 | **Potential Challenges**
16 | Any foreseeable issues or requirements.
17 |
18 | **Additional Information**
19 | Any other relevant context or resources.
20 |
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/performance_issue.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: "⚡️ Performance Issue"
3 | about: Report a performance problem
4 | title: "[Performance]: [Brief description of the issue]"
5 | labels: performance
6 | assignees: ''
7 | ---
8 |
9 | **Current Performance**
10 | A description of what the current performance is like.
11 |
12 | **Expected Performance**
13 | What should the performance be?
14 |
15 | **Steps to Reproduce**
16 | 1. Step one...
17 | 2. Step two...
18 |
19 | **Benchmark Data**
20 | Include any relevant data or screenshots.
21 |
22 | **Additional Context**
23 | Add any other information about the issue here.
24 |
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/refactor.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: "🛠 Refactoring Proposal"
3 | about: Suggest refactoring the existing codebase
4 | title: "[Refactor]: [Brief description of the refactoring]"
5 | labels: refactor
6 | assignees: ''
7 | ---
8 |
9 | **Current Implementation**
10 | Describe the current implementation.
11 |
12 | **Proposed Changes**
13 | Detail how you want to refactor the code.
14 |
15 | **Benefits**
16 | Explain the advantages of this refactor.
17 |
18 | **Potential Risks**
19 | Identify any risks involved in the refactor.
20 |
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/roadmap_sugesstion.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: "🗺 Roadmap Suggestion"
3 | about: Suggest ideas for the future development of the project
4 | title: "[Roadmap]: [Future suggestion]"
5 | labels: roadmap
6 | assignees: ''
7 | ---
8 |
9 | **Feature/Enhancement**
10 | Describe your idea for the future of the project.
11 |
12 | **Value Proposition**
13 | Explain the benefits of this suggestion.
14 |
15 | **Dependencies**
16 | List any dependencies or prerequisites for this suggestion.
17 |
18 | **Additional Information**
19 | Include any other relevant context or resources.
20 |
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/security_vulnerability.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: "🔒 Security Vulnerability"
3 | about: Report a potential security vulnerability
4 | title: "[Security]: [Brief description of the vulnerability]"
5 | labels: security
6 | assignees: ''
7 | ---
8 |
9 | **Vulnerability Details**
10 | Describe the issue and its impact.
11 |
12 | **Steps to Reproduce**
13 | 1. Step one...
14 | 2. Step two...
15 |
16 | **Suggested Remediation**
17 | Provide suggestions on how to fix the issue.
18 |
19 | **Additional Information**
20 | Include any other context or considerations.
21 |
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/support_question.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: "❓ Support Question"
3 | about: Ask a question or request assistance
4 | title: "[Question]: [Your question in one sentence]"
5 | labels: question
6 | assignees: ''
7 | ---
8 |
9 | **Question Details**
10 | Ask your question in detail here.
11 |
12 | **Attempts Made**
13 | Describe what you've tried so far.
14 |
15 | **Related Code (if applicable)**
16 | Include any relevant code snippets or links.
17 |
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/testcase.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: "🧪 Test Case Request"
3 | about: Request additional test cases
4 | title: "[Test Case]: [Missing scenarios]"
5 | labels: testing
6 | assignees: ''
7 | ---
8 |
9 | **Current Coverage**
10 | Describe the current test coverage.
11 |
12 | **Missing Scenarios**
13 | Detail what scenarios are not covered by tests.
14 |
15 | **Importance**
16 | Explain why these tests are necessary.
17 |
18 | **Proposed Implementation**
19 | Suggest how to add the test cases.
20 |
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/translation.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: "🌍 Translation/Localization Request"
3 | about: Request or provide translation/localization
4 | title: "[Translation]: [Target Language]"
5 | labels: translation
6 | assignees: ''
7 | ---
8 |
9 | **Target Language**
10 | Specify the language.
11 |
12 | **Content to Translate**
13 | Specify the documentation or UI elements.
14 |
15 | **Additional Notes**
16 | Any cultural considerations or resources.
17 |
18 | **Additional Information**
19 | Any other context or information.
20 |
--------------------------------------------------------------------------------
/.github/PULL_REQUEST_TEMPLATE.md:
--------------------------------------------------------------------------------
1 | ## Description
2 | Provide a concise summary of changes made in this PR. Include relevant context or background.
3 |
4 | ## Related Issue
5 | Link to the issue addressed:
6 | - Resolves #[issue number]
7 |
8 | ## Change Type
9 | Select the type of change:
10 | - [ ] 🐛 Bug fix
11 | - [ ] ✨ New feature
12 | - [ ] 📚 Documentation update
13 | - [ ] 🔧 Other (describe):
14 |
15 | ## Checklist
16 | - [ ] I’ve read and followed the contributing guidelines.
17 | - [ ] Code adheres to project style and standards.
18 | - [ ] Tests cover changes (if applicable).
19 | - [ ] Documentation updated (if required).
20 | - [ ] Ready for review.
21 |
22 | ## Additional Notes
23 | Provide any extra details for reviewers.
24 |
--------------------------------------------------------------------------------
/.github/workflows/codeql.yml:
--------------------------------------------------------------------------------
1 | # For most projects, this workflow file will not need changing; you simply need
2 | # to commit it to your repository.
3 | #
4 | # You may wish to alter this file to override the set of languages analyzed,
5 | # or to provide custom queries or build logic.
6 | #
7 | # ******** NOTE ********
8 | # We have attempted to detect the languages in your repository. Please check
9 | # the `language` matrix defined below to confirm you have the correct set of
10 | # supported CodeQL languages.
11 | #
12 | name: "CodeQL Advanced"
13 |
14 | on:
15 | push:
16 | branches: [ "main" ]
17 | pull_request:
18 | branches: [ "main" ]
19 | schedule:
20 | - cron: '24 10 * * 6'
21 |
22 | jobs:
23 | analyze:
24 | name: Analyze (${{ matrix.language }})
25 | # Runner size impacts CodeQL analysis time. To learn more, please see:
26 | # - https://gh.io/recommended-hardware-resources-for-running-codeql
27 | # - https://gh.io/supported-runners-and-hardware-resources
28 | # - https://gh.io/using-larger-runners (GitHub.com only)
29 | # Consider using larger runners or machines with greater resources for possible analysis time improvements.
30 | runs-on: ${{ (matrix.language == 'swift' && 'macos-latest') || 'ubuntu-latest' }}
31 | permissions:
32 | # required for all workflows
33 | security-events: write
34 |
35 | # required to fetch internal or private CodeQL packs
36 | packages: read
37 |
38 | # only required for workflows in private repositories
39 | actions: read
40 | contents: read
41 |
42 | strategy:
43 | fail-fast: false
44 | matrix:
45 | include:
46 | - language: javascript-typescript
47 | build-mode: none
48 | # CodeQL supports the following values keywords for 'language': 'c-cpp', 'csharp', 'go', 'java-kotlin', 'javascript-typescript', 'python', 'ruby', 'swift'
49 | # Use `c-cpp` to analyze code written in C, C++ or both
50 | # Use 'java-kotlin' to analyze code written in Java, Kotlin or both
51 | # Use 'javascript-typescript' to analyze code written in JavaScript, TypeScript or both
52 | # To learn more about changing the languages that are analyzed or customizing the build mode for your analysis,
53 | # see https://docs.github.com/en/code-security/code-scanning/creating-an-advanced-setup-for-code-scanning/customizing-your-advanced-setup-for-code-scanning.
54 | # If you are analyzing a compiled language, you can modify the 'build-mode' for that language to customize how
55 | # your codebase is analyzed, see https://docs.github.com/en/code-security/code-scanning/creating-an-advanced-setup-for-code-scanning/codeql-code-scanning-for-compiled-languages
56 | steps:
57 | - name: Checkout repository
58 | uses: actions/checkout@v4
59 |
60 | # Initializes the CodeQL tools for scanning.
61 | - name: Initialize CodeQL
62 | uses: github/codeql-action/init@v3
63 | with:
64 | languages: ${{ matrix.language }}
65 | build-mode: ${{ matrix.build-mode }}
66 | # If you wish to specify custom queries, you can do so here or in a config file.
67 | # By default, queries listed here will override any specified in a config file.
68 | # Prefix the list here with "+" to use these queries and those in the config file.
69 |
70 | # For more details on CodeQL's query packs, refer to: https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs
71 | # queries: security-extended,security-and-quality
72 |
73 | # If the analyze step fails for one of the languages you are analyzing with
74 | # "We were unable to automatically build your code", modify the matrix above
75 | # to set the build mode to "manual" for that language. Then modify this step
76 | # to build your code.
77 | # ℹ️ Command-line programs to run using the OS shell.
78 | # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
79 | - if: matrix.build-mode == 'manual'
80 | shell: bash
81 | run: |
82 | echo 'If you are using a "manual" build mode for one or more of the' \
83 | 'languages you are analyzing, replace this with the commands to build' \
84 | 'your code, for example:'
85 | echo ' make bootstrap'
86 | echo ' make release'
87 | exit 1
88 |
89 | - name: Perform CodeQL Analysis
90 | uses: github/codeql-action/analyze@v3
91 | with:
92 | category: "/language:${{matrix.language}}"
93 |
--------------------------------------------------------------------------------
/.github/workflows/discord-notification.yml:
--------------------------------------------------------------------------------
1 | name: Discord Notifications
2 |
3 | on:
4 | issues:
5 | types: [opened, closed, reopened]
6 | pull_request:
7 | types: [opened, closed, reopened, merged]
8 | push:
9 | branches:
10 | - main # You can specify other branches as well
11 |
12 | jobs:
13 | notify:
14 | runs-on: ubuntu-latest
15 | steps:
16 | - name: Send Discord Notification
17 | env:
18 | DISCORD_WEBHOOK_URL: ${{ secrets.DISCORD_WEBHOOK_URL }} # Set your webhook URL in repo secrets
19 | run: |
20 | set -e # Exit immediately if a command exits with a non-zero status
21 |
22 | DISCORD_MESSAGE="🔔 **GitHub Event Notification** 🔔\n"
23 | DISCORD_MESSAGE+="---------------------------------------------\n"
24 | DISCORD_MESSAGE+="**Event Type**: ${GITHUB_EVENT_NAME}\n"
25 | DISCORD_MESSAGE+="**Repository**: [${GITHUB_REPOSITORY}](${GITHUB_SERVER_URL}/${GITHUB_REPOSITORY})\n"
26 | DISCORD_MESSAGE+="**Triggered by**: ${GITHUB_ACTOR}\n"
27 | DISCORD_MESSAGE+="**Timestamp**: $(date)\n"
28 | DISCORD_MESSAGE+="---------------------------------------------\n"
29 |
30 | # Function to append message for specific events
31 | append_message() {
32 | local icon=$1
33 | local title=$2
34 | local url=$3
35 | local action=$4
36 | local extra_info=$5
37 | DISCORD_MESSAGE+="$icon **$title** [#$2 - $3]($url)\n"
38 | DISCORD_MESSAGE+="**Action**: $action\n"
39 | if [ -n "$extra_info" ]; then
40 | DISCORD_MESSAGE+="$extra_info\n"
41 | fi
42 | }
43 |
44 | # Handle pull request events
45 | if [[ "${{ github.event_name }}" == "pull_request" ]]; then
46 | PR_TITLE=$(jq -r '.pull_request.title' "${GITHUB_EVENT_PATH}")
47 | PR_NUMBER=$(jq -r '.pull_request.number' "${GITHUB_EVENT_PATH}")
48 | PR_URL=$(jq -r '.pull_request.html_url' "${GITHUB_EVENT_PATH}")
49 | PR_BRANCH=$(jq -r '.pull_request.head.ref' "${GITHUB_EVENT_PATH}")
50 | PR_ACTION=$(jq -r '.action' "${GITHUB_EVENT_PATH}")
51 | append_message "🚀" "$PR_NUMBER - $PR_TITLE" "$PR_URL" "$PR_ACTION" "**Branch**: $PR_BRANCH"
52 |
53 | # Handle issue events
54 | elif [[ "${{ github.event_name }}" == "issues" ]]; then
55 | ISSUE_TITLE=$(jq -r '.issue.title' "${GITHUB_EVENT_PATH}")
56 | ISSUE_NUMBER=$(jq -r '.issue.number' "${GITHUB_EVENT_PATH}")
57 | ISSUE_URL=$(jq -r '.issue.html_url' "${GITHUB_EVENT_PATH}")
58 | ISSUE_ACTION=$(jq -r '.action' "${GITHUB_EVENT_PATH}")
59 | append_message "📄" "$ISSUE_NUMBER - $ISSUE_TITLE" "$ISSUE_URL" "$ISSUE_ACTION"
60 |
61 | # Handle push events
62 | elif [[ "${{ github.event_name }}" == "push" ]]; then
63 | COMMIT_MESSAGE=$(jq -r '.head_commit.message' "${GITHUB_EVENT_PATH}")
64 | COMMIT_URL=$(jq -r '.head_commit.url' "${GITHUB_EVENT_PATH}")
65 | PUSH_BRANCH=$(jq -r '.ref' "${GITHUB_EVENT_PATH}")
66 | DISCORD_MESSAGE+="🛠️ **Push Event**\n"
67 | DISCORD_MESSAGE+="**Branch**: $PUSH_BRANCH\n"
68 | DISCORD_MESSAGE+="**Commit Message**: $COMMIT_MESSAGE\n"
69 | DISCORD_MESSAGE+="🔗 [View Commit]($COMMIT_URL)\n"
70 | fi
71 |
72 | # Send the notification to Discord
73 | curl -H "Content-Type: application/json" \
74 | -d "{\"content\": \"$DISCORD_MESSAGE\"}" \
75 | "$DISCORD_WEBHOOK_URL"
76 |
--------------------------------------------------------------------------------
/.github/workflows/greetings.yml:
--------------------------------------------------------------------------------
1 | name: Greetings
2 |
3 | on:
4 | pull_request_target:
5 | types: [opened, reopened, edited]
6 | issues:
7 | types: [opened, reopened, edited]
8 |
9 | jobs:
10 | greeting:
11 | runs-on: ubuntu-latest
12 | permissions:
13 | issues: write
14 | pull-requests: write
15 | steps:
16 | - name: Send Greeting Message
17 | uses: actions/first-interaction@v1
18 | with:
19 | repo-token: ${{ secrets.GITHUB_TOKEN }}
20 | issue-message: |
21 | 👋 Thank you for raising an issue! We appreciate your effort in helping us improve. Our team will review it shortly. Stay tuned!
22 | pr-message: |
23 | 🎉 Thank you for your contribution! Your pull request has been submitted successfully. A maintainer will review it as soon as possible. We appreciate your support in making this project better!
24 | fallback-message: |
25 | 🙌 Thanks for your interaction! We will take a look at your input soon.
26 |
--------------------------------------------------------------------------------
/.github/workflows/pr_close_greet.yml:
--------------------------------------------------------------------------------
1 | name: Comment on PR Closure
2 |
3 | on:
4 | pull_request_target:
5 | types:
6 | - closed
7 |
8 | jobs:
9 | comment:
10 | runs-on: ubuntu-latest
11 |
12 | steps:
13 | - name: Comment on PR Closure
14 | uses: actions/github-script@v4
15 | with:
16 | github-token: ${{ secrets.PERSONAL_ACCESS_TOKEN }}
17 | script: |
18 | const { owner, repo, number } = context.issue;
19 | const commentAuthor = context.payload.pull_request.user.login;
20 | const commentBody = `
21 | Thank you @${commentAuthor} for your valuable time and contribution in our GameZone 💗.
22 | Let’s build this GameZone together! 🤝
23 | Hoping to see you again with another PR soon 😇.
24 | Wishing you all the best on your Open Source journey! 🚀
25 | `;
26 | await github.issues.createComment({ owner, repo, issue_number: number, body: commentBody });
27 | console.log(`Commented on the closed PR: ${commentBody.trim()}.`);
28 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # production
12 | /build
13 |
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 | .env
21 | /bun.lockb
22 |
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 | .idea
27 | debug.log
28 | *.env
29 |
--------------------------------------------------------------------------------
/Code_Of_Conduct.md:
--------------------------------------------------------------------------------
1 | # QR Code Customization Website Project Code of Conduct
2 |
3 | ## Welcome
4 |
5 | Welcome to the **QR Code Customization Website** repository! This project provides users with a web application that allows them to generate and customize QR codes with various options, including text input, color, pattern, frame, and more. Our goal is to create an inclusive, respectful, and collaborative environment where contributors can work together to improve the project and provide a useful tool for users. We are committed to fostering a positive and harassment-free experience for all participants.
6 |
7 | ## Our Pledge
8 |
9 | We as members, contributors, and leaders pledge to make participation in the **QR Code Customization Website** project a harassment-free experience for everyone, regardless of age, body size, visible or invisible disability, ethnicity, gender identity and expression, level of experience, education, socio-economic status, nationality, personal appearance, race, religion, or sexual identity and orientation.
10 |
11 | We pledge to act in ways that contribute to an open, welcoming, diverse, inclusive, and healthy community. We are committed to building a platform where developers and users alike feel safe and respected as they contribute to the development of this web application.
12 |
13 | ## Our Standards
14 |
15 | To maintain a positive and inclusive environment in the **QR Code Customization Website** project, all participants are expected to uphold the following standards:
16 |
17 | ### Positive Behavior:
18 | - **Respectful Communication**: Communicate respectfully and kindly, ensuring that all discussions and interactions remain professional and constructive.
19 | - **Constructive Feedback**: Provide feedback that is helpful, actionable, and designed to improve contributions and encourage growth.
20 | - **Collaboration**: Work together in a spirit of cooperation, sharing ideas and solutions that help the project grow and improve.
21 | - **Inclusivity**: Use language and behavior that makes all participants feel welcome and valued, regardless of their background or experience level.
22 | - **Recognition**: Acknowledge and appreciate the efforts of all contributors, whether they contribute code, ideas, or feedback.
23 | - **Professionalism**: Maintain professionalism in all interactions, ensuring that the focus remains on the project’s goals and objectives.
24 |
25 | ### Unacceptable Behavior:
26 | - **Harassment**: Any form of harassment, including inappropriate comments, personal attacks, or unwelcome advances, is strictly prohibited.
27 | - **Discrimination**: Discriminatory language or behavior based on personal identity, beliefs, or background will not be tolerated.
28 | - **Disrespect**: Engaging in dismissive, inflammatory, or trolling behavior that undermines the collaborative nature of the project is unacceptable.
29 | - **Privacy Violations**: Sharing private information about others without their explicit consent is not allowed.
30 | - **Unethical Conduct**: Any behavior that misuses the project’s resources, violates ethical standards, or promotes misinformation is prohibited.
31 | - **Disruption**: Actions that intentionally disrupt or interfere with the project’s progress or the community’s collaboration efforts will not be tolerated.
32 |
33 | ## Project Goals
34 |
35 | The **QR Code Customization Website** project is focused on providing users with a flexible and customizable tool for generating QR codes. The primary goals of the project include:
36 |
37 | - **QR Code Customization**: Offering various customization options for users, including text input, color, pattern, frame styles, and more.
38 | - **User-Friendly Interface**: Providing a simple, intuitive, and user-friendly interface for generating and downloading custom QR codes.
39 | - **Collaboration and Innovation**: Encouraging contributions from developers, designers, and users to enhance the features and functionality of the web application.
40 | - **Open Source Development**: Promoting an open-source development model that welcomes contributors to share their ideas and skills to improve the project for everyone.
41 |
42 | ## Enforcement Responsibilities
43 |
44 | Community leaders and maintainers of the **QR Code Customization Website** project are responsible for enforcing this Code of Conduct. They are expected to:
45 |
46 | - Clearly communicate the standards for acceptable behavior and ensure that all participants are aware of them.
47 | - Respond to violations of the Code of Conduct in a timely, fair, and transparent manner.
48 | - Take appropriate corrective actions, such as removing inappropriate comments, posts, or contributions that do not align with community standards.
49 | - Apply disciplinary measures, including temporary or permanent bans, in cases of repeated or serious violations of the Code of Conduct.
50 |
51 | ## Scope
52 |
53 | This Code of Conduct applies to all spaces managed by the **QR Code Customization Website** project, including GitHub repositories, issue trackers, discussions, and other communication platforms. It also applies when community members represent the project in public spaces, such as conferences, online events, or forums.
54 |
55 | ## Reporting Violations
56 |
57 | If you experience or witness behavior that violates this Code of Conduct, please report it through the project’s communication channels (e.g., GitHub issues or discussions). All reports will be handled confidentially, and community leaders will take appropriate action to address the situation and prevent further violations.
58 |
59 | ## Consequences of Unacceptable Behavior
60 |
61 | If a community member is found to have violated this Code of Conduct, the community leaders may take the following actions:
62 |
63 | 1. **Correction**: A private conversation with the individual to address the violation and provide guidance on how to improve their behavior.
64 | 2. **Warning**: A formal warning outlining the unacceptable behavior and providing expectations for future conduct.
65 | 3. **Temporary Suspension**: A temporary suspension from participating in the project or community spaces, with the possibility of reinstatement after review.
66 | 4. **Permanent Ban**: Permanent removal from the project and all community spaces for repeated or severe violations.
67 |
68 | ## Enforcement Guidelines
69 |
70 | Community leaders will follow these guidelines when determining the consequences for violations of this Code of Conduct:
71 |
72 | 1. **Correction**:
73 | - **Community Impact**: A minor violation that causes minimal disruption to the project.
74 | - **Consequence**: A private conversation to clarify the violation and provide guidance on behavior improvement.
75 |
76 | 2. **Warning**:
77 | - **Community Impact**: A moderate violation that negatively affects the collaborative environment of the project.
78 | - **Consequence**: A formal warning with clear expectations for future behavior.
79 |
80 | 3. **Temporary Suspension**:
81 | - **Community Impact**: A significant violation that harms the community or disrupts the progress of the project.
82 | - **Consequence**: Temporary suspension from participating in the project, with the possibility of reinstatement after review.
83 |
84 | 4. **Permanent Ban**:
85 | - **Community Impact**: A severe or repeated violation that undermines the project’s goals or the community’s values.
86 | - **Consequence**: Permanent removal from the project and all related spaces.
87 |
88 | ## Building a Positive Community
89 |
90 | At **QR Code Customization Website**, we are dedicated to creating a welcoming, inclusive, and supportive community where developers and users can collaborate and share their ideas. By working together, we can create a web application that provides valuable tools for users and fosters a community of growth and innovation. Let’s work together with respect, integrity, and a shared passion for building customizable and user-friendly solutions.
91 |
92 | ## Attribution
93 |
94 | This Code of Conduct is adapted from the [Contributor Covenant](https://www.contributor-covenant.org), version 2.0, available [here](https://www.contributor-covenant.org/version/2/0/code_of_conduct.html).
95 |
96 |
--------------------------------------------------------------------------------
/Contributing.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | Contributing to QR Code Generator Repository
4 |
5 |
6 |
7 | Thank you for your interest in contributing to **QR Code Generator**! We’re excited to see what creative ideas you bring. Follow these simple guidelines below to get started.
8 |
9 | ---
10 |
11 | ## 🚀 Getting Started
12 |
13 | 1. **Fork the Repository**
14 | Click the "Fork" button at the top-right corner to create your own copy of the repo.
15 |
16 | 2. **Clone Your Fork**
17 | Clone your forked repository to your local machine:
18 | ```bash
19 | git clone https://github.com//qr-code-generator.git
20 | ```
21 |
22 | 3. **Create a New Branch**
23 | Create a new branch for your changes:
24 | ```bash
25 | git checkout -b feature/your-feature-name
26 | ```
27 |
28 | ---
29 |
30 | ## 🖌️ Making Changes
31 |
32 | 1. **Code Changes**
33 | Make your modifications, ensuring they align with the project’s coding standards and code of conduct. Add exciting features, enriching documentation or squash bugs!
34 |
35 | 2. **Commit Your Changes**
36 | Write meaningful commit messages:
37 | ```bash
38 | git commit -m "Add: New navigation bar feature"
39 | ```
40 |
41 | 3. **Push Your Changes**
42 | Push your changes to your forked repository:
43 | ```bash
44 | git push origin feature/your-feature-name
45 | ```
46 |
47 | ---
48 |
49 | ## 🛠️ Creating a Pull Request
50 |
51 | 1. Once your changes are pushed, create a pull request (PR) on the original repository.
52 | 2. Provide a detailed description of your changes and link any relevant issues. Provide relevant images/videos, if any.
53 | 3. Wait for reviews and engage with feedback!
54 |
55 | ---
56 |
57 | ## 🎉 Additional Notes
58 |
59 | - Make sure to sync your fork with the latest changes from the original repo before pushing new features.
60 | - Respect coding conventions and keep your code clean. Comment your changes for ease in review.
61 |
62 | Welcome to Open-Source and thank you for contributing! 🙌
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
QR Code Generator
6 |
7 | Welcome to the QR Code Generator Website project! This web application allows users to generate and customize QR codes with various options, including text input, color, pattern, frame, and more.
8 |
19 |
20 | 1. [Features](#features)
21 | 2. [Technologies Used](#technologies-used)
22 | 3. [Contributing](#contributing)
23 | 4. [Installation Guide](#installation-guide)
24 | 5. [Getting Started](#getting-started)
25 | 6. [FAQ](#faq)
26 | 7. [Contact](#contact)
27 | 8. [Code of Conduct](#code-of-conduct)
28 |
29 |
30 |
31 |
32 | ## 🪄 Features
33 |
34 | - **User Authentication:** Securely register and log in with *email* or *Google authentication* powered by Firebase. .
35 | - **Dashboard:**
36 | A user-friendly dashboard to navigate to different pages. From the dashboard, users can manage their *QR code history*, access the *QR Code Generator*, and view their *profile* details.
37 | - **QR Code Generator:** A dynamic page for generating customizable QR codes with options for:
38 | - *Input content* like text, URLs, or other media for their QR codes.
39 | - Customize the *pattern*, *frame*, *foreground* and *background colors*, and even add logos to personalize the QR code design.
40 | - Selecting different *QR code categories* like *vCard*, *text*, *website*, *social profiles*, *PDFs*, *images*, *ID cards*, etc.
41 | - *Real-time display* feature shows the QR code as it's being customized, allowing users to make adjustments instantly before downloading.
42 | - Limiting QR code generation to **10 codes per day**.
43 | - **Profile Page:** Displays their *account information*, including their *name*, *email*, and associated authentication methods. The page also features a secure *logout* option.
44 |
45 |
46 | ##
47 |
Technologies Used
48 |
49 |
50 | - **Front-end:** HTML, CSS, JavaScript, Bootstrap for a responsive design.
51 | - **Back-end:** Node.js, Express for server-side logic.
52 | - **Database:** Firebase for authentication and user data storage.
53 | - **QR Code Generation:** QR Code API (e.g., QRCode.js, or other libraries).
54 | - **Hosting:** Deployed on platforms such as Firebase Hosting or Heroku.
55 |
56 |
57 |
58 | ## ✨Contributing
59 |
60 | We welcome all the contributions from the open-source community! If you'd like to contribute follow these steps:
61 |
62 | 1. Fork the repository.
63 | 2. Create a new feature branch
64 | 3. Commit your changes
65 | 4. Push to the branch
66 | 5. Open a Pull Request.
67 |
68 | We welcome all contributions to improve **QR Code Generator**! If you'd like to contribute, please follow the [Contributing.md](./Contributing.md) to get details on how to get started.
69 |
70 |
71 | To maintain quality and consistency, please adhere to the following guidelines:
72 | 1. Code Style: Follow the coding style used throughout the project. Clean, readable code with comments is always appreciated.
73 | 2. Commits: Write meaningful commit messages.
74 | 3. Pull Requests: Make sure PRs are focused, well-explained, and reference any issues they address.
75 | 4. Testing: Ensure that your changes are well-tested locally and don’t break existing functionality.
76 |
77 |
78 |
79 |
80 |
Installation Guide ⚡️
81 |
82 | #### PrePrerequisites
83 | Before installing the project locally, ensure you have the following installed:
84 |
85 | - **Node.js:** JavaScript runtime for back-end development.
86 | - **Git:** Version control system for cloning the repository.
87 | - **Firebase CLI:** For managing Firebase services.
88 | - **Any Web Browser:** For accessing the website.
89 |
90 | #### Steps to Install
91 | 1. **Clone the Repository:**
92 |
93 | ```bash
94 | git clone https://github.com/your-username/qr-code-customization-website.git
95 | cd qr-code-customization-website
96 |
97 | ```
98 | 2. **Install Dependencies:** Install all the required packages and dependencies using npm:
99 |
100 | ```bash
101 | npm install
102 |
103 | ```
104 | 3. **Configure Firebase:**
105 |
106 | - Create a Firebase project and enable authentication and database services.
107 | - Add Firebase credentials to your project (Firebase config keys).
108 |
109 |
110 |
111 |
112 |
113 |
114 | ## ⚡️Getting Started
115 |
116 | ### Prerequisites
117 |
118 | - Node.js and npm should be installed on your machine. You can download them from [nodejs.org](https://nodejs.org/).
119 |
120 | ### Installation
121 |
122 | 1. **Clone the repository:**
123 |
124 | ```bash
125 | git clone https://github.com/VesperAkshay/qr-code-generator
126 | cd qr-code-generator
127 | ```
128 | 2. **Install Dependencies:**
129 |
130 | ```bash
131 | npm install
132 | ```
133 | ### Running the Application
134 |
135 | 1. **Start the development server:**
136 |
137 | ```bash
138 | npm start
139 | ```
140 |
141 | ## Env template
142 | ### Add Firebase API (from .env.sample)
143 | ```bash
144 | REACT_APP_FIREBASE_API_KEY=""
145 | REACT_APP_FIREBASE_AUTH_DOMAIN=""
146 | REACT_APP_FIREBASE_PROJECT_ID=""
147 | REACT_APP_FIREBASE_STORAGE_BUCKET=""
148 | REACT_APP_FIREBASE_MESSAGING_SENDER_ID=""
149 | REACT_APP_FIREBASE_APP_ID=""
150 | REACT_APP_FIREBASE_MEASUREMENT_ID=""
151 | ```
152 |
153 | ## Firebase setup
154 | 1. Visit [Firebase](https://firebase.google.com/) and navigate to the Firebase console.
155 | 2. Click "Get started with Firebase" and create a new project.
156 | 3. In the left sidebar under the "Build" section, select "Authentication." Enable Email/Password as a sign-in method.
157 | 4. From the project overview, go to "Project settings."
158 | 5. Scroll down and create a web app for the project. Register the app by following the provided instructions.
159 | All KEY values for .env will be available while creating the project app.
160 |
161 |
162 |
163 |
164 |
165 |
166 |
167 |
✍️FAQ
168 |
169 | #### Q: Can I use the generated QR codes for commercial purposes?
170 |
171 | A: Yes, you are free to use the generated QR codes for both personal and commercial purposes.
172 |
173 | #### Q: How do I add a logo to my QR code?
174 |
175 | A: During the customization process, click on the Add Logo button and upload your image file. The logo will be placed in the center of the QR code.
176 |
177 | #### Q: What formats can I download the QR codes in?
178 |
179 | A: Yes, you are free to use the generated QR codes for both personal and commercial purposes.
180 |
181 |
182 |
183 |
184 |
185 | ## ⚡Contact
186 | [](https://discord.com/users/akshaypatell_)
187 |
188 | For Queries and issue related question you can contact me on Discord
189 |
190 | *Discord Username:* akshaypatell_
191 |
192 |
193 | ## 👥 Team
194 |
195 | | |
196 | |:--:|
197 | | **Akshay Patel** Project Admin |
198 | | [](https://www.linkedin.com/in/akshay-patel-3b0b97284/) |
199 |
200 | ## 🪄Code of conduct
201 |
202 | Want to be part of the community? Check out our **[Code of Conduct](https://github.com/VesperAkshay/qr-code-generator/blob/main/Code_Of_Conduct.md)**
203 |
204 |
205 |
206 |
207 |
Support
208 |
209 |
210 | ## Meet Our Wonderful Contributors
211 |
212 | 💝 Thank you to all the amazing contributors who have made this project possible! 💝
213 |
214 |
215 |
216 |
217 |
218 |
219 | Don't forget to leave a star for this project!
220 |
7 |
13 |
19 |
43 |
44 |
45 |
51 | 404
52 |
53 |
54 |
60 | Oops! Looks like you're lost. Let's get you back on track!
61 |
62 |
63 |
69 | Click below to head back home and find your way.
70 |
71 |
72 |
78 | Go Back Home
79 |
80 |
81 |
167 | );
168 | }
169 |
--------------------------------------------------------------------------------
/src/components/Moreinfo.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { Link } from "react-router-dom";
3 | import { motion } from "framer-motion";
4 | import { FaArrowLeft } from "react-icons/fa";
5 |
6 | export default function Moreinfo() {
7 | return (
8 |
9 |
15 | {/* Back to Home Icon */}
16 |
22 |
23 | Back to Home
24 |
25 |
26 |
27 | {/* Main Title */}
28 |
34 | More About QR Codes
35 |
36 |
37 | {/* Description Section */}
38 |
44 | QR Codes (Quick Response Codes) are a type of matrix barcode that can
45 | store a variety of information such as URLs, contact details, and
46 | payment info. With smartphones, QR codes have become a popular method
47 | for connecting users to digital content seamlessly.
48 |
49 |
50 | {/* More Information Cards */}
51 |
52 | {/* Card 1 */}
53 |
59 |
60 | History of QR Codes
61 |
62 |
63 | QR codes were first invented in 1994 by Denso Wave, a subsidiary
64 | of Toyota, to track vehicles and parts in manufacturing. Since
65 | then, they have been widely adopted for marketing and consumer
66 | interaction.
67 |
68 |
69 |
70 | {/* Card 2 */}
71 |
77 |
78 | How QR Codes Work
79 |
80 |
81 | QR codes work by storing data in a square grid format. When a
82 | smartphone scans the code, it decodes the pattern and directs the
83 | user to the embedded information.
84 |
85 |
86 |
87 | {/* Card 3 */}
88 |
94 |
95 | Benefits of Using QR Codes
96 |
97 |
98 | QR codes provide a fast, convenient way to access information. They
99 | are used in mobile payments, event ticketing, restaurant menus, and
100 | more.
101 |
102 |
103 |
104 | {/* Card 4 */}
105 |
111 |
112 | The Future of QR Codes
113 |
114 |
115 | With the rise of mobile technology, QR codes will continue to play
116 | a significant role in bridging the gap between the physical and
117 | digital worlds.
118 |
3 | Contributing to QR Code Generator Repository
4 | 
Technologies Used
Support 
for this project!
220 |