My-Weekly-ToDo-List/Version 01/.planning/research/STACK.md
mARTin d92a8c7210 feat: add task actions (notes/delete) and refine animation logic
- Added 'onDelete' and 'onNotes' support to TaskItem.
- Implemented hover actions (Delete and Notes icons) for tasks.
- Added Notes Modal for editing task markdown content.
- Simplified navigation animation to remove blank flash (single-phase slide-in).
- Fixed syntax error in updateTask function.
- Updated styles for modal and task actions.
2026-02-01 12:25:53 +01:00

2.8 KiB

Technology Stack

Project: Weekly Scheduler with Calendar Integration Researched: Sat Jan 24 2026

Core Framework

Technology Version Purpose Why
React 18.3+ UI Library Component-based architecture with hooks and context API
Next.js 16+ Server-side rendering and routing Optimized for performance and SEO with modern features
TypeScript 5.4+ Type safety Prevents runtime errors and improves developer experience

Database

Technology Version Purpose Why
localStorage Native Client-side storage Fast, immediate access for local tasks
IndexedDB Native Alternative local storage Better for larger datasets or complex queries
PostgreSQL 15+ Server-side storage (optional) Robust relational database for user data

Infrastructure

Technology Version Purpose Why
Tailwind CSS 3.4+ Styling Utility-first CSS framework for rapid UI development
TanStack Query 5.0+ Data fetching Efficient server state management and caching
Jotai 2.0+ State management Fine-grained state management for React applications

Supporting Libraries

Library Version Purpose When to Use
date-fns 3.6+ Date manipulation For date formatting and calculations
React Hook Form 7.50+ Form handling For robust form validation and management
React DnD 16.0+ Drag and drop For intuitive task reordering
clsx 2.1+ Conditional class names For cleaner conditional styling
zod 3.22+ Schema validation For runtime validation of data structures

Alternatives Considered

Category Recommended Alternative Why Not
Frontend Framework React + Next.js Vue.js React ecosystem is more mature for this use case
State Management Jotai Redux Jotai offers better performance for simpler state needs
Database localStorage/IndexedDB Firebase More complexity for simple local-first approach
Styling Tailwind CSS Styled Components Tailwind offers faster prototyping and consistency

Installation

# Core
npm install react react-dom next typescript @types/react @types/node

# Styling
npm install tailwindcss postcss autoprefixer
npx tailwindcss init -p

# State Management
npm install jotai

# Data Handling
npm install date-fns react-hook-form tanstack-react-query

# Optional: For drag and drop
npm install @hello-pangea/dnd

# For validation
npm install zod

Sources

  • Modern React development patterns (2025)
  • Next.js 16+ best practices
  • Community adoption statistics for frontend tools