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 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.
- 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
- Framework: Next.js
- GraphQL server: Apollo Server
- GraphQL client: Apollo Client
- TypeScript typing generator: GraphQL Code Generator
- Authentication: JWT
- File uploads: Multer
- Image processing: Sharp
- Database: PostgreSQL
- ORM: Objection.js
- Query builder: Knex.js
- UI components: Material-UI
- Styling: @emotion/styled
- Forms: Formik
- Form validations: Yup
- Social media share buttons: react-share
- SEO: Next SEO
- Linting: ESLint
- Code Formatting: Prettier
First, we need to install our dependencies:
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:
When the migrations end, we can start the application in development mode with:
Application will start on http://localhost:3000.
GraphQL Playground is on http://localhost:3000/api/graphql.
To create a new migration run:
After that, add your changes to the created migration file and run: