Files

Mohammad Mahdi 803687738e feat: Convert React application to HTML/CSS/JS with Alpine.js

- Migrate from React/TypeScript to vanilla HTML/CSS/JS with Alpine.js
- Implement all original functionality: authentication, media queue, OAuth flow
- Add auto-loading of media queue on dashboard access
- Enhance JWT expiration handling with proper redirects
- Improve OAuth callback page with beautiful UI and status updates
- Remove unused HTMX dependency
- Clean up old React project files
- Update README with live demo link and development instructions

Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>

2025-09-25 21:45:01 +03:30

1.4 KiB

Raw Blame History

All AI written

CatsOfMastodonGo Admin Dashboard v2

A modern, lightweight admin dashboard for reviewing media content, built with HTML, CSS, JavaScript, Alpine.js, and Tailwind CSS.

Live Demo

A live demo of the project is available at: cat.monasef.ir

Features

Password-based authentication
Gitea OAuth integration
Media queue system with preloading
Approval/rejection workflow for media content
Responsive design for desktop and mobile
Modern UI with smooth transitions

Tech Stack

HTML5
CSS3 (with Tailwind CSS)
JavaScript (with Alpine.js for state management)
HTMX (for enhanced interactivity)

Development Setup

Install dependencies: pnpm install
Start development server: pnpm run dev
The application will be available at: http://localhost:8080/admin/

Production Build

Build for production: pnpm run build
The built files will be in the dist directory

API Integration

The application integrates with the backend API at the following endpoints:

POST /admin/api/login - Authenticate with password
GET /admin/api/login/oauth/gitea - Initiate Gitea OAuth flow
POST /admin/api/login/oauth/gitea/final - Complete Gitea OAuth flow
GET /admin/api/getmedia - Get next media item to review
POST /admin/api/approve - Approve a media item
POST /admin/api/reject - Reject a media item

1.4 KiB Raw Blame History