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

Environment Variables

To run the app locally, you must create a .env file in the root directory with the variables defined in the .env.example file. You should duplicate this file and populate the missing fields with the API secrets.

cp .example.env .env

If any variables are reported as missing, message us in the #phlask-data channel on Slack (See Code For Philly for more details). Also, refer to the .env.example file for more details.

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.

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 the contributing guidelines.

• Please check our GitHub 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.