{"id":31065693,"url":"https://github.com/useraar/mechack-admin-panel","last_synced_at":"2025-09-15T16:51:06.765Z","repository":{"id":313541745,"uuid":"1051653149","full_name":"UserAAR/MecHack-Admin-Panel","owner":"UserAAR","description":null,"archived":false,"fork":false,"pushed_at":"2025-09-06T18:12:48.000Z","size":8854,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-09-06T20:19:03.148Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://mechack-admin.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/UserAAR.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-09-06T12:57:25.000Z","updated_at":"2025-09-06T18:12:52.000Z","dependencies_parsed_at":"2025-09-06T20:29:08.312Z","dependency_job_id":null,"html_url":"https://github.com/UserAAR/MecHack-Admin-Panel","commit_stats":null,"previous_names":["useraar/mechack-admin-panel"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/UserAAR/MecHack-Admin-Panel","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/UserAAR%2FMecHack-Admin-Panel","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/UserAAR%2FMecHack-Admin-Panel/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/UserAAR%2FMecHack-Admin-Panel/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/UserAAR%2FMecHack-Admin-Panel/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/UserAAR","download_url":"https://codeload.github.com/UserAAR/MecHack-Admin-Panel/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/UserAAR%2FMecHack-Admin-Panel/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":275289706,"owners_count":25438494,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-15T02:00:09.272Z","response_time":75,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-09-15T16:51:02.388Z","updated_at":"2025-09-15T16:51:06.747Z","avatar_url":"https://github.com/UserAAR.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# MecHack Admin Panel\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"/public/logo/logo.jpg\" alt=\"MecHack Logo\" width=\"140\" height=\"140\" /\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://nextjs.org/\" target=\"_blank\"\u003e\u003cimg alt=\"Next.js\" src=\"https://img.shields.io/badge/Next.js-15-black?logo=next.js\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.typescriptlang.org/\" target=\"_blank\"\u003e\u003cimg alt=\"TypeScript\" src=\"https://img.shields.io/badge/TypeScript-5-3178C6?logo=typescript\u0026logoColor=white\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://tailwindcss.com/\" target=\"_blank\"\u003e\u003cimg alt=\"Tailwind CSS\" src=\"https://img.shields.io/badge/Tailwind%20CSS-3-38BDF8?logo=tailwindcss\u0026logoColor=white\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://supabase.com/\" target=\"_blank\"\u003e\u003cimg alt=\"Supabase\" src=\"https://img.shields.io/badge/Supabase-SSR%20%2F%20Storage-3ECF8E?logo=supabase\u0026logoColor=white\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.radix-ui.com/\" target=\"_blank\"\u003e\u003cimg alt=\"Radix\" src=\"https://img.shields.io/badge/Radix%20UI-Accessible-111827\" /\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003e A secure, role-based administration interface for managing MecHack content, media, users, and system settings. Built with Next.js App Router, TypeScript, Tailwind CSS, and Supabase. Includes a polished UX with a smooth top-loading progress bar and consistent design system.\n\n\n## Table of Contents\n- [Overview](#overview)\n- [Key Features](#key-features)\n- [Architecture](#architecture)\n- [Tech Stack](#tech-stack)\n- [Getting Started](#getting-started)\n- [Environment Variables](#environment-variables)\n- [Project Structure](#project-structure)\n- [Routing \u0026 Modules](#routing--modules)\n- [Authentication \u0026 Roles](#authentication--roles)\n- [Media Library](#media-library)\n- [Audit Logs](#audit-logs)\n- [Styling \u0026 UI](#styling--ui)\n- [Quality \u0026 Scripts](#quality--scripts)\n- [Deployment](#deployment)\n- [Troubleshooting](#troubleshooting)\n- [License](#license)\n\n\n## Overview\nThe Admin Panel is a separate Next.js application designed for editors and administrators. It uses server-first data fetching with Supabase SSR clients, protects routes via middleware, and enforces role-based access (Admin, Superadmin). The UI is clean, responsive, and optimized for daily content workflows.\n\n\n## Key Features\n- Content Management\n  - Create, edit, publish: News, Projects, Events\n  - Rich text editing (TipTap with image support)\n  - Slug generation and basic SEO fields\n- Users \u0026 Roles\n  - Role-based access: Admin, Superadmin\n  - Superadmin-only sections (e.g., Users management)\n- Media Library\n  - Drag \u0026 drop uploads to Supabase Storage\n  - Folder-like organization (news, projects, events, uploads)\n  - Grid/List views, sort and search\n- Observability \u0026 System\n  - Audit trail via `/api/audit` endpoint\n  - Top loader progress indicator for navigation\n- UX \u0026 Productivity\n  - Keyboard-friendly forms\n  - Consistent components and layout\n  - Dark mode support via theme toggle\n\n\n## Architecture\n- Next.js 15 App Router (`/src/app`) with server components\n- Supabase SSR integration for secure, cookie-based sessions\n- Middleware protection for authenticated and role-guarded routes\n- Modular feature directories: `content/`, `media/`, `users/`, `settings/`, etc.\n\nSupabase Clients\n- Server: `src/lib/supabase/server.ts`\n- Browser: `src/lib/supabase/client.ts`\n\nMiddleware\n- `src/middleware.ts` verifies session cookies and redirects unauthenticated users to `/auth/sign-in`\n- Fetches `profiles.role` and restricts access to admin-only routes\n- Redirects non-admins to the public website (configurable)\n\n\n## Tech Stack\n- Framework: Next.js 15, React 19, TypeScript 5\n- Data: Supabase (Auth, Postgres, Storage)\n- UI: Tailwind CSS 3, Radix Primitives, custom components\n- Charts: ApexCharts, Recharts\n- Forms: React Hook Form + Zod\n- Editor: TipTap (+ image extension)\n\n\n## Getting Started\n1) Requirements\n- Node.js 20 LTS (recommended) or \u003e=18.17\n- npm 9+ (or yarn/pnpm/bun)\n\n2) Install dependencies\n```bash\ncd admin-panel\nnpm install\n```\n\n3) Environment variables\nCreate `admin-panel/.env.local`:\n```env\nNEXT_PUBLIC_SUPABASE_URL=your_supabase_url\nNEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key\n# Where to send users when they are not allowed in admin (e.g., public website)\nNEXT_PUBLIC_PUBLIC_WEBSITE_URL=https://your-public-site.example\n```\n\u003e Do not expose service role keys in the frontend.\n\n4) Run the dev server\n```bash\nnpm run dev\n# open http://localhost:3000\n```\n\n5) Build \u0026 start\n```bash\nnpm run build\nnpm start\n```\n\n\n## Project Structure\n```\nadmin-panel/\n├─ public/                  # Static assets (logo, images)\n├─ src/\n│  ├─ app/\n│  │  ├─ (home)/            # Dashboard overview\n│  │  ├─ auth/              # Sign-in, change password\n│  │  ├─ content/\n│  │  │  ├─ news/           # News list + form\n│  │  │  ├─ projects/       # Projects list + form\n│  │  │  └─ events/         # Events list + form\n│  │  ├─ media/             # Media library\n│  │  ├─ users/             # Users (superadmin-only)\n│  │  ├─ settings/          # Settings sections\n│  │  ├─ api/               # Route handlers (audit, auth, deploy, ...)\n│  │  ├─ layout.tsx         # Global layout with AppFrame\n│  │  └─ AppFrame.tsx       # Header, Sidebar, shell\n│  ├─ components/           # UI building blocks\n│  ├─ hooks/                # Hooks (use-role, etc.)\n│  ├─ lib/                  # Supabase, profile utils, helpers\n│  ├─ services/             # Charts/services\n│  ├─ css/                  # Global styles\n│  └─ types/                # Type definitions\n├─ middleware.ts            # Auth + RBAC guard\n├─ next.config.mjs\n├─ package.json\n└─ README.md\n```\n\n\n## Routing \u0026 Modules\n- Auth: `/auth/sign-in`\n- Dashboard: `/`\n- Content:\n  - News: `/content/news`, `/content/news/new`, `/content/news/[id]/edit`\n  - Projects: `/content/projects`, `/content/projects/new`, `/content/projects/[id]/edit`\n  - Events: `/content/events`, `/content/events/new`, `/content/events/[id]/edit`\n- Media Library: `/media`\n- Users (superadmin): `/users`\n- Settings: `/pages/settings` and nested sections\n\n\n## Authentication \u0026 Roles\n- Sessions are validated via Supabase cookies (SSR)\n- Middleware rules (`src/middleware.ts`):\n  - Public-only routes: `/auth/sign-in`, `/auth/forgot-password`, `/auth/reset-password`\n  - All other routes require a valid session\n  - Profiles are fetched from `profiles` table to read `role`\n  - Allowed roles: `admin`, `superadmin`\n  - Superadmin-only prefixes: `/users`, `/system` (reserved)\n  - Non-authorized users are redirected to `NEXT_PUBLIC_PUBLIC_WEBSITE_URL`\n\n\n## Media Library\n- Backed by Supabase Storage bucket: `media`\n- Drag \u0026 drop uploads with automatic public URLs\n- Logical folders: `news/`, `projects/`, `events/`, `uploads/`\n- Grid/List views, search, sort, pagination-like navigation\n\n\n## Audit Logs\n- `POST /api/audit` records user actions (for authenticated users)\n- `GET /api/audit` returns the latest logs (superadmin only)\n- Captures basic metadata (IP, user agent) for traceability\n\n\n## Styling \u0026 UI\n- Tailwind CSS 3 with custom CSS variables and Satoshi font\n- Accessible components via Radix primitives\n- Smooth top progress via `nextjs-toploader`\n- Dark mode supported via theme toggle\n\n\n## Quality \u0026 Scripts\nScripts\n```bash\nnpm run dev       # Start dev server\nnpm run build     # Production build\nnpm run start     # Start production server\nnpm run lint      # ESLint\n```\n\nConventions\n- TypeScript-first; prefer explicit, descriptive names\n- Early returns and flat control flow\n- Keep components focused; favor composition over bloating\n- Accessibility: label interactive controls, keyboard-friendly\n\n\n## Deployment\nVercel (recommended)\n1. Import the repository into Vercel\n2. Set environment variables\n3. Deploy; Next.js middleware works out-of-the-box\n\nManual\n```bash\nnpm run build\nnpm start\n```\n\n\n## Troubleshooting\n- Redirect loop on protected routes: ensure auth cookies are present and valid\n- Getting redirected to website: your profile `role` is not `admin`/`superadmin`\n- Storage upload fails: verify Supabase Storage bucket `media` and RLS\n- Missing images: check `next.config.mjs` image remote patterns if using external hosts\n- Env vars not loading: confirm `.env.local` is placed under `admin-panel/`\n\n\n## License\nMIT © MecHack ","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fuseraar%2Fmechack-admin-panel","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fuseraar%2Fmechack-admin-panel","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fuseraar%2Fmechack-admin-panel/lists"}