Micro Post

A responsive micro-posting application built with React, TypeScript, Vite, React Router, and Tailwind CSS.

Overview

Micro Post is a small social posting app where users can register, log in, create short posts, and browse posts from the home page. The authenticated home page places the create-post form above a responsive post grid.

This project uses browser localStorage as a lightweight client-side data store for users, sessions, and posts. It is intended as a frontend demo rather than a production backend application.

Features

• User registration with username, email, and password
• User login and logout
• Protected routes for authenticated users
• Persistent browser sessions through localStorage
• Create posts with a title and body
• Validation for post title and content length
• Automatic clearing of the form after a successful submission
• Responsive post list that adapts across screen sizes
• Change-password route for authenticated users
• Dark glassmorphism-inspired interface with Tailwind CSS
• Client-side routing with React Router

Main User Flow

1. A new user registers for an account.
2. The user is automatically logged in after registration.
3. The protected home page displays the create-post form above the post list.
4. The user enters a title and content, then publishes the post.
5. The post is saved locally and appears in the post list.
6. The title and content fields are cleared after submission.

Validation

• Post titles must contain at least 3 characters.
• Post content must contain at least 10 characters.
• A user must be authenticated before creating a post.
• Post titles are limited to 100 characters in the form.

Technology

• React 19
• TypeScript
• Vite
• React Router
• Tailwind CSS 4
• Oxlint
• Browser localStorage

Project Structure

src/
├── api/                       # API-related entry point
├── components/
│   ├── app/
│   │   ├── auth/              # Login, registration, logout, password change
│   │   └── post/              # Post creation, post cards, and post list
│   └── layout/                # Shared layouts, header, footer, and wrapper
├── context/                   # Authentication context and provider
├── hooks/                     # Reusable React hooks
├── pages/                     # Route-level page components
├── routes/                    # Route definitions and router configuration
└── services/                  # User and post models plus local data services

Getting Started

Install dependencies:

npm install

Start the development server:

npm run dev

Build the application for production:

npm run build

Run lint checks:

npm run lint

Notes

This application stores data in the current browser only. Clearing browser storage removes the locally registered users, active session, and posts. A production version would replace the local services with a server-side API and database.