We will be undergoing planned maintenance on January 16th, 2026 at 1:00pm UTC. Please make sure to save your work.

Storm Notes

Your intelligent dashboard for time management, document workflows. Streamline your productivity with powerful tools.

Comment

Storm Notes - Project Report

TiDB Cloud account Email: petersonnsdev@gmail.com

Inspiration

Storm Notes was inspired by the need for an intelligent, all-in-one productivity platform that combines the power of AI with practical workflow management. The inspiration came from recognizing that modern professionals juggle multiple tools for content creation, time management, and communication - leading to fragmented workflows and reduced efficiency. We envisioned a unified platform powered by Google's Gemini AI that could seamlessly handle content generation, timezone management, email reminders, and document analysis in one cohesive experience.

What it does

Storm Notes is a comprehensive productivity suite that offers: Feature: The Multi-Step Agentic Workflow: This feature automates the process of analyzing a text document and emailing a summary of the findings to a designated contact. It acts as an "agent" that moves from user input through a series of steps to a final action, all in a single, automated sequence. Usage Flow: From User to Agent: A. Input (Upload & Select): The user goes to the "Workflow" tab. Here, they:

  • Upload a text file (.txt or .md). This could be anything from raw meeting notes to customer feedback.
  • Select a recipient from their list of contacts. B. Initiation (Start Workflow): The user clicks the "Start Workflow" button. The system now takes over completely. The Automated Process (Behind the Scenes): Once initiated, the agent performs the following steps without any further user interaction: Content Analysis (Gemini Call #1):
  • The application sends the full text content of the uploaded file to the Gemini model.
  • The prompt instructs Gemini to perform two key tasks: A. Summarize the document into a few key points. B. Extract the sentiment (e.g., "Positive," "Negative," "Neutral").
  • The model returns this analysis in a structured format.

Data Persistence (TiDB Storage):

  • The agent takes the original text, the AI-generated summary, and the sentiment analysis.
  • It saves this complete record into the application's backend service (apiService.ts). Storing the processed data in a structured database like TiDB for future retrieval, auditing, or further analysis.

Email Composition (Gemini Call #2):

  • The agent now makes a second, distinct call to the Gemini model.
  • It provides the summary and sentiment from the previous step.
  • The prompt instructs Gemini to act as a professional assistant and compose a well-formatted HTML email that clearly presents the analysis findings. Final Action (Invoke External Tools: Email Notification via External API Call to Resend):
  • The agent takes the AI-generated email subject and HTML body.
  • It uses the resendService.ts to make an API call to the Resend service, sending the email to the recipient the user selected at the beginning of the process.

Content Generation Module:

  • AI-powered content creation using Gemini integration
  • Text, image, and multimedia content generation
  • Creative writing and professional document assistance

Productivity Suite:

  • Intelligent timezone card management with real-time updates
  • Time conversion tools for global collaboration
  • Email reminder scheduling with timezone awareness
  • Contact management with AI-enhanced organization
  • Document analysis and workflow automation
  • Database Storage and Retrieval Using Search on TiDB Database

Authentication & User Management:

  • Secure authentication via Clerk integration
  • User profile management and session handling
  • Protected routes for sensitive features

Modern User Experience:

  • Responsive carousel-based homepage showcasing features
  • Interactive feature cards highlighting capabilities
  • Clean, modern UI with dark theme and gradient accents
  • Mobile-responsive design for cross-device usage

How we built it

Technology Stack:

  • Frontend: Next.js 15 with React 19, TypeScript for type safety
  • Styling: Tailwind CSS for responsive design and modern aesthetics
  • Authentication: Clerk for secure user management and session handling
  • AI Integration: Google Gemini API (@google/genai) for intelligent content generation
  • Email Services: Resend API for automated email notifications
  • Icons: Lucide React for consistent iconography
  • Development: Modern development practices with hot reloading and TypeScript

Architecture Decisions:

  • Next.js App Router for modern routing and server-side capabilities
  • Component-based architecture for maintainability and reusability
  • Service layer abstraction for API integrations (geminiService, resendService, apiService)
  • TypeScript interfaces for robust type checking and developer experience
  • Modular design allowing independent feature development

Key Implementation Features:

  • Real-time timezone management with live clock updates
  • AI-powered delay calculation for reminder scheduling
  • Carousel component with auto-play and manual navigation
  • Protected routes ensuring authenticated access to sensitive features
  • Error handling and user feedback through toast notifications

Challenges we ran into

Authentication Integration:

  • Initial challenges with Clerk provider placement causing runtime errors
  • Resolved by restructuring component hierarchy and proper hook placement
  • Ensuring consistent authentication state across all components

AI API Integration:

  • Managing API key validation and error handling for Gemini services
  • Implementing robust error handling for AI-generated content
  • Balancing API usage efficiency with feature functionality

Date/Time Validation:

  • Preventing users from setting reminders in the past
  • Implementing client-side and server-side validation
  • Handling timezone complexities in reminder scheduling

UI/UX Consistency:

  • Ensuring consistent behavior between different "Get Started" buttons
  • Managing authentication state across carousel and navigation components
  • Creating responsive design that works across different screen sizes

Build and Deployment:

  • Managing dependencies and resolving package conflicts
  • Ensuring proper environment variable handling
  • Coordinating multiple service integrations (Clerk, Gemini, Resend)

Accomplishments that we're proud of

Seamless AI Integration:

  • Successfully integrated Google Gemini for intelligent content generation and time calculations
  • Created a smooth user experience that leverages AI without overwhelming the interface

Modern Authentication Flow:

  • Implemented comprehensive authentication with automatic modal triggering post-login
  • Created protected routes that gracefully handle unauthenticated access

Intelligent Time Management:

  • Built sophisticated timezone handling with real-time updates
  • Implemented AI-powered reminder delay calculations
  • Created validation preventing past-date scheduling

User Experience Excellence:

  • Developed an engaging carousel-based homepage with auto-play functionality
  • Created intuitive feature cards that clearly communicate app capabilities
  • Implemented consistent design language throughout the application

Technical Architecture:

  • Built a scalable, maintainable codebase with TypeScript and modern React patterns
  • Created reusable components and service abstractions
  • Implemented comprehensive error handling and user feedback systems

What we learned

AI Integration Best Practices:

  • The importance of robust error handling when working with AI APIs
  • How to structure prompts for consistent and reliable AI responses
  • Balancing AI capabilities with user control and validation

Modern React Development:

  • Advanced patterns with Next.js 15 and React 19
  • Effective use of hooks for state management and side effects
  • Component composition and reusability principles

Authentication Architecture:

  • Proper implementation of authentication providers in React applications
  • Managing authentication state across complex component hierarchies
  • Creating seamless user experiences with protected routes

User Experience Design:

  • The importance of consistent interaction patterns across similar UI elements
  • How small details like date validation significantly improve user experience
  • Balancing feature richness with interface simplicity

Project Management:

  • The value of incremental development and continuous testing
  • Importance of comprehensive error handling from the beginning
  • How proper planning and task breakdown accelerates development

What's next for Storm Notes

Enhanced AI Capabilities:

  • Integration with additional AI models for specialized tasks
  • Advanced content generation with custom templates and styles
  • AI-powered workflow suggestions and automation
  • Implement Paid and Free User Tiers

Expanded Productivity Features:

  • Calendar integration for comprehensive time management
  • Advanced contact relationship mapping and networking insights
  • Document collaboration and real-time editing capabilities

Mobile Application:

  • Native mobile apps for iOS and Android
  • Offline functionality for core features
  • Push notifications for reminders and updates

Enterprise Features:

  • Team collaboration tools and shared workspaces
  • Advanced analytics and productivity insights
  • Custom integrations with enterprise software

Platform Integrations:

  • Integration with popular productivity tools (Slack, Trello, Notion)
  • API development for third-party integrations
  • Webhook support for automated workflows

Advanced Personalization:

  • Machine learning-based user preference learning
  • Customizable dashboards and interface layouts
  • Smart suggestions based on usage patterns

Security and Compliance:

  • Enhanced security features for enterprise users
  • GDPR and privacy compliance improvements
  • Advanced encryption for sensitive data

Storm Notes represents a significant step toward the future of AI-powered productivity tools, combining intelligent automation with intuitive user experience to create a platform that truly enhances how people work and create.

Built With

Share this project:

Updates