Volunteer Network

A responsive, feature-rich platform to manage and engage with volunteer opportunities. This project demonstrates expertise in creating user-friendly interfaces, secure backends, and robust CRUD functionalities for real-world applications.

✨ Purpose

Volunteer Connect allows users to create, manage, and participate in volunteer opportunities seamlessly. The platform focuses on ease of use, secure data handling, and responsive design.

🚀 Live URL

Volunteer Connect Live Website

🔑 Key Features

1. User Authentication

   • Email-password-based login and registration.
   • Social login (Google/GitHub).
   • JWT-based authentication for private routes.

2. Volunteer Management

   • Create, update, delete, and view volunteer need posts.
   • Search and filter volunteer opportunities.
   • Sign up as a volunteer for a post with real-time updates.

3. Dynamic Pages and Layouts

   • Dynamic titles for every route.
   • Fully responsive design for mobile, tablet, and desktop.
   • Light/Dark theme toggle for a personalized experience.

4. Interactive Notifications

   • Toast/SweetAlert for CRUD operations, errors, and successes.

5. Additional Features

   • A 404 page for invalid routes.
   • Spinner for loading states.
   • Pagination for the "All Volunteer Posts" page.
   • Framer Motion animations for enhanced UI experience.

6. Data Security

   • Firebase and MongoDB credentials secured via environment variables.

📁 Pages and Components

1. Home Page

   • Slider.
   • Featured Volunteer Needs section (sorted by deadline).
   • Extra sections for user engagement.

2. Authentication Pages

   • Login and Registration with validations.

3. Volunteer Need Post Management

   • Add, update, and manage your posts.
   • View all posts with filtering and search options.

4. Volunteer Actions

   • "Be a Volunteer" functionality with real-time updates.

5. Profile Management

   • Manage your posts and requests separately.

6. Footer and Navbar

   • User-friendly navigation.
   • Conditional login/logout buttons and user details.

🛠️ Tech Stack

Frontend

• React: Component-based UI framework.
• Tailwind CSS & DaisyUI: For styling and responsive design.
• Framer Motion: Smooth animations.
• React Helmet Async: Dynamic title updates.
• React Toastify/SweetAlert2: Notifications.

Backend

• Node.js & Express: Backend API.
• MongoDB: Database for storing user and post data.
• JWT: Secure authentication.

Deployment

• Client: Firebase Hosting.
• Server: Vercel Hosting.

🛠️ NPM Packages Used

• Firebase
• React Router DOM
• React Datepicker
• SweetAlert2
• React Toastify
• JWT Decode
• Framer Motion
• Axios

📦 Setup Instructions

🔧 Installation

1. Clone the Repository

   git clone https://github.com/your-username/volunteer-connect.git
   cd volunteer-connect
   

2. Install Dependencies:

   npm install

3. Set Up Environment Variables: Create a .env file in the project root and add the following variables:

   VITE_API_URL=your_backend_api_url
   VITE_FIREBASE_API_KEY=your_firebase_api_key
   VITE_FIREBASE_AUTH_DOMAIN=your_firebase_auth_domain
   VITE_FIREBASE_PROJECT_ID=your_project_id
   VITE_FIREBASE_STORAGE_BUCKET=your_storage_bucket
   VITE_FIREBASE_MESSAGING_SENDER_ID=your_sender_id
   VITE_FIREBASE_APP_ID=your_app_id
   

4. Run the Application:

   npm run dev

5. Build for Production:

   npm run build