mARTin
a5371e7476
Files: - STACK.md - FEATURES.md - ARCHITECTURE.md - PITFALLS.md - SUMMARY.md Key findings: - Stack: React 18.3+ with Next.js 16+ and Jotai for state management - Architecture: Component-based with clear data flow - Critical pitfall: Inconsistent date/time handling and calendar integration fragility
74 lines
2.8 KiB
Markdown
74 lines
2.8 KiB
Markdown
# Technology Stack
|
|
|
|
**Project:** Weekly Scheduler with Calendar Integration
|
|
**Researched:** Sat Jan 24 2026
|
|
|
|
## Recommended Stack
|
|
|
|
### 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
|
|
|
|
```bash
|
|
# 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 |