Project Atlas – Visual SEO Planning Tool

‍

Type: Side Project

‍Stack: React, TypeScript, Vite, React Flow, Tailwind CSS

‍

Overview:
Project Atlas is a visual content strategy tool built for SEO professionals and content teams. It allows users to create interactive topic clusters, assign article ideas, and map internal linking strategies — all within a drag-and-drop canvas interface.

‍

My Role:
Solo product designer and engineer. I approached this as a full product lifecycle project — from UX concept and user flows to component architecture, state management, and performance optimization.

‍

Key Features:

• Drag-and-Drop Node Editor: Built using React Flow to allow users to map topic relationships visually.
• Topical Clustering: Create and manage parent-child topic relationships and assign content ideas contextually.
• Interlinking Strategy Builder: Connect nodes to plan internal SEO links and boost page authority.
• Auto-Saving with Local State: Changes persist automatically using localStorage, simulating an offline-first experience.
• Node Metadata Sidebar: Edit topic details, notes, and links without losing visual context.

‍

Tech Highlights:

• Developed with React + TypeScript, leveraging React Flow for complex node-based UI.
• Powered by Vite for rapid dev cycle and performance tuning.
• Custom logic for node creation, edge rendering, interactivity, and persistent state hydration.

‍

Outcome:
Project Atlas demonstrates my ability to deliver a focused product experience from scratch — including UI/UX design, custom component logic, and usability within a real-world use case. It reflects both frontend mastery and product-minded thinking, tailored to niche workflows like SEO strategy.

‍

Live Demo:
🚀 project-atlas-weld.vercel.app

‍

The UI is based off of this free Figma design template:

‍