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_URL="database url, if running with docker it would be: postgresql://postgres:postgres@localhost:5432/project-shelf"
    CLOUDINARY_URL="Your Cloudinary key goes here"
    JWT_SECRET="Any random string, only for development"
    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="your oatuh github client id"
    GITHUB_CLIENT_SECRET="your oatuh github client secret"
    JWT_SECRET="some random string, only for development"
    NEXTAUTH_URL="http://localhost:3000"
    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