Skip to content

JKA098/twimba

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

7 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

🐦 Twimba — Mini Twitter Clone (JavaScript)

JavaScript UUID Status License

Twimba is a lightweight Twitter-style microblogging app built entirely with vanilla JavaScript.
It allows users to post tweets, like, retweet, and view replies — all without a backend.
The UI updates dynamically using DOM manipulation and a simple local dataset.


🚀 Features

  • ✍️ Post tweets in real time
  • ❤️ Like / Unlike tweets
  • 🔁 Retweet / Undo Retweet
  • 💬 Show / Hide replies
  • Instant DOM rendering using template strings
  • 🆔 Unique tweet IDs generated via uuidv4()
  • 📦 In-memory data model stored in tweetsData

🧩 How It Works

The app listens for all clicks using:

document.addEventListener('click', function(e) { ... })
Attribute Purpose
data-like="uuid" ❤️ Like / Unlike a tweet
data-retweet="uuid" 🔁 Retweet / Undo retweet
data-reply="uuid" 💬 Show / hide replies
id="tweet-btn" ✍️ Post a new tweet

🔄 UI Re-Rendering

After any interaction, the UI is refreshed using:

render()

🏗️ Constructing the Feed

The tweets are generated from tweetsData using the function:

getFeedHtml()

This builds the tweet HTML structure (likes, retweets, replies) and injects it into:

<div id="feed"></div>

📦 Tech Stack

  • Vanilla JavaScript

  • HTML / CSS

  • Font Awesome (icons)

  • uuid (uuidv4() for unique IDs)

📁 Project Structure /project │── index.html

│── index.css

│── index.js ← (main logic)

│── data.js ← tweet dataset

│── images/

▶️ How to Run

  • Download or clone the project

  • Open index.html in your browser

  • Start tweeting 🎉

  • No build tools. No backend. 100% client-side.

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages