# Projects by Akash Kumar Pathak Source index: https://pathak.fyi/projects ## Akkivo Case study: https://pathak.fyi/projects/akkivo Akkivo is a local-first PDF editor for the small changes that make a document yours. I redesigned the workspace around a searchable sidebar, warm paper tones, and clear editing tools, with PDF processing and saved sessions kept in the browser. - [Live site](https://akkivo.app/) - [Source on GitHub](https://github.com/akkikumar72/Akki-Pdf-editor) ### The idea PDF work is often a handful of small tasks: correct a line, leave a note, fill a field, or add a signature. I brought those tasks into one document desk, with recent sessions saved locally so it is easy to pick up where you left off. Salmon paper, burgundy accents, and editorial typography give the interface its own character while keeping the document in focus. ### The workspace The sidebar brings together 34 editing tools, page organization, history, and export. Search finds the right tool; dedicated panels keep annotations, nine kinds of form field, and signatures close at hand. Edits remain adjustable overlays while you work, with undo, redo, and history checkpoints. Export creates a new PDF, or extracts selectable text and table data into TXT, CSV, and XLSX files. ### How it’s built React, Vite, and TypeScript power the client-side workspace. PDF.js renders the document, pdf-lib writes the edited PDF, and IndexedDB stores local sessions. Spreadsheet exports use a small OOXML writer built on fflate. On narrow screens, the sidebar opens as a drawer alongside a scaled document view. Vitest and Playwright cover the editor state, PDF operations, and browser workflows. ## Walkthrough Studio Case study: https://pathak.fyi/projects/walkthrough-studio My Stockholm apartment search turned into a side project. I built Walkthrough Studio with Codex to turn listing photos and floor plans into an editable 3D draft, helping me understand how rooms connect before a viewing. The project pairs a keyboard-controlled browser tour with a workflow for refining scenes in Unreal Engine. - [Source on GitHub](https://github.com/akkikumar72/hemnet-walkthrough-studio) ### The idea Browsing Hemnet, I kept jumping between photographs and floor plans to work out which room came next. I wanted to explore that connection before booking a viewing. I used Noaks väg 3B as a reconstruction study, then built a reusable workbench around the process: bring a listing link or photos, review the evidence, and refine the layout into a connected tour. ### The experience The Noaks example connects three floors through rooms, hallways and stairs. You can follow the camera route, choose a room, or take over with the keyboard. Matching source photographs make the reconstruction easier to assess. The landing page brings the film and interactive tour together, with a Hemnet-link entry point for another home. This example was refined iteratively; a new listing starts with a draft that needs review. ### How it’s built Next.js and TypeScript power the landing page, while Three.js renders the browser scene. A shared scene format supports editing, glTF export and an Unreal project with camera sequences. The local Codex skill offers another route through reconstruction; the app can also use an OpenAI API key with explicit photo-upload consent. Projects stay on disk. Photos cannot establish every dimension or hidden detail, so the model remains an approximation. The workspace shown below uses the fictional Courtyard House demo. ## Form Case study: https://pathak.fyi/projects/form Form is a room studio for trying furniture ideas in the space you already have. I designed and built a photo-based workspace around a simple flow: upload, furnish, render. Furniture stays editable over the original photograph, while an on-demand AI render turns the arrangement into a finished image. ### The idea It is hard to picture a new room from separate product photos. Form brings those ideas into a photograph of your own space. Early iterations used a separate 3D room and a detailed setup panel. I simplified the experience so people can start placing pieces straight away, with measurements and perspective adjustments available when needed. The original photo stays close at hand, making it easy to compare the room you have with the room you are imagining. ### The workspace A furniture library sits beside the photo, with seating, tables, rugs, lighting, art and curtains. Each piece can be moved, rotated, resized, recoloured, duplicated or removed, with undo and redo for revisions. Focus mode gives the room more space and keeps the controls close. Design, Rendered and Original separate the editable layout from the finished image. When the arrangement feels right, Render creates a new still; JPEG, PNG, WebP and PDF exports make it easy to keep or share. ### How it’s built Next.js, React and TypeScript power the workspace. Three.js, React Three Fiber and Drei keep furniture in perspective over the photograph. OpenAI handles photo analysis and on-demand image generation; IndexedDB saves the active draft, original photo and latest render in the browser. Product imports label generic substitutes when an exact model is unavailable. Export runs locally, with pdf-lib for PDF output. Regression tests cover placement, history, persistence and export. This is a working prototype; cloud projects and purchasing are future work. ## Kive Case study: https://pathak.fyi/projects/kive Kive is a creative reference library for collecting images, videos, and links. I rebuilt an existing coding challenge into a complete workspace, with searchable references, curated collections, and a calmer interface that keeps the visuals in focus. ### The idea Saving inspiration is easy; finding it again is the harder part. The original challenge centered on Posts and Reels. I reworked it around a visual library, with collections for different ideas and one sidebar for recent additions, favorites, and everything in between. Cosmos and Eagle informed the image-led layout and organization patterns. ### The workspace Images, videos, and source bookmarks live together in masonry or grid views. Search looks through titles, tags, notes, and sources, while filters narrow the library by media type or tag. Each reference opens into an inspector for editing its details and collection membership. Bulk actions, favorites, and recoverable trash make the library practical beyond the first few saves. ### How it’s built Next.js, React, and TypeScript, with Radix dialogs and local Phosphor icons. IndexedDB stores the demo workspace and uploaded files in the browser, and a JSON export keeps a portable copy. The interface adapts to mobile, supports keyboard search, and respects reduced motion. The current demo uses sample photography and local storage, with model tests and browser checks covering the core workflows. ## Folio Case study: https://pathak.fyi/projects/folio Folio brings a growing collection of Framer-to-Next.js rebuilds into one workspace. I built the library around real previews, searchable pages, and a consistent sidebar, so exploring a complete website feels as straightforward as finding its homepage. - [Source on GitHub](https://github.com/akkikumar72/framer-slate-nextjs) ### The idea As the collection grew, separate previews and long route lists became harder to explore. Folio gives 19 independent Next.js rebuilds and their 284 content pages a shared front door. The original Framer designs are the visual starting point; my focus was rebuilding the websites in Next.js and making the whole collection easy to navigate, including the pages beyond each homepage. ### The experience Search by name, browse five categories, or narrow the library by style and appearance. Grid and list views support different ways of browsing, while saved templates stay in the current browser. Each template opens into a complete page directory with preview and source links. The sidebar becomes a drawer on mobile, and search, filters, and navigation state are reflected in the URL. ### How it’s built Next.js, React, and TypeScript in an npm-workspaces Turborepo. Each template owns its routes, local assets, metadata, and deployment boundary. The library derives page links and counts from those route manifests, with shared asset and route checks plus browser tests. An original WebGL shader adds slow copper ribbons to the landing page, with pause controls, reduced-motion support, and a static fallback. The result is a showcase for completed rebuilds, not an automated conversion service. ## Shotla Case study: https://pathak.fyi/projects/shotla Shotla turns everyday screenshots into polished visuals. I redesigned and rebuilt the editor around a live canvas, with presets, framing, cropping, annotations and export in one workspace. The everyday editing flow runs locally in the browser, with no account required. - [Source on GitHub](https://github.com/akkikumar72/shotla) ### The idea A screenshot often needs a few small adjustments before it tells a clear story: better spacing, a quieter background or a closer look at one detail. I wanted those edits to feel like one workflow. Shotla starts with a coordinated preset, keeps the preview in view and lets you refine the result without moving between separate tools. ### The editor The sidebar brings together six presets, backgrounds, canvas sizes, window frames, cropping and annotations. Captions explain the image; magnifiers show an actual enlarged detail. Each image keeps its own undo history, and named styles can be reused later. Export produces PNG, JPEG or WebP at up to 3× resolution, with a rendered preview to check the result before sharing. ### How it’s built Next.js, React and TypeScript, with react-image-crop for cropping and html-to-image for export. Canvas dimensions come from image pixels, so the output stays independent of preview zoom. Regression tests cover geometry, crop recovery, history and background rendering, with browser checks for the editing and export workflows. Named styles persist locally; images stay in the current tab and need exporting before it closes. ## Nordic Case study: https://pathak.fyi/projects/nordic Nordic is a weather workspace for making sense of the day. Current conditions, hourly and 10-day forecasts, interactive maps, and air quality sit together in a quiet interface that works across desktop and mobile. - [Source on GitHub](https://github.com/akkikumar72/EY-web) ### The idea A temperature alone does not tell you whether to take a jacket, leave a little later, or plan for rain. Nordic puts current conditions beside an hourly trend, a daily outlook, and a short summary of the day. The redesign gives each weather tool a clear place in the sidebar, with warm neutral surfaces, forest green accents, and room for the numbers to breathe. ### The experience Search for a city, compare temperature, rain, and wind by hour, or open a day for more detail. Six map layers show the wider picture, while air quality has its own view with pollutant readings and source context. Saved places, temperature units, and appearance stay in the browser. On smaller screens, the sidebar becomes a keyboard-accessible drawer, with the same destinations and a layout built for touch. ### How it’s built Next.js, React, and TypeScript, with Tailwind CSS and Radix UI. Open-Meteo supplies forecasts, location search, and modelled air-quality data through server routes; Windy supplies the interactive forecast map. The selected location lives in the URL, so it follows you between views and can be shared. Playwright covers navigation, preferences, search, forecast controls, and failure states on desktop and mobile. ## Trace Case study: https://pathak.fyi/projects/trace Trace is a website interaction inspector. I rebuilt a single-page analyzer into a focused workspace for exploring controls, comparing before-and-after captures, and keeping the evidence in a report you can return to. - [Source on GitHub](https://github.com/akkikumar72/web-page-analyzer) ### The idea A screenshot shows what an interface looks like, but not what happens when you use it. The original analyzer could explore a page, but its long list of small captures made those changes hard to review. I brought the page, the interaction, and the resulting evidence into one workspace, with a quieter visual system and a clear place for every tool. ### The workspace Each run opens into a searchable interaction list and a detailed inspector. Before-and-after captures can be compared, enlarged, and read alongside the observed state changes and element selector. Run history, saved reports, preferences, and documentation live in the sidebar. Reports stay in the browser, can be exported as JSON, and remain easy to find on desktop or mobile. ### How it’s built Next.js, React, and TypeScript provide the workspace; Playwright opens an isolated browser context and captures the interactions. Evidence mode compares accessible page states without an API key, with optional OpenAI summaries layered over the observations. IndexedDB stores reports and screenshots locally. Automated checks exercise URL validation and real desktop and mobile captures, while browser checks cover navigation, comparison, preferences, and report management. ## Deepwaters Case study: https://pathak.fyi/projects/deepwaters I was frontend lead at Deepwaters and built the exchange application from scratch. The public site promised trading without trade-offs, and the app behind it handled markets, wallets, deposits, and fees. - [Archived site](https://web.archive.org/web/20240525063801/https://deepwaters.xyz/) ### The site The marketing site opened on one line: Trading Without Trade-Offs. Zero front-running, zero gas trades, zero slippage, and no payment for order flow. Trade Now sent people into the exchange. ### The system The diagram is the exchange: a vault and an exchange on top, trading logic and arbitrage beside them, then a guardian layer, cross-chain exposure, underwriter liquidity, and governance. ### Fees and rebates I also shipped the fee and rebate screens. Traders could pay fees in USDC or WTR, and maker rebates lived in the same view.