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.
🔐 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)
- HTML5 – Structure
- CSS3 – Styling, dark mode, transitions
- JavaScript (ES6) – Logic, state, DOM manipulation
- Browser localStorage – Data persistence
No frameworks, no libraries, no backend.
mini-microblog/ │ ├── index.html # App layout & structure ├── style.css # Styling & dark/light themes ├── script.js # App logic & localStorage handling └── README.md # Project documentation
- Clone or download the project
- Open index.html in your browser
- Sign up with a new username
- Start posting ✨
No server or build tools required.
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.
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
- Edit & delete individual posts
- Password hashing
- Per-user feed filtering
- Pagination
- Avatar support
- Backend integration (Node.js / Firebase)
- Responsive mobile-first redesign
This project is open for educational and personal use. Feel free to modify and expand it as part of your learning journey.