System Requirements Document (SRD)

Project Name: topaz-ngo

1. Introduction

The topaz-ngo project is a website designed for Be Ansaar Foundation, a non-profit organization based in India. The website aims to showcase the foundation's mission, vision, and impact while providing an intuitive platform for donations, volunteer registrations, and community engagement.

The foundation's tagline, "Live to Serve, Serve to Live", encapsulates its dedication to helping underprivileged communities through compassion, unity, and service.

2. System Overview

The website will serve as a digital hub for Be Ansaar Foundation, enabling the organization to:

• Share its story, mission, and vision with the world.
• Showcase its impact through galleries and project highlights.
• Provide a seamless donation experience via Razorpay integration.
• Engage visitors with volunteer registration and event participation opportunities.

The system will be accessible across devices, ensuring a responsive and user-friendly experience.

3. Functional Requirements

As a User:

• I should be able to view the "About Us" section to understand the NGO's mission and vision.
• I should be able to browse the "Our Impact" section to see the foundation's achievements and projects.
• I should be able to explore the gallery to view photos of events and initiatives.
• I should be able to make donations using a secure payment gateway (Razorpay).

As an Admin:

• I should be able to upload new photos to the gallery.
• I should be able to update the "Our Impact" section with recent achievements.
• I should be able to manage donation records and generate reports.

4. User Personas

1. Admin

• Role: Manages website content, donation records, and gallery updates.
• Needs: Secure access to backend tools for content management.

2. User

• Role: Visitors interested in learning about the NGO, donating, or volunteering.
• Needs: Easy navigation, clear information, and secure donation options.

5. Visuals Colors and Theme

Color Palette:

Based on the provided logo and reference images, the website will feature a monochromatic yet impactful theme:

• Background: #F5F5F5 (Soft Gray)
• Surface: #FFFFFF (White)
• Text: #333333 (Dark Charcoal)
• Accent: #007BFF (Bright Blue for buttons and links)
• Muted Tones: #B0B0B0 (Light Gray for secondary elements)

6. Signature Design Concept

Interactive Hands of Unity Homepage

The homepage will feature a dynamic, interactive design inspired by the NGO's logo.

• Visual Element: A central animation of hands reaching upward, symbolizing unity and support. As users scroll, the hands subtly move, creating a sense of engagement.
• Background: A gradient transitioning from soft gray to white, reflecting hope and progress.
• Micro-Interactions: Hover effects on buttons and links that mimic the movement of hands.
• Donation Section: A bold, animated donation button that pulses gently to draw attention.
• Gallery Preview: A carousel showcasing impactful images from the foundation's events.

This design will make the website memorable and emotionally resonant.

7. Non-Functional Requirements

• Performance: The website must load within 3 seconds on standard internet connections.
• Security: All payment transactions must be encrypted using SSL.
• Accessibility: The website must comply with WCAG 2.1 standards.
• Scalability: The system should support future additions like event registrations and blog posts.

8. Tech Stack

Frontend:

• React for Web

Backend:

• Python
• FastAPI

Database:

• MySQL (with Alembic for migrations)

AI Tools:

• GPT 5.4 for user-friendly responses

Local Orchestration:

• Docker
• docker-compose

Server-Side Orchestration:

• Kubernetes

9. Assumptions and Constraints

• The website will primarily target Indian users, with INR as the default currency for donations.
• Razorpay will be used as the payment gateway unless specified otherwise.
• The admin will manage content updates manually via a secure backend interface.

10. Glossary

• NGO: Non-Governmental Organization.
• WCAG: Web Content Accessibility Guidelines.
• SSL: Secure Sockets Layer, a standard security protocol for encrypted communication.
• Razorpay: A payment gateway for online transactions.

This document outlines the requirements for the topaz-ngo project and serves as the foundation for development. Let me know if any changes are needed, Zaid! 😊