https://github.com/ivanms1/project-shelf
A showcase app for your projects
https://github.com/ivanms1/project-shelf
apollo graphql hacktoberfest nextjs pothos prisma react tailwindcss typescript
Last synced: about 1 year ago
JSON representation
A showcase app for your projects
- Host: GitHub
- URL: https://github.com/ivanms1/project-shelf
- Owner: ivanms1
- Created: 2021-09-04T13:23:10.000Z (over 4 years ago)
- Default Branch: develop
- Last Pushed: 2023-12-01T03:32:33.000Z (over 2 years ago)
- Last Synced: 2025-03-25T00:42:31.357Z (about 1 year ago)
- Topics: apollo, graphql, hacktoberfest, nextjs, pothos, prisma, react, tailwindcss, typescript
- Language: TypeScript
- Homepage: https://www.projectshelf.dev
- Size: 5.84 MB
- Stars: 10
- Watchers: 5
- Forks: 2
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
README
# 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](https://nodejs.org/en/), [Pothos GraphQL](https://pothos-graphql.dev/), [Prisma](https://www.prisma.io/) and [Apollo Server](https://www.apollographql.com/docs/apollo-server/#:~:text=Apollo%20Server%20is%20an%20open,use%20data%20from%20any%20source.)
- Frontend: [React.js](https://reactjs.org/), [Next.js](https://nextjs.org/) and [Apollo Client](https://www.apollographql.com/docs/react/)
## Monorepo Setup
This monorepo contains
- `apps/api`: [Node.js](https://nodejs.org/en/) app, provides all the apis and connects to the database.
- `apps/web`: Main app powered by [Next.js](https://nextjs.org)
- `apps/admin`: [Next.js](https://nextjs.org) 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](https://www.graphql-code-generator.com/) for `web` and `admin` app to consume
## Requirements
- ### General
- **Yarn**
This repository uses [Yarn](https://classic.yarnpkg.com/lang/en/) 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](https://www.docker.com/).
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](https://fly.io/) wich have a a free tier.
- **Cloudinary**
All the images are saved in [Cloudinary](https://cloudinary.com/), 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](https://docs.github.com/en/developers/apps/building-oauth-apps/creating-an-oauth-app) 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`