GIVEBACK Frontend

Introduction

Project Notice: This project was developed as a coursework assignment and completed within 15 days. While functional, it may contain limitations and areas for improvement due to the time constraints.

GIVEBACK is a charitable donation platform designed to support disaster-affected areas in Vietnam. The system is built to manage charity campaigns, process user donations, and provide transparent reports on fund utilization. GIVEBACK aims to ensure transparency, accountability, and efficiency in donation management and fund distribution.

We welcome contributions from the community to make this platform practical and effectively support Vietnamese people affected by natural disasters.

Main Features

1. Account Registration and Authentication

• Account Registration:

  • Users can register with roles: DONOR (Contributor), CHARITY (Charitable Organization), or BENEFICIARY (Support Recipient).
  • Enter basic information such as email, password, full name, phone number, and address.
  • Verification via OTP sent to phone number.

• CHARITY Account Verification:

  • Charitable organizations need to provide operating licenses.
  • Admin reviews and verifies licenses before updating status to VERIFIED.

2. Charity Campaign Management

• Create New Campaign (CHARITY):
  • Enter campaign information such as name, description, target budget, location, start and end time.
  • Specify exact location (Province/City, District, Ward/Commune, Street/Village).
  • Upload illustrative images for the campaign.

• Edit Campaign Information (CHARITY):

  • Update editable information such as status, description, and budget.
  • System validates information before saving changes.

• Delete Campaign (CHARITY):

  • Organizations can delete campaigns under their management.
  • System handles related links and data when campaigns are deleted.

3. Charitable Donations

• Make Donations (DONOR):

  • Select the campaign to donate to.
  • Enter donation amount and comments (if any).
  • Choose payment method (Bank transfer, E-wallets like Momo, VNPAY).
  • Confirm information and complete transaction.

• Payment Processing:

  • System integrates with payment gateways like ZaloPay to process transactions.
  • Update payment status (PENDING, SUCCESS, FAILED) based on payment gateway response.

4. View and Manage Reports

• Export Reports (DONOR & CHARITY):

  • Users can export detailed reports in PDF or Excel format.
  • Reports include overview information about campaigns, donations, and fund allocation.

• View Overview Reports (ADMIN & CHARITY):

  • System displays various reports such as number of charities, campaigns, total donations, and number of donors.
  • Provides corresponding charts for easy tracking.

5. Comments and Reviews

• Campaign Interaction (DONOR & BENEFICIARY):
  • Users can comment on campaigns and rate with stars (1-5).
  • Share campaign information on social media.

• Comment Management (ADMIN):
  • Moderate comment content to ensure compliance with regulations.

6. User Management

• Personal Profile Management:

  • Users can edit personal information such as name, email, profile picture, and address.
  • Cannot edit important information like phone number and role.

• User Permission Management:

  • ADMIN role has rights to manage the entire system.
  • CHARITY and BENEFICIARY have separate permissions according to their roles.

7. Security and Moderation

• Authentication and Authorization:

  • Use JWT for user authentication.
  • Role-based authorization to access appropriate functions.

• CHARITY License Review:

  • Admin verifies the validity of operating licenses from charitable organizations.

Additional Features

1. Heatmap

• Display Affected Areas (DONOR & PUBLIC):
  • Integrate heatmap to display areas affected by natural disasters.
  • Real-time updates from official sources.

2. Disaster News Updates

• News Feed:
  • Display news updates about disaster situations and support activities.
  • Users can comment and share information on the news feed.

OTP Usage and Authentication Process

• Send OTP:

  • System sends OTP code via phone number to authenticate users during registration and login.

• Verify OTP:

  • Users enter OTP code to complete account authentication process.

Security System and Moderation

• Data Protection:

  • Use security measures such as password encryption and protection against common security vulnerabilities.

• Content Moderation:

  • Admin has the ability to moderate user-generated content such as comments and reviews to ensure appropriateness and compliance with regulations.

Technologies Used

• Frontend:

  • Next.js, TypeScript, Tailwind CSS.

• Backend:

  • Node.js, Express.js, PostgreSQL, Sequelize

• Other Tools:

  • Docker, Git, ESLint, Prettier.

Conclusion

The GIVEBACK system is designed to provide a powerful and flexible platform for managing charitable activities, ensuring transparency and efficiency in the use of charitable funds. With diverse features and modern technology, GIVEBACK hopes to effectively support victims affected by natural disasters in Vietnam.

---

How to Contribute

We welcome all contributions from the community to improve and enhance the system. You can contribute by:

1. Fork the repository.
2. Create a new branch for the feature or bug fix you want to add.
3. Submit a Pull Request with detailed description of your changes.

If you have any questions or need support, please contact us via email: vietcao10@gmail.com.

Repository Links

• Frontend: https://github.com/CaoQuocViet/giveback
• Backend: https://github.com/CaoQuocViet/giveback-server