Getting StartedInstallation

Installation

Learn how to set up and run PenX locally, covering all necessary steps from installation to execution.

Requirements

Clone the Repository

Fork and clone the PenX repository to your local machine:

git clone https://github.com/penx-lab/penx

Project structure

After cloning, your project will have the following structure:

    • .env
    • components.json
    • next.config.js
    • package.json
    • postcss.config.js
    • tailwind.config.ts
    • tsconfig.json

Project structure rundown

  • /app/: Contains the main application logic, including pages and routing.
  • /components/: Holds reusable UI components that can be shared across different parts of the application.
  • /domains/: Organizes domain-specific logic, separating different business contexts.
  • /fonts/: Stores font files used throughout the application.
  • /hooks/: Includes custom React hooks to encapsulate logic that can be reused across components.
  • /lib/: Contains utility functions and libraries that assist in various tasks.
  • /prisma/: Manages database schemas and migrations using Prisma ORM.
  • /public/: Houses static files such as images and other assets accessible to the client.
  • /server/: Includes server-side logic and configurations.
  • /store/: Manages application state using state management libraries like Redux.
  • /styles/: Contains global styles and CSS files used in the application.
  • .env: Environment variables configuration file for different environments.
  • components.json: Custom configuration or inventory of components used in the project.
  • next.config.js: Configuration file for customizing the Next.js application behavior.
  • package.json: Lists project dependencies and scripts for managing the project.
  • postcss.config.js: Configuration for PostCSS, used for transforming CSS with JavaScript plugins.
  • tailwind.config.ts: Configuration file for Tailwind CSS, setting up design tokens and themes.
  • tsconfig.json: TypeScript configuration file, specifying compiler options and project settings.

Running the development server

Install dependencies

Navigate to your project’s root directory. Run the following command to install dependencies:

npm i

Config .env file

ℹ️

See the 📄Environment Variables section for all options.

ℹ️

To get the DATABASE_URL, refer to the 📄Create Vercel PostgresSQL Guide.

The .env file contents are as follows, Replace your_db_url with your PostgreSQL database URL:

NEXT_PUBLIC_PROJECT_ID=3d31c4aa12acd88d0b8cad38b0a5686a
NEXT_PUBLIC_POSTS_PAGE_SIZE=20
NEXT_PUBLIC_THEME=penx-theme-minimal
DATABASE_URL="postgresql://your_db_url"

Push db schema

Synchronize your database schema:

npx prisma db push

Start the server

Run the development server:

npm run dev

Access the server at http://localhost:3000.

Continue to the next section for website configuration.

Getting StartedConfiguration