Skip to content

ajstudd/The_Vision_Project_OG

BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

2 Commits
Backend
Backend
 
 
Extension
Extension
 
 
Frontend
Frontend
 
 
README.md
README.md
 
 

Repository files navigation

Project Synapse

Your AI-Powered Second Brain

Capture anything from the web, automatically organize it with AI, and chat with your knowledge base using natural language. Project Synapse is a complete ecosystem that transforms how you collect, store, and interact with information.

TypeScript React Next.js Node.js MongoDB

What is Project Synapse?

Project Synapse is a second brain application that helps you capture, organize, and interact with information from across the web. Click anything—text, images, articles, products—and save it instantly. Our AI processes everything, creates semantic embeddings, and lets you search and chat with your knowledge base naturally.

The Complete Workflow

┌─────────────────┐         ┌──────────────────┐         ┌─────────────────┐
│  Extension      │────────▶│  Backend API     │────────▶│  Frontend       │
│  Chrome Plugin  │         │  AI Processing   │         │  Dashboard      │
└─────────────────┘         └──────────────────┘         └─────────────────┘
      │                              │                            │
      │ 1. Click & Capture          │ 2. Process & Store         │ 3. View & Chat
      │    - Text highlights         │    - Vector embeddings     │    - Visual cards
      │    - Full pages              │    - Auto-categorize       │    - Semantic search
      │    - Images (OCR)            │    - Extract metadata      │    - AI chat (RAG)
      │    - Products                │    - Store in MongoDB      │    - Related items
      │    - Videos                  │    - Background jobs       │    - Statistics

Key Features

Smart Capture (Chrome Extension)

  • One-Click Saving: Highlight text and click the floating button
  • Keyboard Shortcuts: Quick capture with Alt+S
  • Context Menu: Right-click anywhere to save
  • Multi-Format Support: Text, links, images, articles, products
  • Offline Queue: Captures saved locally when backend is unavailable
  • Automatic Context: Captures page title, URL, favicon, and metadata

AI Processing (Backend)

  • Vector Embeddings: Google Gemini generates 768-dimensional embeddings
  • Semantic Search: MongoDB Vector Search for intelligent retrieval
  • Auto-Categorization: AI classifies content into 6 types automatically
    • Notes
    • Articles
    • Products
    • Videos
    • Images
    • Todos
  • OCR Vision: Extract text from images using Gemini Vision
  • Metadata Extraction: Automatic title, description, author, price extraction
  • Background Jobs: Periodic summarization and optimization
  • RAG (Retrieval-Augmented Generation): Chat with your knowledge base

Beautiful Dashboard (Frontend)

  • Type-Specific Cards: Unique beautiful designs for each content type
  • Infinite Scroll: Smooth auto-loading grid
  • Semantic Search: Natural language queries with relevance scores
  • AI Chat Interface: ChatGPT-style conversations with source citations
  • Related Content: AI-powered content discovery
  • Dark Mode: Beautiful light/dark/auto themes
  • Advanced Filters: Date range, type, relevance threshold
  • Statistics Dashboard: Track your knowledge growth

Quick Start

Prerequisites

  • Node.js 18+
  • MongoDB Atlas account (free tier works)
  • Google Gemini API key (free tier available)
  • Chrome Browser (for extension)

1. Backend Setup

cd Backend
npm install

# Configure environment
copy .env.example .env
# Edit .env with your MongoDB URI, JWT secret, and Gemini API key

# Setup MongoDB Vector Search index (see Backend/SETUP.md)

# Start server
npm run dev

Server runs on http://localhost:3000

Detailed Guide: Backend/README.md

Frontend Setup

cd Frontend
npm install

# Configure environment
copy .env.example .env.local
# Set NEXT_PUBLIC_API_URL=http://localhost:3000

# Start dashboard
npm run dev

Dashboard runs on http://localhost:3001

Detailed Guide: Frontend/README.md

Extension Setup

cd Extension
npm install

# Build extension
npm run build

# Load in Chrome
# 1. Go to chrome://extensions/
# 2. Enable "Developer mode"
# 3. Click "Load unpacked"
# 4. Select the Extension folder

Detailed Guide: Extension/README.md

Architecture

Tech Stack

Backend

  • Runtime: Node.js + TypeScript
  • Framework: Express.js
  • Database: MongoDB Atlas with Vector Search
  • AI: Google Gemini API (text-embedding-004, gemini-pro-vision, gemini-pro)
  • Storage: GridFS for images
  • Auth: JWT tokens
  • Jobs: node-cron for background processing

Frontend

  • Framework: Next.js 15 (App Router)
  • UI Library: React 18
  • Styling: Tailwind CSS
  • State Management: TanStack Query (React Query)
  • Components: Radix UI (headless primitives)
  • Icons: Lucide React
  • Theme: next-themes (dark mode)

Extension

  • Manifest: V3 (Service Worker)
  • UI: React 18 + TypeScript
  • Build: Vite
  • Styling: Tailwind CSS
  • Storage: Chrome Storage API

Project Structure

The_Vision_Project_OG/
├── Backend/                    # Node.js + Express API
│   ├── src/
│   │   ├── controllers/       # Request handlers
│   │   ├── routes/            # API routes
│   │   ├── services/          # Business logic (Gemini, metadata)
│   │   ├── middleware/        # Auth middleware
│   │   ├── jobs/              # Background jobs
│   │   ├── config/            # Configuration & DB
│   │   └── types/             # TypeScript types
│   ├── package.json
│   ├── tsconfig.json
│   └── README.md
│
├── Frontend/                   # Next.js 15 Dashboard
│   ├── app/                   # App Router
│   │   ├── (auth)/           # Auth pages
│   │   ├── dashboard/        # Main grid view
│   │   ├── search/           # Semantic search
│   │   ├── chat/             # AI chat interface
│   │   ├── settings/         # User settings
│   │   └── synapse/[id]/     # Detail view
│   ├── components/           # React components
│   │   ├── sidebar.tsx
│   │   ├── synapse-card.tsx
│   │   └── ui/               # Radix UI components
│   ├── lib/
│   │   ├── api.ts            # API client
│   │   ├── types.ts          # TypeScript types
│   │   └── utils.ts          # Utilities
│   ├── package.json
│   └── README.md
│
└── Extension/                  # Chrome Extension
    ├── src/
    │   ├── background.ts      # Service worker
    │   ├── content.ts         # Content script (floating button)
    │   ├── popup/             # Extension popup
    │   └── utils.ts           # API utilities
    ├── assets/                # Icons
    ├── manifest.json          # Extension manifest
    ├── package.json
    └── README.md

API Reference

Authentication

  • POST /api/auth/register - Register new user
  • POST /api/auth/login - Login user
  • GET /api/auth/me - Get current user profile

Content Ingestion

  • POST /api/ingest - Ingest content (text, URL, image)

Synapses & Search

  • GET /api/synapses - Get all synapses (paginated)
  • GET /api/synapses/:id - Get synapse by ID
  • POST /api/synapses - Semantic search
  • GET /api/synapses/:id/related - Get related synapses
  • DELETE /api/synapses/:id - Delete synapse

RAG (AI Chat)

  • POST /api/ask - Ask question using RAG
  • GET /api/ask/stats - Get user statistics

Utility

  • GET /health - Health check

Full API Documentation: See Backend/README.md

Usage Examples

Capture Content

Method 1: Inline Highlighting

  1. Select text on any webpage
  2. Click the floating "Save to Synapse" button
  3. Content saved automatically

Method 2: Keyboard Shortcut

  1. Select text
  2. Press Alt+S
  3. Done!

Method 3: Context Menu

  1. Right-click text/image/link
  2. Select "Save to Synapse"

Method 4: Full Page

  1. Click extension icon
  2. Click "Save Current Page"

Search Your Knowledge

Semantic Search (finds by meaning, not just keywords)

Query: "machine learning articles I saved last month"
Result: All ML content from the specified time, ranked by relevance

Type Filters

  • Filter by: Notes, Articles, Products, Videos, Images, Todos
  • Date range filtering
  • Relevance threshold control

Chat with Your Brain

RAG-Powered Conversations

You: "What did I learn about React hooks?"
AI: Based on your saved articles, here's what you learned...
    [Shows sources with direct links]

You: "Find products under $50 related to fitness"
AI: Here are 3 products you saved...

Security & Privacy

  • JWT Authentication: Secure token-based auth
  • Password Hashing: bcrypt with salt rounds
  • CORS Protection: Configured origins
  • Helmet.js: Security headers
  • User Isolation: All data scoped to user ID
  • Local Storage: Extension tokens stored locally
  • No Data Sharing: Your data stays in your MongoDB

Development

Run All Services

# Terminal 1 - Backend
cd Backend
npm run dev

# Terminal 2 - Frontend
cd Frontend
npm run dev

# Terminal 3 - Extension (watch mode)
cd Extension
npm run watch

Build for Production

# Backend
cd Backend
npm run build
npm start

# Frontend
cd Frontend
npm run build
npm start

# Extension
cd Extension
npm run build
# Upload dist/ to Chrome Web Store

Testing

Manual Testing Checklist

Extension

  • Text capture works
  • Image capture with OCR
  • Offline queue functions
  • Authentication flow
  • Context menu appears

Backend

  • Vector embeddings generated
  • Semantic search returns relevant results
  • RAG provides accurate answers
  • Background jobs run
  • File upload works

Frontend

  • Cards display correctly
  • Infinite scroll loads
  • Search with filters
  • Chat interface responds
  • Theme switching works
  • Related content shows

API Testing

Use the included Postman collection:

# Import Backend/postman.json into Postman

Or use cURL (see Backend README for examples).

Roadmap

Phase 1: Core Infrastructure (Complete)

  • Backend API with MongoDB
  • Vector search setup
  • JWT authentication
  • Basic CRUD operations

Phase 2: AI Integration (Complete)

  • Gemini embeddings
  • Image OCR
  • RAG implementation
  • Auto-categorization

Phase 3: Frontend Dashboard (Complete)

  • Type-specific cards
  • Semantic search UI
  • Chat interface
  • Dark mode
  • Infinite scroll

Phase 4: Chrome Extension (Complete)

  • Content script
  • Context menu
  • Offline support
  • Authentication flow

Phase 5: Advanced Features (In Progress)

  • Mobile app (React Native)
  • Browser extension (Firefox, Edge)
  • Collaborative workspaces
  • Export to PDF/Markdown
  • Advanced analytics dashboard
  • Custom embeddings models
  • Voice notes capture
  • Screenshot annotation
  • Tag system
  • Bulk operations

Phase 6: Enterprise (Planned)

  • Team accounts
  • SSO integration
  • Admin dashboard
  • Usage analytics
  • API rate limiting
  • Custom deployment options

Troubleshooting

Backend Issues

MongoDB Connection Failed

# Check your MONGODB_URI in .env
# Ensure IP is whitelisted in MongoDB Atlas
# Verify network access

Gemini API Errors

# Verify GEMINI_API_KEY is valid
# Check quota limits at https://makersuite.google.com/
# Ensure correct model names

Frontend Issues

Backend Connection Failed

# Verify backend is running on port 3000
# Check NEXT_PUBLIC_API_URL in .env.local
# Test: curl http://localhost:3000/health

Cards Not Displaying

# Check browser console for errors
# Verify API responses in Network tab
# Clear Next.js cache: rm -rf .next/

Extension Issues

Extension Not Loading

# Ensure npm run build completed successfully
# Load Extension folder, not dist/
# Check for errors in chrome://extensions/

Authentication Failed

# Login through dashboard first
# Token stored in localStorage
# Check extension console for errors

Performance

Backend

  • Vector Search: ~50ms for 10k documents
  • Embedding Generation: ~500ms per item
  • RAG Response: ~2-3 seconds (includes LLM)
  • Image OCR: ~1-2 seconds per image

Frontend

  • Initial Load: < 2 seconds
  • Infinite Scroll: Seamless with virtualization
  • Search Results: < 500ms
  • Theme Switch: Instant with CSS variables

Extension

  • Content Script Injection: < 100ms
  • Capture Action: < 200ms
  • Offline Queue: Unlimited (localStorage limits)

Contributing

We welcome contributions! Here's how:

  1. Fork the repository
  2. Create a feature branch (git checkout -b feature/amazing-feature)
  3. Commit your changes (git commit -m 'Add amazing feature')
  4. Push to the branch (git push origin feature/amazing-feature)
  5. Open a Pull Request

Development Guidelines

  • Follow TypeScript best practices
  • Write meaningful commit messages
  • Update documentation for API changes
  • Test thoroughly before submitting
  • Keep PRs focused and atomic

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgments

  • Google Gemini - AI embeddings and vision
  • MongoDB - Vector search capabilities
  • Vercel - Next.js framework
  • Radix UI - Accessible component primitives
  • Tailwind CSS - Utility-first styling

Support

Star History

If you find this project useful, please consider giving it a star!

Built for knowledge management enthusiasts

Project Synapse - Your AI-Powered Second Brain

About

No description, website, or topics provided.

Resources

Readme
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

 
 
 

Contributors

Languages