renewalert

byshailesh Sharma

Build a simple multi-tenant SaaS web app called RenewAlert. Purpose: RenewAlert helps small businesses track expiry dates, renewal dates, and important deadlines. Users should enter only reminder information. Do not allow or implement document uploads, file storage, OCR, or document scanning. Target users: Indian small businesses such as clinics, schools, factories, transport companies, contractors, shops, and offices. Core concept: Each business has a separate workspace. A workspace can have multiple users. Every reminder must belong to exactly one workspace. Users from one workspace must never see or edit data from another workspace. Use this technology: - React or Next.js - Tailwind CSS - Firebase Authentication - Cloud Firestore - Firebase Cloud Functions for scheduled reminders - Firebase Hosting or Vercel - Email notification provider such as Resend, SendGrid, or Brevo - Keep the code clean and easy to understand Authentication: - Email and password signup - Login and logout - Forgot password - Create a workspace during onboarding - Invite team members by email - Workspace roles: - Owner: full access - Admin: manage reminders and members - Viewer: view reminders only Important security requirement: Implement proper multi-tenant data isolation using Firestore Security Rules. Every workspace member can access only data belonging to their workspace. Never use open rules that allow all authenticated users to read or write all data. Firestore structure: users/{userId} workspaces/{workspaceId} workspaces/{workspaceId}/members/{userId} workspaces/{workspaceId}/reminders/{reminderId} workspaces/{workspaceId}/activity/{activityId} Workspace fields: - name - ownerId - createdAt - plan - status Member fields: - userId - email - displayName - role - joinedAt Reminder fields: - title - category - relatedTo - relatedName - expiryDate - responsibleUserId - reminderDays - renewalLink - notes - status - createdBy - createdAt - updatedAt - lastReminderSentAt Reminder categories: - Certificate - License - Insurance - Contract - Subscription - Vehicle - Employee - Equipment - Domain - Rent - Maintenance - Other Main screens: 1. Landing page - Product name: RenewAlert - Headline: “Never miss an important renewal.” - Subtitle: “Track licenses, insurance, certificates, contracts, and deadlines in one simple dashboard.” - Explain that no document upload is required - Buttons: Start free and Login - Pricing preview 2. Signup and login - Email and password authentication - Clear validation messages - Friendly empty and error states 3. Onboarding - Ask for business name - Create the first workspace - Show a short explanation: “Add an expiry date, choose when to be reminded, and assign a responsible person.” 4. Dashboard Show summary cards: - Total active reminders - Overdue - Due within 7 days - Due within 30 days Show reminder sections: - Overdue - Due within 7 days - Due within 30 days - Later Each reminder row should show: - Title - Category - Related person, vehicle, or asset - Expiry date - Days remaining - Responsible person - Status - Actions Add: - Search - Category filter - Status filter - Date sorting - Add reminder button 5. Add reminder form Fields: - What needs attention? Required text field - Category Required dropdown - Related person, vehicle, or asset Optional text field - Expiry or renewal date Required date field - Responsible person Required dropdown - Remind before Required multi-select with: - 90 days - 60 days - 30 days - 14 days - 7 days - 1 day - Renewal link Optional URL field - Notes Optional textarea Do not include a file upload field. 6. Reminder details - Display all reminder information - Show status - Show days remaining - Show reminder schedule - Show activity history - Buttons: - Edit - Mark as renewed - Mark as completed - Archive - Delete 7. Mark as renewed When the user clicks “Mark as renewed”: - Ask for the new expiry date - Update the reminder with the new date - Reset the reminder status to active - Save the previous date in activity history - Show a success message 8. Team members - List workspace members - Show name, email, and role - Owner and Admin can invite members - Owner can change roles - Owner can remove members - Viewer cannot edit reminders 9. Settings - Workspace name - User profile - Email notification preferences - Default reminder schedule - Subscription plan - Logout Reminder statuses: - Active - Due soon - Overdue - Completed - Archived Status logic: - Overdue if expiryDate is before today - Due soon if expiryDate is within the configured reminder period - Active if it is later - Never calculate status only in the frontend; use consistent date logic in backend and frontend - Handle dates using one consistent timezone, preferably Asia/Kolkata for the initial India-first version Email reminder system: Create a scheduled Firebase Cloud Function that runs once every day. The function should: - Find active reminders with upcoming expiry dates - Check each reminder’s reminderDays array - Send an email on the correct reminder date - Send the email to the responsible user - Send a copy to the workspace owner - Avoid duplicate emails - Record the last reminder sent - Log failures - Never send reminders for archived or completed items Email format: Subject: “Reminder: [title] expires in [number] days” Body: - Reminder title - Category - Related person, vehicle, or asset - Expiry date - Days remaining - Responsible person - Renewal link, if available - Notes - Link to open RenewAlert Create a clear notification log so administrators can see whether a reminder email was sent or failed. Free plan: - 10 active reminders - 1 workspace owner - Email reminders - Basic dashboard Starter plan: - 100 active reminders - 5 team members - Email reminders - Activity history Business plan: - 500 active reminders - 15 team members - Email reminders - Advanced filtering For now, create the billing screen and plan limits, but keep payment integration modular. Add Razorpay Subscriptions later. UI design: - Clean, modern, simple business dashboard - Responsive design for desktop and mobile - Use a white background with blue and indigo accents - Use red for overdue, orange for due soon, and green for active - Use cards, tables, badges, and clear buttons - Make the dashboard easy for non-technical business owners - Include loading states, empty states, confirmation dialogs, and error messages - Make it installable as a Progressive Web App if practical Important scope restrictions: - No document uploads - No file storage - No OCR - No AI document scanning - No WhatsApp - No SMS - No complex compliance rules - No automatic government data - No native mobile app - No public API - No unnecessary enterprise features Demo data: Create sample data for a demo workspace called “ABC Electricals”: 1. Vehicle Insurance - KA01AB1234 2. Fire Safety Certificate 3. Employee Training Certificate 4. Domain Renewal 5. Equipment Maintenance Developer requirements: - Use reusable components - Use form validation - Use proper TypeScript types if TypeScript is used - Separate UI, database, authentication, email, and billing logic - Add comments only where useful - Provide Firestore indexes if required - Provide secure Firestore Security Rules - Provide Firebase Cloud Function code for scheduled reminders - Add a README with setup instructions - Include environment variable examples - Make the app functional, not just a visual mockup

Landing page
Landing page

Comments (0)

No comments yet. Be the first!

System Requirements

System Requirement Document
Page 1 of 7

System Requirements Document for RenewAlert

1. Introduction

RenewAlert is a simple multi-tenant SaaS web application designed to help Indian small businesses, such as clinics, schools, factories, transport companies, contractors, shops, and offices, track expiry dates, renewal dates, and important deadlines. The application focuses on reminder information without allowing document uploads, file storage, OCR, or document scanning.

2. System Overview

RenewAlert provides a separate workspace for each business, allowing multiple users per workspace while ensuring data isolation. Users can manage reminders for various categories, receive email notifications, and access a clean, responsive dashboard. The application uses React or Next.js, Tailwind CSS, Firebase Authentication, Cloud Firestore, Firebase Cloud Functions, and an email notification provider.

2a. Product Interpretation and Delivery Boundary

RenewAlert is delivered as a web application with a focus on simplicity and usability for small business owners. It ensures strict data isolation between workspaces using Firestore Security Rules. The application supports email/password authentication and role-based access within workspaces. Future enhancements may include payment integration with Razorpay Subscriptions.

2b. Source Content Inventory

Not applicable as no content source directive was provided.

Page 2 of 7

2c. Page Content and Component Coverage

Landing page

  • Information/State: Product name, headline, subtitle, no-upload explanation, pricing preview.
  • Primary Actions: Start free, Login.
  • Components: Hero section with oversized headline, pricing preview section.

Signup and login

  • Information/State: Email/password fields, validation messages, error states.
  • Primary Actions: Signup, Login, Forgot password.
  • Components: Form fields, validation messages, error states.

Onboarding

  • Information/State: Business name input, workspace creation.
  • Primary Actions: Create workspace.
  • Components: Input fields, explanation text.

Dashboard

  • Information/State: Summary cards, reminder sections, search/filter/sort options.
  • Primary Actions: Add reminder, view/edit reminders.
  • Components: Summary cards, reminder list, search/filter/sort controls.

Add reminder form

  • Information/State: Reminder fields (title, category, etc.).
  • Primary Actions: Save reminder.
  • Components: Form fields, validation.
Page 3 of 7

Reminder details

  • Information/State: Reminder information, status, schedule, activity history.
  • Primary Actions: Edit, Mark as renewed, Mark as completed, Archive, Delete.
  • Components: Detail view, action buttons.

Team members

  • Information/State: Member list, roles.
  • Primary Actions: Invite members, change roles, remove members.
  • Components: Member list, role management controls.

Settings

  • Information/State: Workspace settings, user profile, notification preferences.
  • Primary Actions: Update settings, Logout.
  • Components: Settings forms, logout button.

Billing screen

  • Information/State: Plan details, limits.
  • Primary Actions: View plans.
  • Components: Plan details, modular billing state.
Page 4 of 7

3. Functional Requirements

  • As a Workspace Owner, I should be able to create and manage my workspace, including inviting team members and assigning roles. (explicit)
  • As a Workspace Admin, I should be able to manage reminders and team members within my workspace. (explicit)
  • As a Workspace Viewer, I should be able to view reminders but not edit them. (explicit)
  • As a user, I should be able to sign up, log in, and reset my password using email and password authentication. (explicit)
  • As a user, I should be able to create reminders with specified fields and no file-upload option. (explicit)
  • As a user, I should receive email notifications for reminders based on configured schedules. (explicit)
  • As a user, I should be able to view and manage reminders on a dashboard with search, filter, and sort capabilities. (explicit)
  • As a user, I should be able to mark reminders as renewed, completed, archived, or deleted. (explicit)
  • As a Workspace Owner, I should be able to view billing information and plan limits. (explicit)
  • As a system, I should ensure data isolation between workspaces using Firestore Security Rules. (explicit)

4. User Personas

  • Workspace Owner: Creates and owns a workspace, manages members and roles, and has full access to reminders and settings.
  • Workspace Admin: Manages reminders and team members within the workspace.
  • Workspace Viewer: Views reminders but cannot edit them.

5. Core User Flows

Workspace Owner Flow

  1. Signup/Login: Access the application via the Signup and login page.
  2. Onboarding: Enter business name and create the first workspace.
  3. Dashboard: View reminders, add new reminders, and manage existing ones.
  4. Team Management: Invite members, assign roles, and manage team settings.
  5. Billing: View plan details and limits on the Billing screen.
Page 5 of 7

Workspace Admin Flow

  1. Login: Access the application via the Signup and login page.
  2. Dashboard: Manage reminders, including adding, editing, and deleting.
  3. Team Management: Invite members and manage roles within the workspace.

Workspace Viewer Flow

  1. Login: Access the application via the Signup and login page.
  2. Dashboard: View reminders without editing capabilities.

6. Visuals Colors and Theme

  • Muse: Tobias van Schneider
  • Palette:
    • Background: #FFFFFF
    • Surface: #F7F7F7
    • Text: #000000
    • Primary: #E63946
    • Accent: #1D3557
    • Muted: #A8DADC
  • Typography:
    • Headings: Playfair Display, Bold, all caps
    • Body: Source Sans Pro
    • Scale: 64/48/32/24/18
  • Shape Language: Sharp corners, full-bleed imagery
  • Layout: Asymmetric editorial grids
  • Motion: Slow crossfades, type reveals
  • Motion Tempo: Restrained
  • Hero Dimensionality: Flat
Page 6 of 7

7. Signature Design Concept

The landing page features a full-bleed hero with an oversized headline in Playfair Display over a bold red block. Action buttons are integrated into the color block, creating immediate impact and guiding users to key actions.

8. Interaction Model & Motion Direction

  • Interaction Model: Static
  • Motion Tempo: Restrained
  • Hero Dimensionality: Flat
  • Landing Hero Motion Brief: The hero section features a bold red block with an oversized headline in Playfair Display. The static design ensures clarity and focus, with subtle hover interactions for engagement.

9. Non-Functional Requirements

  • Security: Implement Firestore Security Rules for data isolation.
  • Performance: Ensure responsive design for desktop and mobile.
  • Usability: Provide clear validation messages and error states.
  • Scalability: Support multiple workspaces and users with efficient data handling.

10. Tech Stack

  • Frontend: React or Next.js, Tailwind CSS
  • Backend: Firebase Authentication, Cloud Firestore, Firebase Cloud Functions
  • Hosting: Firebase Hosting or Vercel
  • Email Provider: Resend, SendGrid, or Brevo
Page 7 of 7

11. Assumptions and Constraints

  • Assumptions:
    • Users are familiar with basic web applications.
    • Email notifications are sufficient for reminder alerts.
  • Constraints:
    • No document uploads, file storage, OCR, or scanning features.
    • Strict data isolation between workspaces.

12. Glossary

  • Workspace: A separate environment for each business within RenewAlert.
  • Reminder: An alert for an expiry or renewal date.
  • Firestore Security Rules: Rules to enforce data access and isolation in Cloud Firestore.
Landing page design preview
Landing page: View landing page
Signup and login: Log in
Dashboard: 1. View reminders
Add reminder form: 2. Save reminder
Reminder details: Edit reminder
Reminder details: Delete reminder
Team members: Invite members
Team members: Change roles
Settings: Update settings
Settings: Logout
Landing page design preview
Landing page: View landing page
Signup and login: Log in
Dashboard: 1. View reminders
Add reminder form: 2. Save reminder
Reminder details: Edit reminder
Reminder details: Delete reminder
Team members: Invite members
Team members: Change roles
Settings: Update settings
Settings: Logout