Skip to content

replit.md

Latest commit

 

History

History
94 lines (71 loc) · 3.91 KB

replit.md

File metadata and controls

94 lines (71 loc) · 3.91 KB
Raw

Modern Notepad Application

Overview

This is a modern, clean notepad application built with React and TypeScript. It provides a focused writing experience with rich text editing capabilities, organized note sections, and a clean minimalist design inspired by productivity tools like Notion and Linear. The application features a sidebar for note organization and a main editor area with formatting tools.

User Preferences

Preferred communication style: Simple, everyday language.

Recent Changes

Video Upload Feature (September 30, 2025)

  • Added video upload capability with support for MP4, WebM, OGG, and MOV formats (up to 50MB)
  • Implemented VideoInsertDialog component with dual upload methods:
    • URL paste for direct video links
    • File upload with drag-and-drop support
  • Videos are embedded with native playback controls
  • Enhanced ImageInsertDialog with drag-and-drop support for consistency
  • Both image and video dialogs now feature:
    • Visual drag-and-drop zones with hover states
    • File type and size validation
    • Preview before insertion
    • Consistent user experience and styling

System Architecture

Frontend Architecture

Framework: React 18 with TypeScript and Vite build system

  • Routing: Wouter for lightweight client-side routing
  • State Management: TanStack Query (React Query) for server state management
  • UI Components: Radix UI primitives with custom shadcn/ui component library
  • Styling: Tailwind CSS with custom design system and dark/light mode support

Component Structure:

  • Modular component architecture with separation of concerns
  • Custom rich text editor with toolbar for formatting
  • Media upload dialogs for images and videos with drag-and-drop support
  • Collapsible sidebar with note organization by sections
  • Responsive design with mobile-first approach

Backend Architecture

Runtime: Node.js with Express.js server

  • API Design: RESTful API endpoints for CRUD operations on notes
  • File Structure: Monolithic structure with shared types between client and server
  • Error Handling: Centralized error handling middleware with structured error responses
  • Development: Hot reloading with Vite integration for development workflow

Key Design Decisions:

  • Shared schema definitions between frontend and backend for type safety
  • Separation of storage logic through interface abstraction
  • Validation using Zod schemas for request/response data

Data Storage Solutions

Database: PostgreSQL with Drizzle ORM

  • Connection: Neon serverless PostgreSQL for cloud deployment
  • Schema Management: Drizzle Kit for migrations and schema management
  • Data Models: Notes table with sections for organization, users table for future authentication

Storage Interface: Abstract storage interface allows for easy database switching while maintaining consistent API contracts.

Authentication and Authorization

Current State: Basic structure in place but not implemented

  • User schema exists in database for future implementation
  • Storage methods prepared for user management
  • No current authentication middleware or session management

External Dependencies

Database Services:

  • Neon Database (PostgreSQL serverless)
  • Connection pooling with WebSocket support

UI and Styling:

  • Radix UI for accessible component primitives
  • Tailwind CSS for utility-first styling
  • Google Fonts (Inter, JetBrains Mono) for typography
  • Lucide React for consistent iconography

Development Tools:

  • Vite for fast development and building
  • Replit-specific plugins for development environment
  • TypeScript for type safety across the entire stack
  • ESBuild for production builds

Key Architectural Benefits:

  • Type safety from database to UI with shared schemas
  • Component reusability through Radix UI and custom component library
  • Scalable database architecture with ORM abstraction
  • Modern development experience with hot reloading and fast builds