reddit-fundraisers

[Edit section]

[Copy link]

• • •

The reddit-fundraisers repository contains the core functionality of a Reddit-based fundraising application. This application allows Reddit moderators to create fundraisers for nonprofits through the Every.org platform and display them as interactive posts on their subreddit. Users can then donate to these fundraisers directly through the posts.

The most important parts of the repository are the src directory, which contains the application's core functionality, and the …/utils directory, which provides a robust set of utilities that handle various aspects of the application.

The …/main.tsx file contains the main business logic for the fundraiser creation process, including integrating with the Every.org API and managing the caching of fundraiser information in Redis, a key-value store. This allows the application to improve performance and scalability by caching frequently accessed data.

The …/components directory contains several reusable React components that provide the user interface for the application, such as the CircularLogo, FancyButton, FullScreenOverlay, FundraiserView, and Watermark components. These components leverage the Devvit library to create a consistent and visually appealing user experience.

The …/forms directory contains the implementation of various forms used in the Reddit fundraising application, such as forms for providing a description and creating a post from an existing fundraiser. These forms handle user input and interactions related to the fundraising process.

The …/utils directory provides a robust set of utilities that handle various aspects of the Reddit fundraising application, including:

• CachedForm class for managing and caching form data
• Redis integration functions for storing and retrieving cached data
• Utilities for date/time handling, image processing, and real-time updates

The application also integrates with the Every.org platform through the functionality in the …/sources directory, which includes functions for creating new fundraisers, fetching nonprofit information, and retrieving fundraiser details.

Overall, the reddit-fundraisers repository provides a comprehensive solution for integrating Reddit-based fundraising functionality with the Every.org platform, leveraging caching and reusable UI components to deliver a high-performance and visually appealing user experience.

Reddit Fundraising Application

[Edit section]

[Copy link]

References: src

• • •

The Reddit Fundraising Application is a platform that allows Reddit moderators to create fundraisers for nonprofits through the Every.org platform and display them as interactive posts on their subreddit. Users can then donate to these fundraisers directly through the posts.

Creating and Managing Fundraisers

[Edit section]

[Copy link]

References: src/main.tsx, src/sources

• • •

The core functionality of the Reddit Fundraising application is centered around creating and managing fundraisers. This is primarily handled in the …/main.tsx file, which integrates with the Every.org platform to create new fundraisers and manage the fundraising process.

Displaying Fundraisers on Reddit

[Edit section]

[Copy link]

References: src/components, src/utils

• • •

The …/Fundraiser.tsx file contains the core functionality for displaying fundraisers as interactive posts on Reddit. This includes:

Integrating with Every.org

[Edit section]

[Copy link]

References: src/sources

• • •

The …/Every.ts file contains the core functionality for integrating with the Every.org platform. This includes creating new fundraisers, fetching nonprofit information, and retrieving details about existing fundraisers.

Fundraiser View

[Edit section]

[Copy link]

References: src/components/Fundraiser.tsx

• • •

The FundraiserView function is the main component that renders the fundraiser details, including the cover image, nonprofit information, fundraiser title and description, progress bar, and donation button.

Fundraiser Status Management

[Edit section]

[Copy link]

References: src/types/index.ts, src/utils/formUtils.ts, src/utils/dateUtils.ts

• • •

The FundraiserStatus enum in …/index.ts defines the possible states of a fundraiser: Active, Completed, and Expired. This status is crucial for determining the behavior and display of fundraisers throughout the application.

Scheduler Jobs

[Edit section]

[Copy link]

References: src/main.tsx, src/utils/jobUtils.ts

• • •

The application implements several scheduler jobs to manage fundraiser status, update posts, and handle expired or completed fundraisers:

Fundraiser Overlay Management

[Edit section]

[Copy link]

References: src/components/Fundraiser.tsx

• • •

Within the …/Fundraiser.tsx file, overlay management is a critical feature that enhances user interaction with the fundraising component. The overlays provide additional information in a user-friendly manner. Key points of the overlay management functionality include:

Reusable Components

[Edit section]

[Copy link]

References: src/components

• • •

The …/components directory contains several reusable React components that are essential for the functionality of the Reddit Fundraising application. These components provide a consistent and visually appealing user interface, leveraging the Devvit library to handle the layout and styling.

Fundraiser Component Layout and Responsiveness

[Edit section]

[Copy link]

References: src/components/Fundraiser.tsx

• • •

The FundraiserView function within …/Fundraiser.tsx adapts to various screen sizes, presenting fundraiser information clearly across devices. The component manages lengthy fundraiser descriptions by rendering a "Read more" button when the description exceeds the allocated display area. This button expands the text box to reveal the full description, allowing users to read the complete narrative without overwhelming the initial view.

Fundraiser Overlay Functionality

[Edit section]

[Copy link]

References: src/components/Fundraiser.tsx

• • •

Within the FundraiserView function in …/Fundraiser.tsx, overlay functionality is a key feature that enhances user interaction by providing additional information in a layered view. The implementation of OverlayType.FundraisersApp is a specific overlay type designed to inform users about the Fundraisers App on Reddit. This overlay is part of a suite of overlays managed within the FundraiserView component, which serves as the primary interface for displaying fundraiser details.

Fundraiser Dynamic Updates

[Edit section]

[Copy link]

References: src/components/Fundraiser.tsx

• • •

Within the Fundraiser.tsx component, dynamic updates are a key feature that enhances the user experience by providing real-time feedback on the progress of fundraising campaigns. The component is designed to handle updates to critical fundraiser details, such as the amount raised, the goal, and the number of supporters. These updates are reflected in the user interface without the need for a page refresh, ensuring that users have access to the latest information.

Fundraiser Image Validation

[Edit section]

[Copy link]

References: src/components/Fundraiser.tsx

• • •

In the …/Fundraiser.tsx file, the FundraiserView function is tasked with rendering the visual elements of a fundraiser, including the cover image which is a significant part of the fundraiser's appeal. To ensure that only valid cover images are displayed to the users, the evaluateValidCoverImageOr404() function is employed. This function performs the following key actions:

Dynamic Sizing and Layout Calculations

[Edit section]

[Copy link]

References: src/components/Fundraiser.tsx, src/utils/constants.ts

• • •

Dynamic sizing and layout calculations in the Fundraiser component are handled primarily through the calculateLayout() function in …/constants.ts. This function takes height and width parameters and returns an object containing various layout-related values.

Form Management

[Edit section]

[Copy link]

References: src/forms

• • •

The …/forms directory contains the implementation of various forms used in the Reddit fundraising application. These forms are responsible for handling user input and interactions related to creating and managing fundraisers on the Reddit platform.

Utility Classes and Functions

[Edit section]

[Copy link]

References: src/utils, src/managers, src/types

• • •

The …/utils directory contains a collection of utility functions and classes that provide various functionalities to the Reddit fundraising application.

Configuration and Constants

[Edit section]

[Copy link]

References: src/utils/constants.ts

• • •

In the reddit-fundraisers repository, the file located at …/constants.ts plays a crucial role in defining the visual presentation of fundraisers across different device viewports. It establishes a set of configurations that dictate how elements are displayed, ensuring that the user interface adapts to various screen sizes, particularly mobile devices.

Utility Functions

[Edit section]

[Copy link]

References: src/utils

The …/utils directory provides support functionalities for the Reddit Fundraising application. It includes utilities for handling date and time operations, image processing, and dynamic layout calculations to adapt the application to different screen sizes and user interactions.

Job Management

[Edit section]

[Copy link]

References: src/utils/jobUtils.ts

• • •

The getFundraiserSummary function retrieves and formats fundraiser information:

Redis Integration

[Edit section]

[Copy link]

References: src/utils/Redis.ts

Redis integration is implemented through utility functions in …/Redis.ts. Key functionalities include:

Form Data Management

[Edit section]

[Copy link]

References: src/utils/CachedForm.ts

• • •

The CachedForm class manages and caches form data related to fundraisers. It uses a Map called aggregates to store PropertyManager instances for each type of form data defined in the TypeMapping interface. The class tracks the last updated timestamp and the current fundraiser status.

Types and Interfaces

[Edit section]

[Copy link]

References: src/types/index.ts

• • •

The …/index.ts file defines key types and interfaces used throughout the application:

Mock Data and Utilities

[Edit section]

[Copy link]

References: src/mocks

• • •

The …/mocks directory contains mock data and utility functions related to the fundraising features of the Every platform. These are used for testing and development purposes.

Every.org API Integration

[Edit section]

[Copy link]

References: src/sources

• • •

The …/Every.ts file contains the functionality for interacting with the Every.org API, which is a key component of the Reddit Fundraising application. This file exports several functions that handle the creation of new fundraisers, fetching of nonprofit information, and retrieval of fundraiser details.