⚡ Digital Line Coding & PCM Visualizer

See the invisible — watch data travel as waveforms in real time.

Type any text → watch it become binary → see it encoded as a live waveform.
Configure an analog signal → sample it → quantize it → read the PCM bitstream.

🌐 Try it live →

---

✨ What It Does

This app makes two core concepts from digital communications tangible and interactive:

📡 Task 1 — Line Coding

Convert any text into its ASCII binary representation, then visualize how that bitstream looks on the wire using 6 real-world encoding schemes — all rendered as interactive waveform plots.

Scheme	Type	Voltage Levels
Unipolar NRZ	Non-Return to Zero	0, +V
Unipolar RZ	Return to Zero	0, +V
Manchester	Biphase	−V, +V
Differential Manchester	Biphase	−V, +V
Bipolar AMI	Multilevel	−V, 0, +V
Pseudo-Ternary	Multilevel	−V, 0, +V

Each scheme shows bit duration, bandwidth, and voltage levels as live metrics.

🎛️ Task 2 — PCM Modulation

Configure a sine wave and watch the full Pulse Code Modulation pipeline unfold across four synchronized plots:

Analog Signal  →  Sampled (stems)  →  Quantized (staircase)  →  PCM Bitstream (NRZ)

Includes a Nyquist theorem checker — get a warning banner the moment your sampling frequency drops below 2× the signal frequency.

---

🚀 Live Demo

https://digital-line-coding.vercel.app/

No setup. No install. Just open and explore.

---

🛠️ Running Locally

Prerequisites

• Python 3.10+
• Node.js 18+

Backend

cd backend
python -m venv venv
venv\Scripts\activate        # Windows
# source venv/bin/activate   # macOS/Linux
pip install -r requirements.txt
python main.py

API → http://localhost:8000
Swagger UI → http://localhost:8000/docs

Frontend

cd frontend
npm install
npm run dev

App → http://localhost:5173

Both servers must run simultaneously. The frontend proxies /api/* to the backend automatically.

---

📡 API Reference

Method	Endpoint	Description
GET	/	Health check + valid schemes list
POST	/api/encode	Text → binary + waveform data for a given scheme
POST	/api/pcm	Full PCM pipeline for a configurable analog signal

Full interactive docs available at /docs (Swagger UI) and /redoc.

---

🗂️ Project Structure

digital-line-coding/
├── backend/
│   ├── main.py          # FastAPI app, routes, validation
│   ├── encoder.py       # Text → ASCII binary conversion
│   ├── schemes.py       # All 6 line coding waveform generators
│   ├── pcm.py           # PCM pipeline (sample → quantize → encode)
│   ├── models.py        # Pydantic request/response schemas
│   └── requirements.txt
│
├── frontend/
│   ├── src/
│   │   ├── api/         # Axios API calls
│   │   ├── components/  # UI — LineCoding + PCM panels, plots, controls
│   │   ├── hooks/       # useLineCoding, usePCM — state + API logic
│   │   └── constants/   # Scheme metadata, Plotly config
│   └── package.json
│
└── vercel.json          # Monorepo deployment config

---

🧰 Tech Stack

Layer	Technology
Backend	Python · FastAPI · NumPy · Pydantic
Frontend	React 19 · Vite · Plotly.js · Framer Motion · Tailwind CSS
Fonts	Space Grotesk · DM Sans · JetBrains Mono
Deployment	Vercel (serverless functions + static hosting)

---

👤 Author

Fahad Naseer
Communication Systems — Assignment 2