Mohammad Mahdi
803687738e
- 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>
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
distdirectory
API Integration
The application integrates with the backend API at the following endpoints:
POST /admin/api/login- Authenticate with passwordGET /admin/api/login/oauth/gitea- Initiate Gitea OAuth flowPOST /admin/api/login/oauth/gitea/final- Complete Gitea OAuth flowGET /admin/api/getmedia- Get next media item to reviewPOST /admin/api/approve- Approve a media itemPOST /admin/api/reject- Reject a media item