- Concept Overview
- Front-End Features
- Back-End Features
- Tools & Technologies
- ER Diagram
- Sitemap
- User Flow
- User Stories
Theme: A platform where users can explore and donate to various charity organizations tied to a couple's values.
Objective:
- Celebrate love by inspiring generosity.
- Provide a seamless user experience for exploring charities and donating.
- A hero section introducing the mission.
- Links/buttons for logging in, exploring charities, and donating.
- Display the wedding date with a countdown.
- Highlight charity statistics (e.g., total donations).
- Login/Logout: Use Django Rest Framework for token-based authentication.
- Display personalized greetings.
- Show donation history and progress.
- Enable users to set donation goals.
- Explore three charities with descriptions, images, and goals.
- Allow users (admins) to create/update/delete charity profiles.
- Enable commenting or "likes" on charities as a bonus feature.
- Use bootstrap and CSS for a modern, responsive design.
- Ensure compatibility across devices.
-
External API:
Integrated with the YouTube Data API v3 using OAuth2 to securely retrieve metadata about a scheduled livestream video. -
Use Case:
Guests visiting the homepage will see a countdown timer that transitions to an embedded YouTube livestream video. This dynamic behavior is powered by real-time data retrieved from the YouTube API, such as:scheduledStartTimeactualStartTimeactualEndTimeliveBroadcastStatus
-
Backend Implementation:
- A Django view at
/api/youtube-proxy/?videoId=...acts as a secure proxy. - It uses a long-lived refresh token to generate an access token on the server, without requiring user interaction.
- Fetches metadata using the
youtube.videos().list(...)endpoint. - Handles API errors gracefully with detailed logging.
- A Django view at
-
Security:
- OAuth2 credentials and the refresh token are stored securely as environment variables.
- Tokens are never exposed to the frontend.
- The server refreshes the access token as needed, following Google’s best practices.
- RESTful API with Django Rest Framework.
- Serve data to the React front-end.
- PostgreSQL for scalable and reliable data management.
- Store user profiles, charity data, and donation transactions.
- Secure user login with hashed passwords.
- Assign roles (admin, authenticated user, guest).
- CRUD functionality for donations.
- Generate donation receipts.
- Use Django's
unittestframework to test API endpoints and functionality.
- React with React Router.
- Axios for API calls.
- Django with Django Rest Framework.
- PostgreSQL database.
- Git for version control.
- Deploy front-end and back-end with Render.
erDiagram
USER {
int id PK
string username
string email
}
PROFILE {
int id PK
date wedding_date
string bio
string location
string profile_picture
string bank
string bank_account
string revolut_username
}
CHARITY {
int id PK
string name
string description
string website
string logo
}
DONATION {
int id PK
int profile_id FK
string donor_name
string donor_email
decimal amount
string message
string status "pending/confirmed/failed"
datetime created_at
datetime updated_at
}
USER ||--|| PROFILE : "has"
PROFILE }o--o{ CHARITY : "supports"
CHARITY ||--o{ DONATION : "receives"
mindmap
root((Love That Gives Back))
About / How It Works (About Us)
Login Page (Login / Logout)
Home Page (Home)
Select Cause (Charities)
Donation Form Page (Donate)
Payment Instructions Page
Donation Confirmation Page
Couple Dashboard (Dashboard)
Couple's Profile (Settings)
Edit Profile
Manage Supported Charities (Charities)
Add New Charity
View Supported Charities
Edit Selected Charities
View Donations (Donations)
List of Confirmed Donations
Donation Details Page
Admin Dashboard (Admin Panel)
Manage Donations
(Confirm / Fail)
View Overall Donation Statistics (Analytics/Reports)
Charts
Export
Manage Users
Manage Charities
flowchart TD
A[Visit Home Page] --> B{User Type?}
B -- Guest --> C[Select Couple Profile]
C --> D[Choose Supported Charity]
D --> E[Fill Out Donation Form]
E --> F[Review Payment Instructions]
F --> G[Donation Confirmation]
B -- Couple --> H[Register / Login]
H --> I[Manage Profile]
I --> J[Edit Profile Details]
J --> K[(Wedding Date, Bio, Location)]
I --> L[Manage Supported Charities]
L --> M[Add New Charity]
M --> N[(Name, Description, Website)]
L --> O[View/Update Selected Charities]
I --> P[View Donations]
P --> Q[List of Confirmed Donations]
Q --> R[Donation Details]
B -- Admin --> S[Admin Login]
S --> T[Admin Dashboard]
T --> U[Manage Donations]
T --> V[View Statistics & Analytics]
V --> W[(Percentage Charts, Donation Trends)]
T --> X[Manage Users & Charities]
- As a guest, I want to view a couple’s profile and supported charities so that I can select one to donate to.
- As a guest, I want to fill out a donation form with my name, email, donation amount, and a personal message so that I can contribute a gift.
- As a guest, I want to review payment instructions and receive confirmation after submitting my donation so that I know my gift is acknowledged.
- As a couple, I want to register and log in with a single user account so that I can manage my profile easily.
- As a couple, I want to view my profile details (wedding date, bio, location, etc.) so that guests know more about us.
- As a couple, I want to edit my profile details and update my supported charities so that I can choose which charities are displayed on my profile.
- As a couple, I want to see a list of confirmed donations (filtered by the charities I support) so that I can track the contributions and share my gratitude.
- As an admin, I want to log in and view an admin dashboard so that I can manage all donations and user data.
- As an admin, I want to update the status of donations (mark them as confirmed or failed) so that the system reflects the correct payment status.
- As an admin, I want to view overall statistics and analytics (e.g., donation trends, percentages, reports) so that I can monitor platform performance.
- As an admin, I want to manage users and charities so that I can ensure data integrity and handle disputes if necessary.