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.
Read moreCreating 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:
Read moreFundraiser 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.