📝 Mini Microblog

A simple front-end microblogging application built with HTML, CSS, and vanilla JavaScript. This project is designed as a training / learning exercise to practice DOM manipulation, localStorage usage, authentication logic, and UI state management — without any backend.

---

🚀 Features

🔐 User Authentication

• Sign Up with username & password
• Sign In / Sign Out
• Delete user account

🧑‍💻 User-Based Microblogging

• Create short posts (max 140 characters)
• Limit of 10 posts per user
• Posts are timestamped and shown in a global feed

💾 Persistent Data

• Users, posts, session, and theme are stored in localStorage

🌙 Dark / Light Mode

• Toggle between themes
• Theme preference is saved

🧠 UX Enhancements

• Character counter with warning & error states
• Success / error message board
• Auto-sorted feed (newest first)

---

🛠️ Technologies Used

• HTML5 – Structure
• CSS3 – Styling, dark mode, transitions
• JavaScript (ES6) – Logic, state, DOM manipulation
• Browser localStorage – Data persistence

No frameworks, no libraries, no backend.

---

📂 Project Structure

mini-microblog/ │ ├── index.html # App layout & structure ├── style.css # Styling & dark/light themes ├── script.js # App logic & localStorage handling └── README.md # Project documentation

---

▶️ Getting Started

1. Clone or download the project
2. Open index.html in your browser
3. Sign up with a new username
4. Start posting ✨

No server or build tools required.

---

⚠️ Limitations (By Design)

This is a training project, so:

• ❌ Passwords are stored in plain text
• ❌ No real authentication or security
• ❌ No backend or database
• ❌ Data is browser-specific

Do not use this in production.

---

🎯 Learning Goals

This project helps practice:

• DOM manipulation
• Event handling
• Application state management
• localStorage CRUD operations
• UI rendering logic
• Basic UX patterns
• Theme toggling
• Front-end project structure

---

📌 Possible Improvements

• Edit & delete individual posts
• Password hashing
• Per-user feed filtering
• Pagination
• Avatar support
• Backend integration (Node.js / Firebase)
• Responsive mobile-first redesign

---

📄 License

This project is open for educational and personal use. Feel free to modify and expand it as part of your learning journey.