Overview
Browser-based tool for transforming JSON and CSV data entirely client-side. Handles parsing, filtering, sorting, and format conversion with session sharing via short URLs.
Started as a simple JSON/CSV converter to practice Next.js 16's new App Router. Evolved into a full data playground when I realized I could add more features without much complexity.
Architecture
All data transformation happens in the browser. JavaScript parses JSON/CSV, applies filters, and converts formats. No data is sent to the server unless the user explicitly saves a session.
Next.js handles both frontend and backend. Client-side processing uses vanilla JavaScript for parsing and transformation. API routes handle session storage in PostgreSQL when users want to share data via short URLs.
Sessions expire after 7 days automatically. Data stored as JSONB in PostgreSQL for flexibility. Short URLs use nanoid for unique 8-character identifiers.
This keeps data private and fast. No network latency for transformations. Server only used for optional session sharing.
Tech Stack
Frontend
Backend
Database
Deployment
Technical Challenges
Next.js 15 to 16 Breaking Change
Problem
Upgraded from Next.js 15 to 16 mid-project. Route params became async, breaking all API routes. Dev mode didn't catch it. Only failed in production builds on Vercel.
Solution
Changed route params from synchronous to async. Added await when accessing params. Always run npm run build locally now before pushing to catch production-only errors.
Impact
Fixed all API routes. Learned to test production builds locally. Dev mode doesn't catch everything.
useSearchParams Needs Suspense
Problem
Vercel build failed with "missing suspense boundary" error. useSearchParams in a client component requires Suspense wrapper but dev mode didn't warn about this.
Solution
Created wrapper component with Suspense boundary around useSearchParams. Next.js has specific rules for dynamic functions that dev mode doesn't always catch.
Impact
Fixed deployment. Learned about Next.js dynamic rendering rules. Always test builds.
Smart JSON Parser
Problem
Users pasted JSON like {data: [...]} and got parsing errors. My format detector only accepted JSON arrays. Real-world APIs wrap data in objects.
Solution
Updated parser to accept any valid JSON. Added nested array extraction. Handles API responses with metadata wrappers. Single objects wrapped in array for consistent processing.
Impact
Parser now handles common API response formats. No more format errors.
Key Features
What I Learned
Next.js 16 App Router: Server components, dynamic params, and Suspense boundaries. Learned the hard way that dev mode doesn't catch everything. Always run builds locally.
Serverless PostgreSQL: Neon setup was straightforward. JSONB queries are flexible. Auto-expiration with PostgreSQL intervals works well.
Production Builds: Dev mode worked fine but production builds failed 4 times before success. ESLint conflicts, TypeScript errors, useSearchParams Suspense, and async params. Now I test builds before pushing.
Real-World Data is Messy: Test data was clean arrays. Real users paste API responses with nested objects and metadata. Had to handle edge cases.
What I'd Do Differently: Start with better testing. Unit tests for components, not just utilities. Plan type system upfront to avoid mismatches. Use Zustand from the start instead of useState everywhere. Add E2E tests with Playwright.