{"id":13727172,"url":"https://github.com/onderonur/post-gallery","last_synced_at":"2026-04-04T18:55:48.009Z","repository":{"id":52941000,"uuid":"234159881","full_name":"onderonur/post-gallery","owner":"onderonur","description":"Full stack GraphQL web application that implements basic features of 9GAG. Built w/ TypeScript, Next.js, Apollo Server, Apollo Client, PostgreSQL","archived":false,"fork":false,"pushed_at":"2024-01-07T13:07:58.000Z","size":1031,"stargazers_count":30,"open_issues_count":0,"forks_count":4,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-11-14T17:48:02.486Z","etag":null,"topics":["9gag","apollo-client","apollo-server","graphql","nextjs","postgresql","react","reactjs","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/onderonur.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2020-01-15T19:48:04.000Z","updated_at":"2024-05-14T05:35:52.000Z","dependencies_parsed_at":"2024-01-06T07:55:54.786Z","dependency_job_id":"9512d728-f2fa-4294-9158-889b8fb99c75","html_url":"https://github.com/onderonur/post-gallery","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/onderonur%2Fpost-gallery","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/onderonur%2Fpost-gallery/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/onderonur%2Fpost-gallery/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/onderonur%2Fpost-gallery/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/onderonur","download_url":"https://codeload.github.com/onderonur/post-gallery/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252965223,"owners_count":21832841,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["9gag","apollo-client","apollo-server","graphql","nextjs","postgresql","react","reactjs","typescript"],"created_at":"2024-08-03T01:03:42.697Z","updated_at":"2026-04-04T18:55:47.968Z","avatar_url":"https://github.com/onderonur.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"## Post Gallery\n\nPost 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.\n\nIt has no custom server setup. Only the serverless functions of Next.js are used. This has resulted in a very simple, yet powerful structure.\n\nThe 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.  \n\nIt 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.\n\nYou can find a list of recommended extensions in `.vscode/extensions.json`.\n\n### Features\n\n- Creating posts\n- Category based post listing\n- Comments (with linkifying URLs)\n- Reactions\n- Social logins (with Google and Facebook)\n- Linking social accounts to a single account\n- Simple session management\n- Social media share buttons\n- Basic SEO optimization\n- CSRF protection\n- GraphQL Query Depth Limit\n- Rate Limiter\n\n### Stack\n\n- Framework: [Next.js](https://nextjs.org/)\n- GraphQL server: [Apollo Server](https://www.apollographql.com/docs/apollo-server/)\n- GraphQL client: [Apollo Client](https://www.apollographql.com/docs/react/)\n- TypeScript typing generator: [GraphQL Code Generator](https://graphql-code-generator.com/)\n- Authentication: [JWT](https://github.com/auth0/node-jsonwebtoken)\n- File uploads: [Multer](https://github.com/expressjs/multer)\n- Image processing: [Sharp](https://github.com/lovell/sharp)\n- Database: [PostgreSQL](https://www.postgresql.org/)\n- ORM: [Objection.js](https://vincit.github.io/objection.js/)\n- Query builder: [Knex.js](http://knexjs.org/)\n- UI components: [Material-UI](https://material-ui.com/)\n- Styling: [@emotion/styled](https://emotion.sh/docs/styled)\n- Forms: [Formik](https://jaredpalmer.com/formik)\n- Form validations: [Yup](https://github.com/jquense/yup)\n- Social media share buttons: [react-share](https://github.com/nygardk/react-share)\n- SEO: [Next SEO](https://github.com/garmeeh/next-seo)\n- Linting: [ESLint](https://eslint.org/)\n- Code Formatting: [Prettier](https://prettier.io/)\n\n### Screenshots\n\n\u003cimg  src=\"/screenshots/posts.jpg\"  alt=\"Posts feed page\"/\u003e\n\u003cimg  src=\"/screenshots/post.jpg\"  alt=\"Post viewing page\"/\u003e\n\u003cimg  src=\"/screenshots/creating-post.jpg\"  alt=\"Creating post\"/\u003e\n\u003cimg  src=\"/screenshots/sessions.jpg\"  alt=\"Session management page\"/\u003e\n\n### Development\n\nFirst, we need to install our dependencies:\n\n#### `npm install`\n\nAfter that, we need to set a value to all the empty keys (`DB_HOST`, `DB_USER`, `DB_PASSWORD` etc) in `.env` file.\nThen, we create a database named `post_gallery` in PostgreSQL.\nLastly, we run the migrations:\n\n#### `npm run migrate:latest`\n\nWhen the migrations end, we can start the application in development mode with:\n\n#### `npm run dev`\n\nApplication will start on `http://localhost:3000`.  \nGraphQL Playground is on `http://localhost:3000/api/graphql`.\n\n### Migrations\n\nTo create a new migration run:\n#### `npm run migrate:make -- \u003cYOUR_MIGRATION_NAME\u003e`\n\nAfter that, add your changes to the created migration file and run:\n#### `npm run migrate:latest`\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fonderonur%2Fpost-gallery","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fonderonur%2Fpost-gallery","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fonderonur%2Fpost-gallery/lists"}