https://github.com/onderonur/post-gallery

Full stack GraphQL web application that implements basic features of 9GAG. Built w/ TypeScript, Next.js, Apollo Server, Apollo Client, PostgreSQL
https://github.com/onderonur/post-gallery

9gag apollo-client apollo-server graphql nextjs postgresql react reactjs typescript

Last synced: 3 months ago
JSON representation

Full stack GraphQL web application that implements basic features of 9GAG. Built w/ TypeScript, Next.js, Apollo Server, Apollo Client, PostgreSQL

• Host: GitHub
• URL: https://github.com/onderonur/post-gallery
• Owner: onderonur
• Created: 2020-01-15T19:48:04.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2024-01-07T13:07:58.000Z (10 months ago)
• Last Synced: 2024-05-12T01:34:53.466Z (6 months ago)
• Topics: 9gag, apollo-client, apollo-server, graphql, nextjs, postgresql, react, reactjs, typescript
• Language: TypeScript
• Homepage:
• Size: 1010 KB
• Stars: 29
• Watchers: 2
• Forks: 4
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-list - post-gallery

README

        
## Post Gallery

Post Gallery is a fullstack GraphQL web application which started as a basic 9GAG clone. It implements the core features of 9GAG like creating posts, commenting and reactions. All the requests are handled by a GraphQL server built with Apollo. Only file uploads and authentication are excluded from GraphQL and implemented as simple REST endpoints.

It has no custom server setup. Only the serverless functions of Next.js are used. This has resulted in a very simple, yet powerful structure.

The project has changed a lot along the way. Trials were carried out with different ORMs like Sequelize, TypeORM, Prisma 2 and Objection/Knex. API and frontend were two separate projects at first, but they were combined after a while as an experiment. Even though it's much cleaner to create separate projects for various reasons, this structure also works pretty well.  

It also has the settings for generating all the typings and custom @apollo/client hooks with `graphql-code-generator` based on the GraphQL schema. When this is used with VSCode [Apollo extension](https://www.apollographql.com/docs/devtools/editor-plugins/) which has features like autocompletion and showing warnings/errors based on the schema, it was just so easy to write all the queries/mutations/fragments.

You can find a list of recommended extensions in `.vscode/extensions.json`.

### Features

- Creating posts

- Category based post listing

- Comments (with linkifying URLs)

- Reactions

- Social logins (with Google and Facebook)

- Linking social accounts to a single account

- Simple session management

- Social media share buttons

- Basic SEO optimization

- CSRF protection

- GraphQL Query Depth Limit

- Rate Limiter

### Stack

- Framework: [Next.js](https://nextjs.org/)

- GraphQL server: [Apollo Server](https://www.apollographql.com/docs/apollo-server/)

- GraphQL client: [Apollo Client](https://www.apollographql.com/docs/react/)

- TypeScript typing generator: [GraphQL Code Generator](https://graphql-code-generator.com/)

- Authentication: [JWT](https://github.com/auth0/node-jsonwebtoken)

- File uploads: [Multer](https://github.com/expressjs/multer)

- Image processing: [Sharp](https://github.com/lovell/sharp)

- Database: [PostgreSQL](https://www.postgresql.org/)

- ORM: [Objection.js](https://vincit.github.io/objection.js/)

- Query builder: [Knex.js](http://knexjs.org/)

- UI components: [Material-UI](https://material-ui.com/)

- Styling: [@emotion/styled](https://emotion.sh/docs/styled)

- Forms: [Formik](https://jaredpalmer.com/formik)

- Form validations: [Yup](https://github.com/jquense/yup)

- Social media share buttons: [react-share](https://github.com/nygardk/react-share)

- SEO: [Next SEO](https://github.com/garmeeh/next-seo)

- Linting: [ESLint](https://eslint.org/)

- Code Formatting: [Prettier](https://prettier.io/)

### Screenshots









### Development

First, we need to install our dependencies:

#### `npm install`

After that, we need to set a value to all the empty keys (`DB_HOST`, `DB_USER`, `DB_PASSWORD` etc) in `.env` file.

Then, we create a database named `post_gallery` in PostgreSQL.

Lastly, we run the migrations:

#### `npm run migrate:latest`

When the migrations end, we can start the application in development mode with:

#### `npm run dev`

Application will start on `http://localhost:3000`.  

GraphQL Playground is on `http://localhost:3000/api/graphql`.

### Migrations

To create a new migration run:

#### `npm run migrate:make -- `

After that, add your changes to the created migration file and run:

#### `npm run migrate:latest`