CharityConnect CharityConnect is a modern full-stack web application that acts as a central platform for connecting three types of users:
Donors – individuals or organizations who want to help.
Needy individuals – people requesting help or support.
Administrators – who manage and monitor the platform.
This project was built to make charitable giving more transparent, organized, and efficient. It provides a simple way for people in need to request help, for donors to respond, and for admins to manage the process — all in a secure role-based system. The frontend is built with React, Vite, and TypeScript, and communicates with a C# .NET API backend.
Features
- User Authentication & Authorization Secure login and logout with JWT (JSON Web Token) authentication.
JWT is stored in session storage to keep users logged in between requests.
Automatic role-based redirection after login:
Admin → Admin Dashboard
Donor → Donor Dashboard
Needy → Needy Dashboard
- Role-Specific Dashboards Admin Dashboard – View and manage all registered users, oversee help requests, ensure compliance.
Donor Dashboard – Browse available help requests, choose which ones to support, view donation history.
Needy Dashboard – Create and manage personal help requests, track progress, view donor responses.
- Help Request Management Needy users can create new help requests (e.g., food, housing, education, medical aid).
Donors can browse and select requests to fulfill.
Requests are tracked and visible to admins for monitoring.
- Secure API Communication Uses IHttpClientFactory for efficient and reusable HTTP calls to the backend API.
All requests to the API are authenticated with the stored JWT.
Session handling includes token validation and parsing to prevent unauthorized access.
- Modern UI Fully responsive design with Bootstrap 5.
Clean navigation layout with a main menu linking to Home, Login, Create Help Request, and Privacy Policy.
Technologies Used Technology Purpose ASP.NET Core API Backend logic and secure HTTP API C# Application logic and backend code React & Vite Frontend web framework and build tool TypeScript Frontend application logic and typing Entity Framework Core (If connected to backend DB) Data handling JSON Web Token (JWT) Authentication and authorization
frontend/ │ ├── public/ # Static assets like favicon │ ├── src/ │ ├── assets/ # Images, fonts, etc. │ ├── components/ # Reusable React components │ ├── pages/ # React views for different routes │ ├── services/ # API client calls (e.g. using Axios) │ ├── App.tsx # Root React component │ └── main.tsx # Entry point for Vite/React │ ├── package.json # Node.js dependencies and scripts ├── tsconfig.json # TypeScript configuration └── vite.config.ts # Vite bundler configuration