- Overview
- Key Features
- Tech Stack
- Live Preview
- Site Map
- Project Structure
- Pages Reference
- Donor Eligibility Logic
- Admin Panel
- Getting Started
- Roadmap
- Contributing
- License
- Author
LifeDrop is a frontend web platform built to connect blood donors with people in urgent need of blood across Bangladesh. It allows visitors to register as donors, search for available donors by blood group and location, raise emergency blood requests, and stay informed through a live notice board. An integrated admin panel gives administrators full control over donor records, incoming requests, and public announcements.
The entire experience is built with plain HTML, CSS, and JavaScript — no frameworks, no build tools, no backend server. Data is handled entirely in the browser using JavaScript data structures and localStorage, which makes the project lightweight, easy to read, and ideal for learning, demos, and portfolio purposes.
| Feature | Description |
|---|---|
| Donor Registration | New donors sign up with personal details, blood group, age, weight, and health information. Basic validation enforces age (18–65) and minimum weight (45 kg) requirements. |
| Donor Search & Listing | Visitors can browse the full donor list or filter by blood group and location to find a match quickly. |
| Donor Profiles | Each donor has a dedicated profile page showing contact details, blood group, location, and current donation eligibility status. |
| Emergency Blood Requests | Patients or relatives can submit urgent blood requests through the contact page, which then appear in the admin request queue. |
| Notice Board | A public notice section keeps the community updated on urgent needs and upcoming donation camps. |
| Admin Dashboard | A protected admin panel summarizes total donors, blood group distribution, pending/completed requests, and recently registered donors. |
| Donor & Request Management | Admins can manage the full donor list and update the status of blood requests from a dedicated management screen. |
| Authentication | Login and session handling is managed client-side through localStorage, separating regular users from admin accounts. |
| Responsive Design | The interface adapts cleanly across desktop, tablet, and mobile screens. |
| FAQ & About Pages | Static informational pages explain how the platform works and answer common donor questions. |
| Layer | Technology |
|---|---|
| Markup | HTML5 (semantic, multi-page structure) |
| Styling | CSS3 with custom properties for a consistent red/white blood-donation theme |
| Logic | Vanilla JavaScript — DOM manipulation, dynamic rendering, client-side validation |
| Data & Sessions | Browser localStorage (donor records, requests, session/role handling) |
| Hosting | GitHub Pages |
| Tooling | VS Code (.vscode workspace settings included) |
No external frameworks, package managers, or build steps are used — the project runs as static files.
The deployed version of the project is available here:
https://chaitymumu77.github.io/LifeDrop/
A simplified view of how the pages connect for a typical visitor and for an administrator:
Home (index.html)
├── Register as Donor (register.html) ──► Login (login.html)
├── Find a Donor (donor-list.html) ──► Donor Profile (donor-profile.html)
├── Search Donors (search.html)
├── About (about.html)
├── FAQ (faq.html)
├── Request Blood / Contact (contact.html)
├── Notice Board (notice.html)
└── User Profile (profile.html)
Admin Login ──► Dashboard (dashboard.html)
├── Manage Donors (manage.html)
├── Manage Blood Requests (manage-requests.html)
└── Notices (notice.html)
LifeDrop/
├── css/
│ └── style.css Global styles, theme variables, and shared components
├── js/
│ └── data.js Donor and request data, navigation/footer rendering, eligibility logic
├── .vscode/ Editor workspace settings
├── index.html Landing page with hero section and platform stats
├── about.html About the platform and its mission
├── contact.html Contact form / emergency blood request submission
├── dashboard.html Admin dashboard with stats and charts
├── donor-list.html Full list of registered donors
├── donor-profile.html Individual donor profile view
├── faq.html Frequently asked questions
├── login.html User and admin login
├── manage.html Admin: manage donor records
├── manage-requests.html Admin: manage blood requests
├── notice.html Public and admin notice board
├── profile.html Logged-in user profile
├── register.html Donor registration form
├── search.html Search donors by blood group and location
└── README.md
| Page | File | Access | Purpose |
|---|---|---|---|
| Home | index.html |
Public | Hero section, platform statistics, call-to-action |
| About | about.html |
Public | Information about LifeDrop's mission |
| Register | register.html |
Public | New donor sign-up form with validation |
| Login | login.html |
Public | User and admin authentication |
| Donor List | donor-list.html |
Public | Browse all registered donors |
| Donor Profile | donor-profile.html |
Public | Detailed view of a single donor |
| Search | search.html |
Public | Filter donors by blood group / location |
| Contact | contact.html |
Public | Submit an emergency blood request |
| Notice Board | notice.html |
Public / Admin | View and post announcements |
| FAQ | faq.html |
Public | Common questions about donating |
| Profile | profile.html |
Logged-in user | View and manage personal account details |
| Dashboard | dashboard.html |
Admin only | Overview stats, blood group distribution, recent activity |
| Manage Donors | manage.html |
Admin only | Add, edit, or remove donor records |
| Manage Requests | manage-requests.html |
Admin only | Update the status of blood requests |
Every donor record carries information used to automatically determine donation eligibility:
- Minimum age of 18 and maximum age of 65 at registration.
- Minimum body weight of 45 kg.
- Smoking status and any disclosed medical conditions are recorded for reference.
- A donor's eligibility status (Available or On Wait) is calculated from their last donation date, so the platform can surface only donors who are currently able to donate again.
The dashboard and management pages are role-protected. On load, each admin page checks the active session in localStorage; if the signed-in account is not an admin, the visitor is redirected back to the login page. From the admin panel, an administrator can:
- View live statistics: total donors, number of blood groups represented, pending requests, and completed requests.
- See a visual breakdown of donors by blood group.
- Review and update the status of incoming blood requests.
- Manage the full donor database and publish notices to the public board.
No installation, dependencies, or build tools are required — LifeDrop is a static site.
# Clone the repository
git clone https://github.com/chaitymumu77/LifeDrop.git
# Move into the project folder
cd LifeDrop
# Open index.html directly in your browser,
# or serve it locally for the best experience:
python -m http.server 5500Then visit http://localhost:5500 in your browser. Using a local server (rather than opening the file directly) avoids potential localStorage/path issues across pages.
- Real backend integration (Node.js / Firebase) for persistent, multi-device data
- SMS or email alerts for urgent blood requests
- Location-based donor matching using maps
- Bangla language toggle for wider accessibility
- Donation history and reminder notifications for donors
- Progressive Web App (PWA) support for offline access
Contributions are welcome.
- Fork the repository
- Create a new branch:
git checkout -b feature/your-feature-name - Commit your changes:
git commit -m "Add your feature" - Push to the branch:
git push origin feature/your-feature-name - Open a Pull Request
Please keep changes focused and consistent with the existing code style.
This repository does not currently include a license file. If you intend to reuse or distribute this project, consider adding an open-source license such as MIT.
Maintained by chaitymumu77 on GitHub.
For issues, suggestions, or feature requests, please open an issue on this repository.
If this project helped you, consider giving it a star.