PHLASK Admin Dashboard

This is the admin dashboard for the PHLASK project. It provides a web interface for reviewing, editing, and managing community resource data using Supabase as the backend.

Key Features

• View and manage resources from the Supabase database
• Review and approve/reject suggested edits to resources
• View and resolve reports on resources
• View resource changelogs and roll back changes if needed

Getting Started

Prerequisites

• Ensure you have nodejs installed on your machine.
• Ensure you have pnpm installed globally for package management.
• Have Biome added to your code editor for consistent code formatting.

Installation

Once you are in the root directory of the project. Install dependencies with pnpm:

pnpm install

Development

Start the development server:

pnpm run dev

Visit http://localhost:5174 or as output in the terminal from pnpm run dev to view the app.

Environment Variables

To see the data & tables create a .env file in the root directory with the following variables: For reference, check and copy from the .env.example file.

cp .example.env .env

Your .env file should look like this:

VITE_DB_NAME="resources"
VITE_DB_URL="Check .example.env for the URL"
VITE_DB_API_KEY="Message us in the #phlask-data channel on Slack"

Need access to the database? Message us in the #phlask-data channel on Slack. Also, refer to the .env.example file for more details.

Docker

To build and run with Docker: Have Docker installed and running.

In the root directory of the project, run:

docker build -t phlask-admin-dashboard .
docker run -p 3000:3000 phlask-admin-dashboard

Replace 3000:3000 with the actual port your application listens on if it is different.

Project Structure

app/
├── api/
│   ├── resources/
│   │   └── methods.ts      # API methods related to resources
│   ├── client.ts           # API client setup
│   └── types.ts            # Shared API request/response types
├── assets/
│   └── PHILASK_v2.svg      # Static assets (logos, images, etc.)
├── constants/
│   └── db.ts               # Database-related constants/config
├── routes/
│   ├── _layout.tsx         # Shared layout for route pages
│   ├── dashboard.tsx       # Dashboard page component
├── types/
│   └── ResourceEntry.ts    # Domain-specific TypeScript types
├── utils/
│   └── distance.ts         # Distance calculation utilities
├── app.css                 # Global application styles
├── root.tsx                # App root component / Entry point
└── routes.ts               # Route definitions and router configuration

How to Contribute / Next Steps

• Please refer to contributing guidelines here.

• Please check our https://github.com/phlask/admin-dashboard/issues for open issues and feature requests.

• Before submitting a PR, please ensure that your code adheres to the project's coding standards and passes all tests. We recommend running the following command to check for linting errors and run tests:

pnpm biome check --write ./

Command	Description
pnpm biome check --write ./	Check & Fix (Safe)
pnpm biome format --write ./	Format Only
pnpm biome lint --write ./	Lint Only

---

Building with ❤️ by the PHLASK team.