🐦 TinyTwitter

A minimal Twitter clone demonstrating basic CRUD operations without any frontend framework. This application is intentionally built with vanilla HTML, CSS, and JavaScript to showcase how frameworks like React can improve code maintainability and structure.

Features

• Create Tweet: Post new tweets with author name and content
• Read Tweets: View all tweets in reverse chronological order
• Update Tweet: Edit existing tweets
• Delete Tweet: Remove tweets from the timeline

Purpose

This project demonstrates a "bad example" of frontend development without using modern frameworks. The intention is to show:

• How vanilla JavaScript can become difficult to maintain as the application grows
• Manual DOM manipulation and state management challenges
• Repetitive code patterns that frameworks solve elegantly
• Why React and similar frameworks improve developer experience and code quality

Technology Stack

Backend

• FastAPI: Modern Python web framework for building APIs
• SQLAlchemy: SQL toolkit and ORM for database operations
• PostgreSQL: Relational database for data persistence
• Uvicorn: ASGI server for running FastAPI

Frontend

• HTML5: Structure and markup
• CSS3: Styling with modern features
• Vanilla JavaScript: No frameworks or libraries (intentionally)

Infrastructure

• Docker: Containerization
• Docker Compose: Multi-container orchestration

Quick Start

Prerequisites

• Docker (20.10+)
• Docker Compose (1.29+)

Running the Application

1. Clone the repository:

git clone https://github.com/code-with-nehith/tinyTwitter.git
cd tinyTwitter

2. Start the application stack:

docker-compose up --build

1. Access the application:

   • Web Interface: http://localhost:8000
   • API Documentation: http://localhost:8000/docs
   • Alternative API Docs: http://localhost:8000/redoc

2. Stop the application:

docker-compose down

To remove all data (including database volumes):

docker-compose down -v

Project Structure

tinyTwitter/
├── main.py                 # FastAPI application with all endpoints
├── requirements.txt        # Python dependencies
├── Dockerfile             # Docker configuration for web service
├── docker-compose.yml     # Docker Compose orchestration
├── static/                # Frontend files
│   ├── index.html        # Main HTML page
│   ├── style.css         # Styling
│   └── app.js            # JavaScript logic
└── README.md             # This file

API Endpoints

All endpoints are prefixed with /api/tweets:

Create Tweet

POST /api/tweets
Content-Type: application/json

{
  "author": "John Doe",
  "content": "Hello, Twitter!"
}

Get All Tweets

GET /api/tweets

Get Single Tweet

GET /api/tweets/{tweet_id}

Update Tweet

PUT /api/tweets/{tweet_id}
Content-Type: application/json

{
  "author": "John Doe",
  "content": "Updated tweet content"
}

Delete Tweet

DELETE /api/tweets/{tweet_id}

Database Schema

Tweets Table

Column	Type	Constraints
id	INTEGER	PRIMARY KEY, AUTO
author	VARCHAR(100)	NOT NULL
content	TEXT	NOT NULL
created_at	TIMESTAMP	DEFAULT NOW()

Frontend Architecture

The frontend is intentionally built without frameworks to demonstrate:

1. Manual DOM Manipulation: Direct use of innerHTML, createElement, etc.
2. No Component Architecture: All code in a single JavaScript file
3. No State Management: State scattered across DOM and variables
4. Imperative Programming: Step-by-step DOM updates
5. No Virtual DOM: Direct DOM updates on every change

Why This Is "Bad"

As the application grows, this approach leads to:

• Spaghetti Code: Logic scattered across multiple event handlers
• Hard to Test: Tightly coupled to the DOM
• Performance Issues: Unnecessary re-renders and DOM operations
• Maintenance Nightmare: Changes require touching multiple places
• No Reusability: Copy-paste code for similar functionality

How React Would Improve This

React and similar frameworks provide:

• Component-Based Architecture: Reusable, isolated components
• Declarative UI: Describe what the UI should look like, not how to update it
• Virtual DOM: Efficient updates with minimal DOM operations
• Built-in State Management: Predictable state updates and data flow
• Developer Tools: Better debugging and inspection
• Testing Utilities: Easy to write unit and integration tests
• Ecosystem: Rich ecosystem of libraries and tools

Development

Running Without Docker

1. Install PostgreSQL and create a database:

createdb tinytwitter

2. Install Python dependencies:

pip install -r requirements.txt

3. Set environment variable:

export DATABASE_URL="postgresql://postgres:admin@localhost:5432/tinytwitter"

4. Run the application:

uvicorn main:app --reload

API Documentation

FastAPI automatically generates interactive API documentation:

• Swagger UI: http://localhost:8000/docs
• ReDoc: http://localhost:8000/redoc