├── .dockerignore ├── .env.example ├── .eslintrc.json ├── .github ├── ISSUE_TEMPLATE │ ├── bug.yml │ ├── docs.yml │ ├── feature.yml │ └── styles.yml ├── deploy.yml ├── pull_request_template.md └── workflows │ ├── autocomment-iss-close.yml │ ├── close-old-issue.yml │ ├── close-old-pr.yml │ ├── close-on-merge.yml │ ├── issue-created.yml │ └── pull_request_created.yml ├── .gitignore ├── .vscode └── settings.json ├── CODE_OF_CONDUCT.md ├── Dockerfile ├── LICENSE ├── README.md ├── asset ├── 404.jpg ├── Header.png ├── LogIn.png ├── avatar.png ├── blood.svg ├── blood3.png ├── clerk.png ├── donor.jpg ├── heartbeat.svg └── pencil.svg ├── components.json ├── contributing.md ├── docker-compose.yml ├── next.config.mjs ├── package-lock.json ├── package.json ├── postcss.config.js ├── prisma └── schema.prisma ├── public ├── next.svg └── vercel.svg ├── src ├── Content │ └── State.json ├── Context │ └── ThemeContext.tsx ├── app │ ├── DonorForm │ │ └── page.tsx │ ├── FindBlood │ │ └── page.tsx │ ├── OrgForm │ │ └── page.tsx │ ├── ThankYou │ │ └── page.tsx │ ├── api │ │ ├── DonorForm │ │ │ └── route.ts │ │ └── orgForm │ │ │ └── route.ts │ ├── favicon.ico │ ├── globals.css │ ├── layout.tsx │ ├── libs │ │ └── prismadb.ts │ ├── loading.tsx │ ├── not-found.tsx │ ├── page.tsx │ ├── sign-in │ │ └── [[...sign-in]] │ │ │ └── page.tsx │ └── sign-up │ │ └── [[...sign-up]] │ │ └── page.tsx ├── components │ ├── BloodGroupFilter.tsx │ ├── Dashboard.jsx │ ├── DonorCard.tsx │ ├── Footer.tsx │ ├── GetBlood.tsx │ ├── Hero.tsx │ ├── Loading.tsx │ ├── Navbar.tsx │ ├── OurMission.tsx │ ├── ScrollToTopButton.tsx │ ├── ThemeToggler.tsx │ └── ui │ │ ├── alert.tsx │ │ ├── border-beam.tsx │ │ ├── button.tsx │ │ ├── dropdown-menu.tsx │ │ ├── input.tsx │ │ ├── label.tsx │ │ ├── separator.tsx │ │ └── shiny-button.tsx ├── lib │ └── utils.ts ├── middleware.ts └── utils │ └── cn.ts ├── tailwind.config.ts ├── tf └── main.tf └── tsconfig.json /.dockerignore: -------------------------------------------------------------------------------- 1 | # Ignore node modules 2 | node_modules 3 | 4 | # Ignore log files 5 | *.log 6 | 7 | # Ignore build output 8 | build 9 | dist 10 | 11 | # Ignore dotenv files (secrets and environment variables) 12 | .env 13 | .env.local 14 | .env.development.local 15 | .env.test.local 16 | .env.production.local 17 | 18 | 19 | # Ignore any files related to git 20 | .git 21 | .gitignore 22 | 23 | # Ignore miscellaneous files 24 | .DS_Store 25 | *.swp 26 | .github 27 | .git 28 | .gitignore 29 | CODE_OF_CONDUCT.md 30 | README.md 31 | contributing.md 32 | -------------------------------------------------------------------------------- /.env.example: -------------------------------------------------------------------------------- 1 | NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY= 2 | CLERK_SECRET_KEY= 3 | NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in 4 | NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up 5 | NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/ 6 | NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/ 7 | DATABASE_URL="PUT MONGODB URI" 8 | -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug.yml: -------------------------------------------------------------------------------- 1 | name: 🐞 Bug Report 2 | description: File a bug report 3 | title: "Bug: " 4 | labels: ["🛠 goal: fix", "🚦status: awaiting triage", "💻 aspect: code"] 5 | body: 6 | - type: textarea 7 | id: what-happened 8 | attributes: 9 | label: What happened? 10 | placeholder: Add descriptions 11 | validations: 12 | required: true 13 | - type: textarea 14 | id: screenshots 15 | attributes: 16 | label: Add screenshots 17 | placeholder: Add screenshots 18 | validations: 19 | required: true 20 | - type: dropdown 21 | id: browsers 22 | attributes: 23 | label: What browsers are you seeing the problem on? 24 | multiple: true 25 | options: 26 | - Firefox 27 | - Chrome 28 | - Safari 29 | - Microsoft Edge 30 | - Brave 31 | - Other 32 | - type: checkboxes 33 | id: terms 34 | attributes: 35 | label: "Record" 36 | options: 37 | - label: I have checked the existing [issues](https://github.com/Saurav-Pant/Blood-Donation-Project/issues) 38 | required: true 39 | 40 | - label: I have read the [Contributing Guidelines](https://github.com/Saurav-Pant/Blood-Donation-Project/blob/main/contributing.md) 41 | required: true 42 | 43 | - label: I agree to follow this project's [Code of Conduct](https://github.com/Saurav-Pant/Blood-Donation-Project/blob/main/CODE_OF_CONDUCT.md) 44 | required: true 45 | 46 | - label: I want to work on this issue 47 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/docs.yml: -------------------------------------------------------------------------------- 1 | name: 🔖 Documentation update 2 | description: Improve Documentation 3 | title: "docs:" 4 | labels: 5 | [ 6 | "📄 aspect: text", 7 | "🚦status: awaiting triage", 8 | "✨ goal: improvement", 9 | "good first issue", 10 | "🟨 priority: medium", 11 | ] 12 | body: 13 | - type: textarea 14 | id: improve-docs 15 | attributes: 16 | label: what's wrong with the documentation? 17 | description: which things do we need to add? 18 | placeholder: Add description 19 | validations: 20 | required: true 21 | - type: textarea 22 | id: screenshots 23 | attributes: 24 | label: Add screenshots 25 | description: Add screenshots to see the demo 26 | placeholder: Add screenshots 27 | validations: 28 | required: true 29 | - type: checkboxes 30 | id: terms 31 | attributes: 32 | label: "Record" 33 | options: 34 | - label: I have checked the existing [issues](https://github.com/Saurav-Pant/Blood-Donation-Project/ProjectsHut/issues) 35 | required: true 36 | 37 | - label: I have read the [Contributing Guidelines](https://github.com/Saurav-Pant/Blood-Donation-Project/blob/main/contributing.md) 38 | required: true 39 | 40 | - label: I agree to follow this project's [Code of Conduct](https://github.com/Saurav-Pant/Blood-Donation-Project/blob/main/CODE_OF_CONDUCT.md) 41 | required: true 42 | 43 | 44 | 45 | - label: I want to work on this issue 46 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature.yml: -------------------------------------------------------------------------------- 1 | name: ✨ Feature Request 2 | description: Suggest a feature request 3 | title: "feat:" 4 | labels: ["⭐ goal: addition", "🚦status: awaiting triage"] 5 | body: 6 | - type: textarea 7 | id: what-feature 8 | attributes: 9 | label: What feature? 10 | placeholder: Add descriptions 11 | validations: 12 | required: true 13 | - type: textarea 14 | id: screenshots 15 | attributes: 16 | label: Add screenshots 17 | placeholder: Add screenshots 18 | validations: 19 | required: true 20 | - type: checkboxes 21 | id: terms 22 | attributes: 23 | label: "Record" 24 | options: 25 | - label: I have checked the existing [issues](https://github.com/Saurav-Pant/Blood-Donation-Project/issues) 26 | required: true 27 | 28 | - label: I have read the [Contributing Guidelines](https://github.com/Saurav-Pant/Blood-Donation-Project/blob/main/contributing.md) 29 | required: true 30 | 31 | - label: I agree to follow this project's [Code of Conduct](https://github.com/Saurav-Pant/Blood-Donation-Project/blob/main/CODE_OF_CONDUCT.md) 32 | required: true 33 | 34 | 35 | 36 | - label: I want to work on this issue 37 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/styles.yml: -------------------------------------------------------------------------------- 1 | name: 👯‍♂️ Style Changing Request 2 | description: Suggest a style design 3 | title: '[style]: ' 4 | labels: ["✨ goal: improvement","🚦status: awaiting triage","🕹 aspect: interface"] 5 | body: 6 | - type: markdown 7 | attributes: 8 | value: | 9 | Thanks for taking the time to fill out this template! 10 | - type: textarea 11 | id: style-idea 12 | attributes: 13 | label: What's the style idea? 14 | placeholder: Add descriptions 15 | 16 | validations: 17 | required: true 18 | - type: textarea 19 | id: screenshots 20 | attributes: 21 | label: Add screenshots 22 | 23 | placeholder: Add screenshots 24 | 25 | - type: checkboxes 26 | id: terms 27 | attributes: 28 | label: "Record" 29 | 30 | options: 31 | - label: I have checked the existing [issues](https://github.com/Saurav-Pant/Blood-Donation-Project/issues) 32 | required: true 33 | 34 | - label: I have read the [Contributing Guidelines](https://github.com/Saurav-Pant/Blood-Donation-Project/blob/main/contributing.md) 35 | required: true 36 | 37 | - label: I agree to follow this project's [Code of Conduct](https://github.com/Saurav-Pant/Blood-Donation-Project/blob/main/CODE_OF_CONDUCT.md) 38 | required: true 39 | 40 | 41 | 42 | - label: I want to work on this issue 43 | 44 | -------------------------------------------------------------------------------- /.github/deploy.yml: -------------------------------------------------------------------------------- 1 | name: CI/CD to EC2 2 | 3 | on: 4 | push: 5 | branches: [ main ] 6 | 7 | jobs: 8 | deploy: 9 | runs-on: ubuntu-latest 10 | 11 | steps: 12 | - uses: actions/checkout@v2 13 | 14 | - name: Install Node.js 15 | uses: actions/setup-node@v2 16 | with: 17 | node-version: '14' 18 | 19 | - name: Install dependencies 20 | run: npm ci 21 | 22 | - name: Build 23 | run: npm run build 24 | 25 | - name: Deploy to EC2 26 | env: 27 | PRIVATE_KEY: ${{ secrets.EC2_SSH_PRIVATE_KEY }} 28 | HOST: ${{ secrets.EC2_HOST }} 29 | USER: ec2-user 30 | run: | 31 | echo "$PRIVATE_KEY" > private_key && chmod 600 private_key 32 | scp -i private_key -o StrictHostKeyChecking=no -r .next package.json package-lock.json ${USER}@${HOST}:/var/www/nextjs/ 33 | ssh -i private_key -o StrictHostKeyChecking=no ${USER}@${HOST} ' 34 | cd /var/www/nextjs 35 | npm ci 36 | pm2 restart nextjs || pm2 start npm --name "nextjs" -- start 37 | ' -------------------------------------------------------------------------------- /.github/pull_request_template.md: -------------------------------------------------------------------------------- 1 | ## Related Issue 2 | [Cite any related issue(s) this pull request addresses. If none, simply state "None”] 3 | 4 | ## Description 5 | [Please include a brief description of the changes or features added] 6 | 7 | ## Type of PR 8 | 9 | - [ ] Bug fix 10 | - [ ] Feature enhancement 11 | - [ ] Documentation update 12 | - [ ] Other (specify): _______________ 13 | 14 | ## Screenshots / videos (if applicable) 15 | [Attach any relevant screenshots or videos demonstrating the changes] 16 | 17 | ## Checklist: 18 | - [ ] I have performed a self-review of my code 19 | - [ ] I have read and followed the Contribution Guidelines. 20 | - [ ] I have tested the changes thoroughly before submitting this pull request. 21 | - [ ] I have provided relevant issue numbers, screenshots, and videos after making the changes. 22 | - [ ] I have commented my code, particularly in hard-to-understand areas. 23 | 24 | 25 | ## Additional context: 26 | [Include any additional information or context that might be helpful for reviewers.] 27 | -------------------------------------------------------------------------------- /.github/workflows/autocomment-iss-close.yml: -------------------------------------------------------------------------------- 1 | name: Comment on Issue Close 2 | 3 | on: 4 | issues: 5 | types: [closed] 6 | 7 | jobs: 8 | greet-on-close: 9 | runs-on: ubuntu-latest 10 | permissions: 11 | issues: write 12 | steps: 13 | - name: Greet User 14 | uses: actions/github-script@v5 15 | with: 16 | github-token: ${{ secrets.GITHUB_TOKEN }} 17 | script: | 18 | const issue = context.payload.issue; 19 | const issueCreator = issue.user.login; 20 | const issueNumber = issue.number; 21 | 22 | const greetingMessage = `Hello @${issueCreator}! Your issue #${issueNumber} has been closed. Thank you for your contribution!`; 23 | 24 | github.rest.issues.createComment({ 25 | owner: context.repo.owner, 26 | repo: context.repo.repo, 27 | issue_number: issueNumber, 28 | body: greetingMessage 29 | }); -------------------------------------------------------------------------------- /.github/workflows/close-old-issue.yml: -------------------------------------------------------------------------------- 1 | name: Close Old Issues 2 | on: 3 | schedule: 4 | - cron: "0 0 * * *" 5 | 6 | jobs: 7 | close-issues: 8 | runs-on: ubuntu-latest 9 | 10 | steps: 11 | - name: Checkout Repository 12 | uses: actions/checkout@v4 13 | 14 | - name: Close Old Issues 15 | run: | 16 | open_issues=$(curl -s -H "Authorization: token ${{ secrets.GITHUB_TOKEN }}" \ 17 | "https://api.github.com/repos/${{ github.repository }}/issues?state=open" \ 18 | | jq -r '.[] | .number') 19 | for issue in $open_issues; do 20 | # Get the last updated timestamp of the issue 21 | last_updated=$(curl -s -H "Authorization: token ${{ secrets.GITHUB_TOKEN }}" \ 22 | "https://api.github.com/repos/${{ github.repository }}/issues/$issue" \ 23 | | jq -r '.updated_at') 24 | days_since_update=$(( ( $(date +%s) - $(date -d "$last_updated" +%s) ) / 86400 )) 25 | if [ $days_since_update -gt 30 ]; then 26 | curl -s -X PATCH -H "Authorization: token ${{ secrets.GITHUB_TOKEN }}" \ 27 | -H "Accept: application/vnd.github.v3+json" \ 28 | -d '{"state":"closed"}' \ 29 | "https://api.github.com/repos/${{ github.repository }}/issues/$issue" 30 | 31 | # Add a comment explaining when the issue will be closed 32 | curl -s -X POST -H "Authorization: token ${{ secrets.GITHUB_TOKEN }}" \ 33 | -H "Accept: application/vnd.github.v3+json" \ 34 | -d '{"body":"This issue has been automatically closed because it has been inactive for more than 30 days. If you believe this is still relevant, feel free to reopen it or create a new one. Thank you!"}' \ 35 | "https://api.github.com/repos/${{ github.repository }}/issues/$issue/comments" 36 | fi 37 | done -------------------------------------------------------------------------------- /.github/workflows/close-old-pr.yml: -------------------------------------------------------------------------------- 1 | name: Close Stale PRs 2 | 3 | on: 4 | schedule: 5 | - cron: '0 0 * * *' # Runs daily at midnight 6 | pull_request: 7 | types: 8 | - opened 9 | - reopened 10 | - synchronize 11 | 12 | permissions: 13 | pull-requests: write 14 | issues: write 15 | 16 | jobs: 17 | close_stale_prs: 18 | runs-on: ubuntu-latest 19 | permissions: 20 | pull-requests: write 21 | 22 | steps: 23 | - uses: actions/stale@v7 24 | with: 25 | repo-token: ${{ secrets.GITHUB_TOKEN }} 26 | stale-pr-message: 'This PR has been automatically closed due to inactivity from the owner for 90 days.' 27 | days-before-pr-stale: 90 28 | days-before-pr-close: 0 29 | exempt-pr-author: false 30 | exempt-pr-labels: '' 31 | only-labels: '' 32 | operations-per-run: 30 33 | remove-stale-when-updated: true 34 | debug-only: false 35 | -------------------------------------------------------------------------------- /.github/workflows/close-on-merge.yml: -------------------------------------------------------------------------------- 1 | name: Close Issues on PR Merge 2 | 3 | on: 4 | pull_request: 5 | types: [closed] 6 | 7 | jobs: 8 | close-issues: 9 | runs-on: ubuntu-latest 10 | 11 | steps: 12 | - name: Checkout repository 13 | uses: actions/checkout@v2 14 | 15 | - name: Close linked issues 16 | if: github.event.pull_request.merged == true 17 | run: | 18 | ISSUES=$(jq -r '.pull_request.body' "$GITHUB_EVENT_PATH" | grep -Eo '#[0-9]+' | tr -d '#') 19 | for ISSUE in $ISSUES 20 | do 21 | echo "Closing issue #$ISSUE" 22 | curl -X POST -H "Authorization: token ${{ secrets.GITHUB_TOKEN }}" \ 23 | -H "Accept: application/vnd.github.v3+json" \ 24 | https://api.github.com/repos/${{ github.repository }}/issues/$ISSUE/comments \ 25 | -d '{"body":"Closed by PR #${{ github.event.pull_request.number }}"}' 26 | curl -X PATCH -H "Authorization: token ${{ secrets.GITHUB_TOKEN }}" \ 27 | -H "Accept: application/vnd.github.v3+json" \ 28 | https://api.github.com/repos/${{ github.repository }}/issues/$ISSUE \ 29 | -d '{"state":"closed"}' 30 | done -------------------------------------------------------------------------------- /.github/workflows/issue-created.yml: -------------------------------------------------------------------------------- 1 | name: Greet New Contributors 2 | 3 | on: 4 | issues: 5 | types: [opened] 6 | 7 | permissions: 8 | contents: read 9 | issues: write 10 | 11 | jobs: 12 | greet: 13 | runs-on: ubuntu-latest 14 | steps: 15 | - name: Checkout code 16 | uses: actions/checkout@v2 17 | 18 | - name: Greet the contributor 19 | uses: actions/github-script@v6 20 | with: 21 | script: | 22 | const issue_number = context.issue.number; 23 | const owner = context.repo.owner; 24 | const repo = context.repo.repo; 25 | github.rest.issues.createComment({ 26 | issue_number: issue_number, 27 | owner: owner, 28 | repo: repo, 29 | body: 'Thank you for opening an issue! We will look into it ASAP. star the repo if you like it.' 30 | }); 31 | -------------------------------------------------------------------------------- /.github/workflows/pull_request_created.yml: -------------------------------------------------------------------------------- 1 | name: Greet New Pull Request 2 | 3 | on: 4 | pull_request: 5 | types: [opened] 6 | 7 | permissions: 8 | contents: read 9 | pull-requests: write 10 | 11 | jobs: 12 | greet: 13 | runs-on: ubuntu-latest 14 | steps: 15 | - name: Checkout code 16 | uses: actions/checkout@v2 17 | 18 | - name: Greet the contributor 19 | uses: actions/github-script@v6 20 | with: 21 | github-token: ${{ secrets.GITHUB_TOKEN }} 22 | script: | 23 | const pr_number = context.issue.number; 24 | const owner = context.repo.owner; 25 | const repo = context.repo.repo; 26 | github.rest.issues.createComment({ 27 | issue_number: pr_number, 28 | owner: owner, 29 | repo: repo, 30 | body: 'Thank you for submitting this pull request! We appreciate your contribution.' 31 | }); 32 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | /.pnp 3 | .pnp.js 4 | .yarn/install-state.gz 5 | 6 | # testing 7 | /coverage 8 | 9 | # next.js 10 | /.next/ 11 | /out/ 12 | 13 | # production 14 | /build 15 | 16 | # misc 17 | .DS_Store 18 | *.pem 19 | 20 | # debug 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | 25 | # local env files 26 | .env*.local 27 | .env 28 | 29 | # vercel 30 | .vercel 31 | 32 | # typescript 33 | *.tsbuildinfo 34 | next-env.d.ts 35 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "WillLuke.nextjs.hasPrompted": true 3 | } -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | We as members, contributors, and leaders pledge to make participation in our 6 | community a harassment-free experience for everyone, regardless of age, body 7 | size, visible or invisible disability, ethnicity, sex characteristics, gender 8 | identity and expression, level of experience, education, socio-economic status, 9 | nationality, personal appearance, race, religion, or sexual identity 10 | and orientation. 11 | 12 | We pledge to act and interact in ways that contribute to an open, welcoming, 13 | diverse, inclusive, and healthy community. 14 | 15 | ## Our Standards 16 | 17 | Examples of behavior that contributes to a positive environment for our 18 | community include: 19 | 20 | - Demonstrating empathy and kindness toward other people 21 | - Being respectful of differing opinions, viewpoints, and experiences 22 | - Giving and gracefully accepting constructive feedback 23 | - Accepting responsibility and apologizing to those affected by our mistakes, 24 | and learning from the experience 25 | - Focusing on what is best not just for us as individuals, but for the 26 | overall community 27 | 28 | Examples of unacceptable behavior include: 29 | 30 | - The use of sexualized language or imagery, and sexual attention or 31 | advances of any kind 32 | - Trolling, insulting or derogatory comments, and personal or political attacks 33 | - Public or private harassment 34 | - Publishing others' private information, such as a physical or email 35 | address, without their explicit permission 36 | - Other conduct which could reasonably be considered inappropriate in a 37 | professional setting 38 | 39 | ## Enforcement Responsibilities 40 | 41 | Community leaders are responsible for clarifying and enforcing our standards of 42 | acceptable behavior and will take appropriate and fair corrective action in 43 | response to any behavior that they deem inappropriate, threatening, offensive, 44 | or harmful. 45 | 46 | Community leaders have the right and responsibility to remove, edit, or reject 47 | comments, commits, code, wiki edits, issues, and other contributions that are 48 | not aligned to this Code of Conduct, and will communicate reasons for moderation 49 | decisions when appropriate. 50 | 51 | ## Scope 52 | 53 | This Code of Conduct applies within all community spaces, and also applies when 54 | an individual is officially representing the community in public spaces. 55 | Examples of representing our community include using an official e-mail address, 56 | posting via an official social media account, or acting as an appointed 57 | representative at an online or offline event. 58 | 59 | ## Enforcement 60 | 61 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 62 | reported to the community leaders responsible for enforcement at [Saurav Pant](https://twitter.com/Saurav-Pant) 63 | All complaints will be reviewed and investigated promptly and fairly. 64 | 65 | All community leaders are obligated to respect the privacy and security of the 66 | reporter of any incident. 67 | 68 | ## Enforcement Guidelines 69 | 70 | Community leaders will follow these Community Impact Guidelines in determining 71 | the consequences for any action they deem in violation of this Code of Conduct: 72 | 73 | ### 1. Correction 74 | 75 | **Community Impact**: Use of inappropriate language or other behavior deemed 76 | unprofessional or unwelcome in the community. 77 | 78 | **Consequence**: A private, written warning from community leaders, providing 79 | clarity around the nature of the violation and an explanation of why the 80 | behavior was inappropriate. A public apology may be requested. 81 | 82 | ### 2. Warning 83 | 84 | **Community Impact**: A violation through a single incident or series 85 | of actions. 86 | 87 | **Consequence**: A warning with consequences for continued behavior. No 88 | interaction with the people involved, including unsolicited interaction with 89 | those enforcing the Code of Conduct, for a specified period of time. This 90 | includes avoiding interactions in community spaces as well as external channels 91 | like social media. Violating these terms may lead to a temporary or 92 | permanent ban. 93 | 94 | ### 3. Temporary Ban 95 | 96 | **Community Impact**: A serious violation of community standards, including 97 | sustained inappropriate behavior. 98 | 99 | **Consequence**: A temporary ban from any sort of interaction or public 100 | communication with the community for a specified period of time. No public or 101 | private interaction with the people involved, including unsolicited interaction 102 | with those enforcing the Code of Conduct, is allowed during this period. 103 | Violating these terms may lead to a permanent ban. 104 | 105 | ### 4. Permanent Ban 106 | 107 | **Community Impact**: Demonstrating a pattern of violation of community 108 | standards, including sustained inappropriate behavior, harassment of an 109 | individual, or aggression toward or disparagement of classes of individuals. 110 | 111 | **Consequence**: A permanent ban from any sort of public interaction within 112 | the community. 113 | -------------------------------------------------------------------------------- /Dockerfile: -------------------------------------------------------------------------------- 1 | FROM node:20-alpine 2 | 3 | WORKDIR /usr/app 4 | 5 | COPY package.json package-lock.json ./ 6 | RUN npm ci && npm i sharp 7 | 8 | COPY prisma ./prisma 9 | COPY . . 10 | 11 | RUN npx prisma generate 12 | RUN npm run build || true 13 | 14 | EXPOSE 3000 15 | 16 | CMD ["npm", "run", "start"] 17 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2024 Saurav Pant 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

Blood Donation

2 | Welcome 👋 3 | 4 |

5 | The Blood Donation Project is an initiative aimed at connecting individuals in need of blood with willing blood donors. The project utilizes npm (Node Package Manager) and version control using Git to manage the codebase and facilitate collaboration. 6 |

7 | 8 | ## 💻 Tech Stack 9 | 10 | - [NextJs](https://nextjs.org) - Next.js is an open-source web development framework. 11 | - [Typescript](https://www.typescriptlang.org) - TypeScript is a free and open-source high-level programming language. 12 | - [TailwindCSS](https://tailwindcss.com) - Tailwind CSS is a utility-first CSS framework for rapidly building modern websites without ever leaving your HTML. 13 | - [Docker](https://www.docker.com/) - Docker is a platform designed to help developers build, share, and run container applications. it handle the tedious setup, so devloper can focus on the code 14 | 15 | ## 🚀 Quick start 16 | 17 | Contributions are welcome! If you have any ideas, suggestions, or bug fixes, please open an [issue](https://github.com/Saurav-Pant/Blood-Donation-Project/issues/new/choose) or submit a pull request. Make sure to follow the project's code of conduct. 18 | 19 | > **Note**: If you are new to open source contributions, you can refer to [this](https://opensource.guide/how-to-contribute/) guide by GitHub. 20 | 21 | > **Warning**: Please do not spam the repository with unnecessary PRs. Make sure to follow the project's [Code of Conduct](https://github.com/Saurav-Pant/Blood-Donation-Project/blob/main/CODE_OF_CONDUCT.md). 22 | 23 | - Go through the [CONTRIBUTING.md](https://github.com/Saurav-Pant/Blood-Donation-Project/blob/main/contributing.md) file, where all the guidelines have been mentioned that will guide you to make your contribution. 24 | - Do check out the [project issue tracker](https://github.com/Saurav-Pant/Blood-Donation-Project/issues) section. 25 | 26 | **Please give it a star to support this open source project.** 27 | 28 | 29 | ## 🤝 Our Contributors 30 | 31 |
32 | Contributors 33 |
34 | 35 | 36 | 37 |
38 |
39 | 40 | Thank you for your interest in contributing to our project! We appreciate any contributions, whether it's bug fixes, new features, or documentation improvements. 41 | 42 | We value the time and effort you put into contributing, and we look forward to reviewing and merging your contributions. Join us on this exciting journey of creativity and collaboration, and let your projects shine on Projectshut! 43 | 44 |
45 |

This Project was the part of

46 | GSSoC 47 | GSSoC 48 |
49 | 50 | ## ©️ License 51 | 52 | The project is licensed under the [MIT License](https://github.com/neelshah2409/Bot-Collection/blob/main/LICENSE). 53 | -------------------------------------------------------------------------------- /asset/404.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Saurav-Pant/Blood-Donation-Project/63db26299b8fa59ff85d2b1b27a11eea5268c7e7/asset/404.jpg -------------------------------------------------------------------------------- /asset/Header.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Saurav-Pant/Blood-Donation-Project/63db26299b8fa59ff85d2b1b27a11eea5268c7e7/asset/Header.png -------------------------------------------------------------------------------- /asset/LogIn.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Saurav-Pant/Blood-Donation-Project/63db26299b8fa59ff85d2b1b27a11eea5268c7e7/asset/LogIn.png -------------------------------------------------------------------------------- /asset/avatar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Saurav-Pant/Blood-Donation-Project/63db26299b8fa59ff85d2b1b27a11eea5268c7e7/asset/avatar.png -------------------------------------------------------------------------------- /asset/blood.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /asset/blood3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Saurav-Pant/Blood-Donation-Project/63db26299b8fa59ff85d2b1b27a11eea5268c7e7/asset/blood3.png -------------------------------------------------------------------------------- /asset/clerk.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Saurav-Pant/Blood-Donation-Project/63db26299b8fa59ff85d2b1b27a11eea5268c7e7/asset/clerk.png -------------------------------------------------------------------------------- /asset/donor.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Saurav-Pant/Blood-Donation-Project/63db26299b8fa59ff85d2b1b27a11eea5268c7e7/asset/donor.jpg -------------------------------------------------------------------------------- /asset/pencil.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /components.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://ui.shadcn.com/schema.json", 3 | "style": "default", 4 | "rsc": true, 5 | "tsx": true, 6 | "tailwind": { 7 | "config": "tailwind.config.ts", 8 | "css": "src/app/globals.css", 9 | "baseColor": "slate", 10 | "cssVariables": false, 11 | "prefix": "" 12 | }, 13 | "aliases": { 14 | "components": "@/components", 15 | "utils": "@/lib/utils" 16 | } 17 | } -------------------------------------------------------------------------------- /contributing.md: -------------------------------------------------------------------------------- 1 | # Blood-Donation-Project 2 | 3 | ## Introduction 4 | 5 | The Blood Donation Project is an initiative aimed at connecting individuals in need of blood with willing blood donors. The project utilizes npm (Node Package Manager) and version control using Git to manage the codebase and facilitate collaboration. 6 | 7 | ## Getting Started 8 | 9 | To contribute to the project, follow the steps below: 10 | 11 | **Please give it a star to support this open source project.** 12 | 13 | 14 | 1. **Fork the Repository** 15 | 16 | - Go to the GitHub repository at [https://github.com/Saurav-Pant/Blood-Donation-Project](https://github.com/Saurav-Pant/Blood-Donation-Project). 17 | - Click on the "Fork" button in the top-right corner of the page. 18 | - This will create a copy of the repository in your GitHub account. 19 | 20 | 2. **Clone the Repository** 21 | 22 | - On your local machine, open a terminal or command prompt. 23 | - Use the following command to clone the repository: 24 | ```bash 25 | git clone https://github.com/your-username/Blood-Donation-Project.git 26 | ``` 27 | - This will create a local copy of the repository on your machine. 28 | 29 | 3. **Install Dependencies** 30 | 31 | - Run the following command to install the project dependencies using npm: 32 | ```bash 33 | npm install 34 | ``` 35 | 36 | 4. **Configure Clerk** 37 | 38 | - Go to [Clerk](https://clerk.com/) and log in to your account and create an application. 39 | - Rename the `.env.example` file to `.env`: 40 | ```bash 41 | mv .env.example .env 42 | ``` 43 | - Open the `.env` file and replace the placeholders with your actual Clerk keys: 44 | ``` 45 | NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your-clerk-publishable-key 46 | CLERK_SECRET_KEY=your-clerk-secret-key 47 | ``` 48 | - Clerk Application configuration: 49 | ![Clerk Application Configuration ](./asset/clerk.png) 50 | 51 | 5. **Maintaining Synchronization** 52 | 53 | - Always take a pull from the repository to your master branch to keep it updated with the updated repository: 54 | ```bash 55 | git pull 56 | ``` 57 | 58 | 6. **Start the Application** 59 | 60 | - Run the following command to start the website locally: 61 | ```bash 62 | npm run dev 63 | ``` 64 | 65 | 7. **Creating a New Branch** 66 | 67 | - Before starting work on a new feature or bug fix, create a new branch with your GitHub profile name: 68 | 69 | ```bash 70 | git checkout -b your-github-profile-name 71 | ``` 72 | 73 | 8. **Start Contributing** 74 | 75 | - Now that you have set up the project on your local machine, you can start contributing to the project by adding the necessary functionality to connect blood donors with individuals in need. 76 | 77 | 9. **Committing Changes** 78 | 79 | - After making changes to the code, use the following command to stage the changes: 80 | 81 | ```bash 82 | git add . 83 | ``` 84 | 85 | - Commit the changes with a descriptive message: 86 | 87 | ```bash 88 | git commit -m "Add feature XYZ" 89 | ``` 90 | 91 | 10. **Pushing Changes** 92 | 93 | - Push your changes to your forked repository: 94 | ```bash 95 | git push -u origin your-github-profile-name 96 | ``` 97 | 98 | 11. To create a pull request, go to your fork of this repository,, you will see **`compare and pull requests`**. Click on that big green button 99 | 100 | 12. Add an appropriate title and description to your pull request explaining your changes and efforts done. 101 | 102 | 13. Click on **`Create Pull Request`**. 103 | 104 | 14. Voila! You have made a PR to the **Blood-Donation-Project** 💥 Wait for your submission to be accepted and your PR to be merged 🎉 105 | 106 | ## Quick Docker Setup 107 | ### Requirement: 108 | 109 | * Docker Desktop 110 | 111 | ### Let's Begin: 112 | 1. Make sure you have followed **step-4 (Configure Clerk)** from the above procedure. 113 | 2. #### Verify Docker Status: 114 | To ensure a seamless Docker experience, it's essential to check the status of the Docker service on your system.To verify whether the Docker service is currently active or inactive, you can use the following steps: 115 | * Check Docker Service Status: 116 | ```bash 117 | systemctl status docker 118 | ``` 119 | if it's inactive, you'll need to take corrective action. 120 | 121 | * To activate the Docker service, use the following command: 122 | ```bash 123 | systemctl start docker 124 | ``` 125 | 3. #### Build: 126 | Now, let's build the Docker image named 'blood-donation' using the docker build command: 127 | ```bash 128 | docker build -t blood-donation . 129 | ``` 130 | 4. #### Run: 131 | Write the following command to run a Docker container named 'blood_donation ' 132 | ```bash 133 | docker run -p 8080:3000 --name blood_donation blood-donation 134 | ``` 135 | 5. Wait until the ***Ready*** message to appear. 136 | 6. Search the following syntax in your web browser to view the website. 137 | ```bash 138 | localhost:8080 139 | ``` 140 | 141 | ## Contributing Guidelines 142 | 143 | When contributing to the Blood Donation Project, please ensure that you follow these guidelines: 144 | 145 | - Before starting work on a new feature or bug fix, create a new branch for your changes. 146 | - Make your changes and test them thoroughly. 147 | - Ensure that your code follows the project's coding style and conventions. 148 | - Write clear commit messages that explain the purpose and details of your changes. 149 | - Push your changes to your forked repository. 150 | - Submit a pull request to the original repository, clearly describing the changes you have made. 151 | 152 | ## Conclusion 153 | 154 | The Blood Donation Project aims to make a positive impact by connecting blood donors with individuals in need of blood. By following the steps mentioned above, you can contribute to this project and help save lives. Thank you for your support! 155 | -------------------------------------------------------------------------------- /docker-compose.yml: -------------------------------------------------------------------------------- 1 | version: '3.8' 2 | 3 | services: 4 | app: 5 | build: . 6 | working_dir: /usr/app 7 | volumes: 8 | - .:/usr/app 9 | - /usr/app/node_modules 10 | ports: 11 | - "3000:3000" 12 | environment: 13 | - NODE_ENV=development 14 | env_file: 15 | - .env 16 | command: npm run dev 17 | -------------------------------------------------------------------------------- /next.config.mjs: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = { 3 | reactStrictMode: true, 4 | eslint: { 5 | ignoreDuringBuilds: true, 6 | }, 7 | }; 8 | 9 | export default nextConfig; -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "new", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev -H 0.0.0.0", 7 | "build": "next build", 8 | "start": "next start", 9 | "lint": "next lint", 10 | "postinstall": "prisma generate" 11 | }, 12 | "dependencies": { 13 | "@clerk/clerk-react": "^5.1.0", 14 | "@clerk/nextjs": "^4.30.1", 15 | "@prisma/client": "^5.8.1", 16 | "@radix-ui/react-dropdown-menu": "^2.0.6", 17 | "@radix-ui/react-icons": "^1.3.0", 18 | "@radix-ui/react-label": "^2.0.2", 19 | "@radix-ui/react-separator": "^1.1.0", 20 | "@radix-ui/react-slot": "^1.0.2", 21 | "@tabler/icons-react": "^3.4.0", 22 | "class-variance-authority": "^0.7.0", 23 | "clsx": "^2.1.1", 24 | "cors": "^2.8.5", 25 | "dotenv": "^16.3.1", 26 | "formik": "^2.4.5", 27 | "framer-motion": "^10.18.0", 28 | "lucide-react": "^0.323.0", 29 | "next": "^14.2.3", 30 | "next-themes": "^0.2.1", 31 | "prisma": "^5.8.1", 32 | "react": "^18", 33 | "react-burger-menu": "^3.0.9", 34 | "react-dom": "^18", 35 | "react-icons": "^5.0.1", 36 | "sharp": "^0.32.1", 37 | "sonner": "^1.4.41", 38 | "swiper": "^11.0.5", 39 | "tailwind-merge": "^2.3.0", 40 | "tailwindcss-animate": "^1.0.7", 41 | "yup": "^1.3.3" 42 | }, 43 | "devDependencies": { 44 | "@types/node": "^20", 45 | "@types/react": "^18", 46 | "@types/react-dom": "^18", 47 | "autoprefixer": "^10.0.1", 48 | "eslint": "^8", 49 | "eslint-config-next": "14.0.4", 50 | "postcss": "^8", 51 | "tailwindcss": "^3.3.0", 52 | "typescript": "^5" 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /prisma/schema.prisma: -------------------------------------------------------------------------------- 1 | generator client { 2 | provider = "prisma-client-js" 3 | } 4 | 5 | datasource db { 6 | provider = "mongodb" 7 | url = env("DATABASE_URL") 8 | } 9 | 10 | model Donor { 11 | id String @id @default(auto()) @map("_id") @db.ObjectId 12 | firstName String 13 | lastName String 14 | phone String 15 | email String @unique 16 | bloodGroup String 17 | age Int 18 | address String 19 | state String 20 | city String 21 | gender String 22 | } 23 | 24 | model DonorOrg { 25 | id String @id @default(auto()) @map("_id") @db.ObjectId 26 | OrganisationName String 27 | OrganisationPhone String 28 | OrganisationEmail String @unique 29 | OrganisationAddress String 30 | OrganisationState String 31 | OrganisationCity String 32 | } 33 | -------------------------------------------------------------------------------- /public/next.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/vercel.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/Content/State.json: -------------------------------------------------------------------------------- 1 | { 2 | "states": [ 3 | "Andhra Pradesh", 4 | "Arunachal Pradesh", 5 | "Assam", 6 | "Bihar", 7 | "Chhattisgarh", 8 | "Delhi", 9 | "Goa", 10 | "Gujarat", 11 | 12 | "Haryana", 13 | "Himachal Pradesh", 14 | "Jammu & Kashmir", 15 | "Jharkhand", 16 | "Karnataka", 17 | "Kerala", 18 | "Maharashtra", 19 | "Madhya Pradesh", 20 | "Manipur", 21 | "Meghalaya", 22 | "Mizoram", 23 | "Nagaland", 24 | "Odisha", 25 | "Punjab", 26 | "Rajasthan", 27 | "Sikkim", 28 | "Tamil Nadu", 29 | "Tripura", 30 | "Telangana", 31 | "Uttar Pradesh", 32 | "Uttarakhand", 33 | "West Bengal", 34 | "Andaman & Nicobar", 35 | "Chandigarh", 36 | "Dadra & Nagar Haveli", 37 | "Daman & Diu", 38 | "Lakshadweep", 39 | "Puducherry" 40 | ] 41 | } 42 | -------------------------------------------------------------------------------- /src/Context/ThemeContext.tsx: -------------------------------------------------------------------------------- 1 | "use client" 2 | 3 | import * as React from "react" 4 | import { ThemeProvider as NextThemesProvider } from "next-themes" 5 | import { type ThemeProviderProps } from "next-themes/dist/types" 6 | 7 | export function ThemeProvider({ children, ...props }: ThemeProviderProps) { 8 | return {children} 9 | } 10 | -------------------------------------------------------------------------------- /src/app/DonorForm/page.tsx: -------------------------------------------------------------------------------- 1 | "use client" 2 | import React, { useState, useEffect } from "react"; 3 | import { motion } from "framer-motion"; 4 | import { useFormik } from "formik"; 5 | import * as Yup from "yup"; 6 | import { useRouter } from "next/navigation"; 7 | import statesData from "../../Content/State.json" 8 | import { Toaster, toast } from 'sonner' 9 | import { BorderBeam } from "@/components/ui/border-beam"; 10 | 11 | 12 | 13 | 14 | const DonorForm = () => { 15 | 16 | const states = statesData.states; 17 | 18 | const router = useRouter(); 19 | 20 | const validationSchema = Yup.object().shape({ 21 | firstName: Yup.string().required("First Name is required"), 22 | lastName: Yup.string().required("Last Name is required"), 23 | phone: Yup.string().required("Phone Number is required"), 24 | email: Yup.string().email("Invalid email").required("Email is required"), 25 | bloodGroup: Yup.string().required("Blood Group is required"), 26 | age: Yup.number().required("Age is required"), 27 | address: Yup.string().required("Address is required"), 28 | state: Yup.string().required("State is required"), 29 | city: Yup.string(), 30 | gender: Yup.string().required("Gender is required"), 31 | }); 32 | 33 | const handleSubmit = async (values: any) => { 34 | try { 35 | const { isChecked, ...dataToSend } = values; 36 | 37 | const response = await fetch("/api/DonorForm", { 38 | method: "POST", 39 | headers: { 40 | "Content-Type": "application/json", 41 | }, 42 | body: JSON.stringify(dataToSend), 43 | }); 44 | 45 | console.log(dataToSend) 46 | const data = await response.json(); 47 | console.log("Data submitted successfully:", data); 48 | router.push("/") 49 | } catch (error) { 50 | console.error("Error submitting data:", error); 51 | } 52 | }; 53 | 54 | const formik = useFormik({ 55 | initialValues: { 56 | firstName: "", 57 | lastName: "", 58 | phone: "", 59 | email: "", 60 | bloodGroup: "", 61 | age: "", 62 | address: "", 63 | state: "", 64 | city: "", 65 | gender: "", 66 | isChecked: false, 67 | }, 68 | validationSchema, 69 | onSubmit: handleSubmit, 70 | }); 71 | 72 | const [error, setError] = useState(null); 73 | 74 | const handleCheckboxChange = (e: any) => { 75 | formik.setFieldValue("isChecked", e.target.checked); 76 | console.log(e.target.checked) 77 | }; 78 | const handleInputChange = async (e: React.ChangeEvent) => { 79 | formik.handleChange(e); 80 | }; 81 | 82 | const compulsory = *; 83 | 84 | return ( 85 | 92 |
93 |

94 | Register as donor 95 |

96 |
97 |
98 | 99 |
100 | 103 | 114 | {formik.touched.firstName && formik.errors.firstName && ( 115 |
116 | {formik.errors.firstName} 117 |
118 | )} 119 | 120 | 123 | 134 | {formik.touched.lastName && formik.errors.lastName && ( 135 |
136 | {formik.errors.lastName} 137 |
138 | )} 139 | 140 |
141 |
142 | 145 | 157 | 158 | {formik.touched.phone && formik.errors.phone && ( 159 |
160 | {formik.errors.phone} 161 |
162 | )} 163 | 164 | 167 | 178 | 179 | {formik.touched.email && formik.errors.email && ( 180 |
181 | {formik.errors.email} 182 |
183 | )} 184 | 185 |
186 |
187 | 190 | 209 | {formik.touched.bloodGroup && formik.errors.bloodGroup && ( 210 |
211 | {formik.errors.bloodGroup} 212 |
213 | )} 214 | 215 | 218 | 229 | {formik.touched.age && formik.errors.age && ( 230 |
231 | {formik.errors.age} 232 |
233 | )} 234 | 235 |
236 |
237 | 240 | 251 | 252 | {formik.touched.address && formik.errors.address && ( 253 |
254 | {formik.errors.address} 255 |
256 | )} 257 | 258 | 261 | 281 | {formik.touched.state && formik.errors.state && ( 282 |
283 | {formik.errors.state} 284 |
285 | )} 286 | 287 |
288 |
289 | 292 |
293 | 302 | 303 |
304 |
305 | 315 | 316 |
317 |
318 | 328 | 329 |
330 | {formik.touched.isChecked && formik.errors.isChecked && ( 331 |
{formik.errors.isChecked}
332 | )} 333 |
334 |
335 | 345 | {formik.touched.isChecked && formik.errors.isChecked && ( 346 |
{formik.errors.isChecked}
347 | )} 348 |
349 | 350 | {error && ( 351 |
356 | {error} 357 |
358 | )} 359 |
360 | 361 | 369 |
370 |
371 | 372 | ); 373 | }; 374 | 375 | export default DonorForm; 376 | 377 | -------------------------------------------------------------------------------- /src/app/FindBlood/page.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import React, { useState, useEffect } from "react"; 4 | import DonorCard from "@/components/DonorCard"; 5 | import BloodGroupFilter from "@/components/BloodGroupFilter"; 6 | 7 | interface Donor { 8 | id: number; 9 | firstName: string; 10 | lastName: string; 11 | gender: string; 12 | bloodGroup: string; 13 | age: number; 14 | phone: string; 15 | address: string; 16 | } 17 | 18 | 19 | const FindBlood: React.FC = () => { 20 | const [donors, setDonors] = useState([]); 21 | const [filteredDonors, setFilteredDonors] = useState([]); 22 | const [loading, setLoading] = useState(true); 23 | const [bloodGroupFilter, setBloodGroupFilter] = useState(""); 24 | 25 | useEffect(() => { 26 | const fetchData = async () => { 27 | try { 28 | const response = await fetch("/api/DonorForm"); 29 | const data: { Donors: Donor[] } = await response.json(); 30 | setDonors(data.Donors); 31 | setLoading(false); 32 | } catch (error) { 33 | console.error("Error fetching data:", error); 34 | setLoading(false); 35 | } 36 | }; 37 | 38 | fetchData(); 39 | }, []); 40 | 41 | useEffect(() => { 42 | setFilteredDonors( 43 | bloodGroupFilter === "" 44 | ? donors 45 | : donors.filter((donor) => donor.bloodGroup === bloodGroupFilter) 46 | ); 47 | }, [bloodGroupFilter, donors]); 48 | 49 | const handleBloodGroupChange = (e: React.ChangeEvent) => { 50 | setBloodGroupFilter(e.target.value); 51 | }; 52 | 53 | return ( 54 |
55 |
56 |

Donor's Information

57 | 61 |
62 | 63 |
64 | {loading ? ( 65 |
66 |

Loading...

67 |
68 | ) : ( 69 |
70 | {filteredDonors.map((donor) => ( 71 | 72 | ))} 73 |
74 | )} 75 |
76 |
77 | ); 78 | }; 79 | 80 | export default FindBlood; 81 | -------------------------------------------------------------------------------- /src/app/OrgForm/page.tsx: -------------------------------------------------------------------------------- 1 | "use client" 2 | import React, { useState, useEffect } from "react"; 3 | import { useFormik } from "formik"; 4 | import * as Yup from "yup"; 5 | import { useRouter } from "next/navigation"; 6 | import statesData from "../../Content/State.json" 7 | import { toast, Toaster } from "sonner"; 8 | import { BorderBeam } from "@/components/ui/border-beam"; 9 | 10 | 11 | const OrgForm = () => { 12 | const [formData, setFormData] = useState({ 13 | OrganisationName: "", 14 | OrganisationPhone: "", 15 | OrganisationEmail: "", 16 | OrganisationAddress: "", 17 | OrganisationState: "", 18 | OrganisationCity: "", 19 | }); 20 | const [isChecked, setIsChecked] = useState(false); 21 | 22 | const states = statesData.states; 23 | 24 | 25 | const handleCheckboxChange = (e: any) => { 26 | setIsChecked(e.target.checked); 27 | }; 28 | 29 | const router = useRouter(); 30 | 31 | const validationSchema = Yup.object().shape({ 32 | OrganisationName: Yup.string().required("Organization Name is required"), 33 | OrganisationPhone: Yup.string().required("Organization Number is required"), 34 | OrganisationEmail: Yup.string().email("Invalid email").required("Email is required"), 35 | OrganisationAddress: Yup.string().required("Organization Address is required"), 36 | OrganisationState: Yup.string().required("Organization Address is required"), 37 | OrganisationCity: Yup.string() 38 | }); 39 | 40 | const handleSubmit = async (values: any) => { 41 | try { 42 | const { ...dataToSend } = values; 43 | 44 | const response = await fetch("/api/orgForm", { 45 | method: "POST", 46 | headers: { 47 | "Content-Type": "application/json", 48 | }, 49 | body: JSON.stringify(dataToSend), 50 | }); 51 | 52 | console.log(dataToSend) 53 | const data = await response.json(); 54 | console.log("Data submitted successfully:", data); 55 | router.push("/") 56 | } catch (error) { 57 | console.error("Error submitting data:", error); 58 | } 59 | }; 60 | 61 | 62 | const formik = useFormik({ 63 | initialValues: { 64 | OrganisationName: "", 65 | OrganisationPhone: "", 66 | OrganisationEmail: "", 67 | OrganisationAddress: "", 68 | OrganisationState: "", 69 | OrganisationCity: "", 70 | }, 71 | validationSchema, 72 | onSubmit: handleSubmit, 73 | }); 74 | 75 | const handleInputChange = async (e: any) => { 76 | const { name, value } = e.target; 77 | formik.handleChange(e); 78 | setFormData((prevState) => ({ 79 | ...prevState, 80 | [name]: value, 81 | })); 82 | }; 83 | 84 | const compulsory = *; 85 | 86 | return ( 87 | <> 88 |
92 |
93 |

94 | Register as Organisation 95 |

96 |
97 |
98 | 99 | 100 |
101 | 104 | 115 | {formik.touched.OrganisationName && formik.errors.OrganisationName && ( 116 |
117 | {formik.errors.OrganisationName} 118 |
119 | )} 120 |
121 |
122 | 125 | 136 | {formik.touched.OrganisationPhone && formik.errors.OrganisationPhone && ( 137 |
138 | {formik.errors.OrganisationPhone} 139 |
140 | )} 141 | 142 | 145 | 156 | {formik.touched.OrganisationEmail && formik.errors.OrganisationEmail && ( 157 |
158 | {formik.errors.OrganisationEmail} 159 |
160 | )} 161 |
162 | 163 |
164 | 167 | 178 | 179 | {formik.touched.OrganisationAddress && formik.errors.OrganisationAddress && ( 180 |
181 | {formik.errors.OrganisationAddress} 182 |
183 | )} 184 | 185 | 186 | 189 | 209 | 210 | 211 | {formik.touched.OrganisationState && formik.errors.OrganisationState && ( 212 |
213 | {formik.errors.OrganisationState} 214 |
215 | )} 216 |
217 |
218 | 229 |
230 | 231 |
232 | 233 | 241 |
242 |
243 |
244 | 245 | ); 246 | }; 247 | export default OrgForm; 248 | -------------------------------------------------------------------------------- /src/app/ThankYou/page.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import Footer from "@/components/Footer"; 4 | 5 | const ThankYou: React.FC = () => { 6 | return ( 7 | <> 8 |
11 |
12 |

13 | Thank you for your Gift! 14 |

15 |

16 | Your donation can save lives and bring hope to those in need. 17 |

18 |
19 |
20 |