RouteSync
RouteSync is a Visual Studio Code extension designed for fullstack developers to visualize and navigate all frontend API calls and backend routes in a single, unified view. It helps you easily explore your project’s API surface, grouped by HTTP method and sorted alphabetically for clarity.
✨ Features
Automatic Scanning
Scans your frontend (React/JS/TS) and backend (Express/Node) codebases to extract API calls and route definitions automatically.
Grouping & Sorting
Organizes API endpoints by HTTP method (GET, POST, etc.) and sorts them alphabetically within each group.
Interactive Table UI
Browse all endpoints inside a collapsible, searchable table within VS Code.
Click-to-Navigate
Click any API call or route to jump directly to its source file and line number.
Instant Search
Filter the displayed endpoints dynamically via a search bar.
Refresh Button
Easily rescan your project after code changes with a single click.
Output Channel Logging
View a detailed summary of all API calls and routes in the VS Code Output panel.
Zero Configuration
Works out-of-the-box for common fullstack folder structures like client/server or frontend/backend.
🚀 Getting Started
1. Install RouteSync from the VS Code Marketplace
Search for RouteSync in the Extensions view and install it.
2. Open Your Fullstack Project in VS Code
Ensure your project has a clear frontend/backend folder structure (e.g., client and server).
3. Run RouteSync
- Open the Command Palette (
Ctrl+Shift+P or Cmd+Shift+P).
- Type and select:
RouteSync: Open Panel.
4. Explore Your API Map
- View API calls and backend routes grouped by HTTP method.
- Use the search bar to filter endpoints.
- Click entries to navigate directly to the source code.
- Click the refresh button to update the data after making changes.
🛠️ How It Works
Frontend Scanning:
Detects API calls made using fetch, axios, common custom wrappers, and RTK Query endpoints.
Backend Scanning:
Finds Express-style route handlers such as app.get, router.post, and others.
Grouping & Sorting:
Groups all endpoints by HTTP method and sorts them alphabetically for easy browsing.
🧩 Supported Patterns
Frontend Examples
fetch('/api/user/123')axios.post('/api/login', {...})api.get(\/api/item/${itemId}`)`- RTK Query endpoints
Backend Examples
app.get('/api/user/:id', handler)router.post('/api/login', handler)router.delete('/api/item/:itemId', handler)
📂 Expected Project Structure
RouteSync expects a common fullstack project layout like:
my-project/
├── client/ # or frontend/
└── server/ # or backend/
If these folders don’t exist, it will scan the root directory instead.
⚙️ Configuration
No configuration is needed for typical projects. For custom structures, you may need to tweak the extension or request support.
📝 Sample Output
FRONTEND: GET /api/user/123 (src/components/User.tsx:42)
BACKEND: GET /api/user/\:id (server/routes/user.js:10)
...
📄 License
MIT License
🌐 Connect
⭐ Why RouteSync?
RouteSync saves you time and headaches by providing a live, organized map of your fullstack API surface — making onboarding, debugging, and refactoring smoother and more efficient.
