Project Shelf

Description

Project Shelf aims to give a space for developers to showcase their projects, get feedback and connect with other developers.

Technology stack

• Backend: Node.js, Pothos GraphQL, Prisma and Apollo Server
• Frontend: React.js, Next.js and Apollo Client

Monorepo Setup

This monorepo contains

• apps/api: Node.js app, provides all the apis and connects to the database.
• apps/web: Main app powered by Next.js
• apps/admin: Next.js app for admin purposes
• packages/ui: Internal component library used by both web and admin applications
• packages/apollo-hooks: Libary of apollo-graphql hooks generated by GraphQL Code Generator for web and admin app to consume

Requirements

• General

  • Yarn

  This repository uses Yarn as a package manager.

• Backend

  • PostgreSQL Database

    To run the backend, a connection to a database is needed. The easiest way to run a Postgres DB locally is via Docker.

    Once you have Docker installed run this command:

    docker run --detach --publish 5432:5432 -e POSTGRES_PASSWORD=postgres --name project-shelf postgres:10.12
    

    Another alternative is running a PostgreSQL DB in the cloud with services like fly.io wich have a a free tier.

  • Cloudinary

    All the images are saved in Cloudinary, the free tier is more than enough for development.

  • Enviroment Variables

    Inside the apps/api directory

    # Database connection string, if running with docker it would be:
    DATABASE_URL="postgresql://postgres:postgres@localhost:5432/project-shelf"
    # Direct url, if running with docker it would be:
    DIRECT_URL="postgresql://postgres:postgres@localhost:5432/project-shelf"
    # Origins, you can use the default one
    ORIGINS=["http://localhost:3000", "http://localhost:4000"]
    # Cloudinary connection string, you can get it from your cloudinary account
    CLOUDINARY_URL="Your Cloudinary key goes here"
    # JWT secret, any random string, only for development
    JWT_SECRET="Any random string, only for development"
    # Server url, you can use the default one
    SERVER_URL="http://localhost"

• Frontend

  • Github OAuth Github is being used as an auth provider, you will need to create an OAuth app on your github account with these settings:

    

  • Enviroment Variables

    Inside the apps/web and apps/admin directories

    # Github client id, you can get it from your github account
    GITHUB_CLIENT_ID="your oatuh github client id"
    # Github client secret, you can get it from your github account
    GITHUB_CLIENT_SECRET="your oatuh github client secret"
    # JWT secret, any random string, only for development
    JWT_SECRET="some random string, only for development"
    # Next auth url, you can use the default one
    NEXTAUTH_URL="http://localhost:3000"
    # Next public server url, you can use the default one
    NEXT_PUBLIC_SERVER_URL="http://localhost:8080/graphql"
    NEXT_PUBLIC_CLOUD_NAME="cloudinary id"

Running the app

• General

  • Build the hooks library

    yarn build:hooks
    

  • Install all dependencies, on the root folder run

    yarn install
    

• Backend

  Only when running the app for the first time

  • Make sure you cd into the project-shelf/apps/api directory
  • Generate data source client code with prisma

  npx prisma generate
  

  • Initialize Database

  npx prisma migrate dev
  

  After

  • Run app

  yarn dev:api
  

• Frontend

  • Start the app

    yarn dev:web
    

  • (optional) inside the apps/web, use the yarn generate cli command to generate templates for pages and components.

After changing schema

• To update the schema on the frontend yarn generate:hooks yarn build:hooks

Running with Docker

The easiest way to run the entire application is using Docker. This setup includes all services in a single container plus a PostgreSQL database.

Quick Start

# Start everything with setup script (recommended)
./scripts/docker-setup.sh

# Or use Make commands
make dev-build

# Or use Docker Compose directly
docker compose up -d --build

Running After Setup

Once you've completed the initial setup, you can start the app with:

# Start all services
docker compose up -d

# Or use Make
make dev

# Stop services
docker compose down
# Or
make dev-down

Services

All services run in one container:

• Web Frontend: http://localhost:3000
• Admin Dashboard: http://localhost:4000
• API: http://localhost:8080
• Database: localhost:5432

Useful Commands

# View logs
make dev-logs

# Stop services
make dev-down

# Database commands
make db-studio    # Open Prisma Studio
make db-migrate   # Run migrations
make db-seed      # Seed database

# Clean up
make clean

What's Included

The Docker setup includes:

• ✅ All monorepo packages (ui, apollo-hooks, etc.)
• ✅ All apps (web, admin, api)
• ✅ Hot reloading for all services
• ✅ Package building and linking
• ✅ Automatic database setup (migrations and seeding)

Troubleshooting

# Rebuild everything
docker compose build --no-cache

# View container logs
docker compose logs -f app

# Access container shell
docker compose exec app sh