Blood Donation Website

A React-based web application designed to connect blood donors with those in need of blood. This platform allows users to sign up as donors, view donation centers, and get information about the blood donation process.

Deployed Link: https://dreamy-banoffee-b9dd62.netlify.app/
Video: https://drive.google.com/file/d/1EAc3rqqnCm4HFRsbnDYhI07FVBPTMlOd/view?usp=sharing

Features

• User Registration & Login: Users can create accounts, log in, and manage their donation history.
• Donation Center Locator: Find nearby blood donation centers with location and contact details.
• Donation History: Track past donations and receive reminders for future donations.
• Real-time Notifications: Alerts for urgent blood needs and upcoming drives.

Front-End Modules

• Google Map Integration: Display nearby donation centers on an interactive map.
• Text Typewriter Animation: Text appears one character at a time for a dynamic effect.
• Live Chat: Real-time assistance through live chat.
• Login / Register: User authentication system.
• Modal Pop-up: Display content in a modal overlay for focused interactions.
• Email Complaint: Send complaints or feedback via email.
• Custom Cursor: Unique, interactive mouse cursor for a personalized experience.
• Custom Context Menu: Enhanced right-click menu with custom options.
• Text Selection Effect: Special effect applied when text is selected.
• Tabs in One Page: Manage content using a tabbed navigation system within a single page.
• Custom Image Pop-up: Image zoom-in effect in a modal pop-up.
• Two Image Effect: Side-by-side image comparison with interactive effect.
• Scroll to Top: Button to quickly scroll back to the top of the page.
• Right Click: Custom right-click behavior for interactive content.

Animations

• 3D Moving Cube: A rotating 3D cube for an interactive visual experience.
• Animation on Scroll: Elements trigger animations as the user scrolls down the page.
• Background Animation: Dynamic, animated background for added appeal.
• Custom Scroll Bar: A stylish, customized scroll bar to enhance UI.
• Sparkle Effect: Sparkling visual effects on select elements.
• Opening Book Animation: Animation of a book opening to reveal content.
• Ringing Phone: Animated ringing phone for notifications.
• Parallax Effect: Scrolling effect creating depth and interactivity.
• Dropdown Effect: Smooth dropdown menu animations.
• Pulse Beat Animation: Subtle "pulse" effect for interactive elements like buttons.

Installation

To run this project locally:

1. Clone the repository:

   git clone https://github.com/yourusername/blood-donation-website.git
   

2. Navigate into the project directory:

   cd blood-donation-website
   

3. Install dependencies:

   npm install
   

4. Start the app:

   npm start