People Panel

Explore the docs »

View Demo · Report Bug · Request Feature

About The Project

People Panel is a modern web application built with React, TypeScript, and Vite, utilizing pnpm for fast and reliable package management.

Prerequisites

Install Node.js:

sudo apt install nodejs

Install pnpm:

npm install -g pnpm

🔐 Clerk Integration (Authentication)

This project uses Clerk to handle authentication and user management.

Setup

1. Go to https://clerk.dev and create a free account.
2. Create a new application in the Clerk dashboard.
3. Copy the Publishable Key from the dashboard.

(back to top)

Getting Started

Running the Project with Docker Compose

1. Clone the repository

git clone https://github.com/nelsonacos/people-panel.git

2. Go to the project folder

cd people-panel

3. In the root of your project, create the .env file to configure the environment variables

# Unix System
cat .env.example > .env

# Windows System
copy .env.example .env

4. Configure your .env file

VITE_CLERK_PUBLISHABLE_KEY=pk_test_cmlnaxwwkwmwrwdwWxlcGhhbnQtODsowwwvwcwxw

📝 Note: Vite automatically loads variables from .env files. Make sure your key starts with VITE_ to be available in import.meta.env.

5. Run the command:

docker-compose up --build

Then open http://localhost:3000/ in your browser.

Running the Project Locally (without Docker)

1. Clone the repository

git clone https://github.com/nelsonacos/people-panel.git

2. Go to the project folder

cd people-panel

3. In the root of your project, create the .env file to configure the environment variables

# Unix System
cat .env.example > .env

# Windows System
copy .env.example .env

4. Configure your .env file

VITE_CLERK_PUBLISHABLE_KEY=pk_test_cmlnaxwwkwmwrwdwWxlcGhhbnQtODsowwwvwcwxw

📝 Note: Vite automatically loads variables from .env files. Make sure your key starts with VITE_ to be available in import.meta.env.

5. Install dependencies

pnpm install

6. Start the development server

pnpm run dev

Then open http://localhost:3000/ in your browser.

(back to top)

React + TypeScript + Vite

This setup provides a modern developer experience using:

• ⚡️ Vite for fast builds and hot module replacement
• ⚛️ React with JSX support
• 🟦 TypeScript for static typing

ESLint Configuration

To enhance code quality, consider expanding the ESLint configuration with type-aware rules:

export default tseslint.config({
  extends: [
    ...tseslint.configs.recommendedTypeChecked,
    ...tseslint.configs.strictTypeChecked,
    ...tseslint.configs.stylisticTypeChecked,
  ],
  languageOptions: {
    parserOptions: {
      project: ['./tsconfig.node.json', './tsconfig.app.json'],
      tsconfigRootDir: import.meta.dirname,
    },
  },
})

You can also use additional plugins:

import reactX from 'eslint-plugin-react-x';
import reactDom from 'eslint-plugin-react-dom';

export default tseslint.config({
  plugins: {
    'react-x': reactX,
    'react-dom': reactDom,
  },
  rules: {
    ...reactX.configs['recommended-typescript'].rules,
    ...reactDom.configs.recommended.rules,
  },
});

(back to top)