voluntree-client-side Tailwind Templates

Voluntree Client Side

Voluntree Client is the frontend of a volunteer management platform connecting individuals and organizations. It features secure authentication, volunteer opportunity management, request tracking, dynamic search, and a responsive UI. Built with React, Tailwind CSS, and React Query, it ensures a seamless and engaging user experience.

#axios #daisyui #dotenv #react #reactquery #reactrouterdom #tailwindcss #toastify #localforage #reacticons
Demo Download

Voluntree Client

Project Overview

The frontend for the Voluntree project, a volunteer management platform that connects individuals and organizations for social service opportunities. The platform ensures seamless volunteer recruitment, management, and tracking for both volunteers and organizers.

🎯 Purpose

The client-side application provides a user-friendly interface for:

  • Viewing and searching volunteer opportunities.
  • Creating and managing volunteer posts.
  • Applying for and tracking volunteer requests.
  • Ensuring secure authentication for users and organizers.

🚀 Live URL

📸 Project Screenshot

📌 Core Features

  • 🔐 User Authentication:

    • Secure login and registration with Firebase.
    • Personalized dashboards for volunteers and organizers.

  • 📅 Volunteer Opportunity Management:

    • Create, view, edit, and delete volunteer opportunities.
    • View detailed descriptions, requirements, and deadlines.

  • 📥 Volunteer Requests:

    • Apply for opportunities with a single click.
    • Track application history and approval status.

  • 🔍 Dynamic Search & Filtering:

    • Search opportunities by title for easy access.

  • 📱 Responsive & Modern Design:

    • Fully optimized for mobile, tablet, and desktop devices.

  • ✨ Interactive UI (Under Development):

    • Smooth animations and transitions for a better experience.

🛠️ Technologies Used

Technology Purpose
React Frontend UI development
React Router Routing and navigation
Tailwind CSS Modern and responsive styling
Firebase Secure authentication
Axios Handling API requests
React Query Server-state management & caching
React Icons Scalable and customizable icons
SweetAlert2 Beautiful alerts and pop-ups
Swiper.js Smooth carousels and sliders
React Hot Toast Notifications for user interactions
React Datepicker Select and manage dates seamlessly
Flowbite UI components for enhanced styling
LocalForage Offline storage for user data

📦 Dependencies

The project requires the following dependencies: 

{
  "dependencies": {
    "axios": "^1.7.9",
    "firebase": "^11.1.0",
    "flowbite": "^2.5.2",
    "localforage": "^1.10.0",
    "match-sorter": "^8.0.0",
    "react": "^18.3.1",
    "react-datepicker": "^7.5.0",
    "react-dom": "^18.3.1",
    "react-hot-toast": "^2.4.1",
    "react-icons": "^5.4.0",
    "react-router-dom": "^7.1.0",
    "sort-by": "^1.2.0",
    "sweetalert2": "^11.15.3",
    "swiper": "^11.1.15"
  }
}

📥 Installation

To set up the project locally, follow these steps: But make sure you have setup environment keys. (.env)

# Clone the repository
git clone https://github.com/aburayhan-bpi/voluntree-client-side.git

# Navigate to the project directory
cd voluntree-client-side

# Install dependencies
npm install

# Start the development server
npm start dev

---

Top categories

tailwind daisyui resume portfolio email blog dashboard landing-page admin ecommerce
Loading Svelte Themes