Handling Random and Prescribed Carousel Tiles in UI

TL;DR

• Implemented random carousel tiles alongside prescribed content.
• Added optional type fields and endpoint for uploading random tiles.
• Created logic to handle content fetching based on cohort settings.
• Developed method to ensure consistent pagination and order in MongoDB.

I’m working on a feature to implement random carousel tiles in our UI app. Initially, tiles were displayed based on prescribed content using a CSV upload, which dictates when they should appear. We fetch this data via a backend endpoint. To integrate random tiles, I expanded the current design:

1. New Endpoint and Types: Created a new backend endpoint for random tiles. Modified types, allowing cohort IDs and date fields to be optional.

2. Testing and Validation: Verified that adding optional types didn’t break the existing functionality by running tests and a type checker.

3. Weekly Content Logic: Reworked the logic for fetching weekly content. Added a new flag to the cohort schema to determine if random tiles should be prefetched. This ensures two generic tiles appear first in the carousel for flagged cohorts.

4. Empty Prescribed Content: Updated the script to insert generic content if no prescribed content exists or if the cohort is complete.

5. Pagination and Order: Used MongoDB pagination to maintain consistent sorting, ensuring we didn’t exceed the number of documents but also wrapped around when days exceeded the document size. Applied sorting strategies for consistent order irrespective of document creation times.

6. Continuing Development: Further considerations involve enhancing the logic for fetching specific tile types and refining the pagination approach as the cohort progresses in days.

Creating a seamless experience with dynamic and consistent tile fetching required careful backend modifications and UI adaptations.