Jargon Buster

Installation

Clone the repository and install the dependencies:

npm install
npm run dev

A simpleweb application for tracking and learning new technical terms, jargon, and concepts. Built with React, TypeScript, and Express, it helps you manage your learning journey by capturing initial thoughts, detailed notes, and simplified explanations.

Features

Term Management

• Add new terms with initial thoughts
• Track understanding status (understood/not understood)
• Edit terms with additional context:
  • Definition
  • Notes
  • "Explain Like I'm Five" (ELI5) explanations
• Delete terms when no longer needed

Search and Discovery

• Real-time search filtering
• Direct links to search terms on Google
• Quick access to Wikipedia articles
• Track when terms were added and understood

User Interface

• Clean, modern interface with Tailwind CSS
• Responsive design for all devices
• Intuitive status indicators
• Progress tracking dashboard

Data Persistence

• SQLite database for reliable storage
• Automatic data synchronization
• Timestamp tracking for term management

Tech Stack

Frontend

• React 18
• TypeScript
• Tailwind CSS
• Lucide React (icons)
• Vite (build tool)

Backend

• Express.js
• SQLite3
• Node.js

Project Structure

├── src/                  # Frontend source code
│   ├── components/       # React components
│   │   ├── AddTermForm.tsx    # New term entry
│   │   ├── SearchTerms.tsx    # Search interface
│   │   ├── Stats.tsx          # Progress dashboard
│   │   └── TermList.tsx       # Terms display
│   ├── context/         # React context
│   │   └── TermContext.tsx    # Term state management
│   └── types/           # TypeScript definitions
├── server/              # Backend code
│   ├── index.js         # Express server
│   └── terms.db         # SQLite database
└── public/              # Static assets

Database Schema

CREATE TABLE terms (
  id TEXT PRIMARY KEY,
  term TEXT NOT NULL,
  definition TEXT,
  understood BOOLEAN DEFAULT 0,
  dateAdded TEXT NOT NULL,
  dateUnderstood TEXT,
  initialThoughts TEXT,
  notes TEXT,
  eli5 TEXT
);

API Endpoints

GET /api/terms

• Retrieves all terms
• Response: Array of term objects

POST /api/terms

• Creates a new term
• Body: { id, term, definition, dateAdded, initialThoughts }

PUT /api/terms/:id

• Updates an existing term
• Body: { term, definition, notes, eli5 }

PUT /api/terms/:id/toggle

• Toggles term understanding status
• Body: { understood, dateUnderstood }

DELETE /api/terms/:id

• Deletes a term

Development Setup

1. Prerequisites:

   • Node.js (v18 or higher)
   • npm (included with Node.js)

2. Installation:

   git clone <repository-url>
   cd jargon-buster
   npm install

3. Start Development Servers:

   npm run dev

   This starts:

   • Frontend: http://localhost:5173
   • Backend: http://localhost:3000

Production Build

1. Build the application:

   npm run build

2. Start production server:

   npm start

Environment Variables

The application uses default ports:

• Frontend Dev Server: 5173
• Backend Server: 3000

Contributing

1. Fork the repository
2. Create a feature branch
3. Commit your changes
4. Push to the branch
5. Create a Pull Request

License

MIT License - feel free to use this project for personal or commercial purposes.

Acknowledgments

• Icons provided by Lucide
• UI styled with Tailwind CSS