{"id":13599674,"url":"https://github.com/karanpratapsingh/fullstack-starterkit","last_synced_at":"2025-04-12T18:46:07.555Z","repository":{"id":37393967,"uuid":"275319593","full_name":"karanpratapsingh/fullstack-starterkit","owner":"karanpratapsingh","description":"GraphQL first full-stack starter kit with Node, React. Powered by TypeScript","archived":false,"fork":false,"pushed_at":"2021-11-07T12:11:32.000Z","size":2647,"stargazers_count":1173,"open_issues_count":1,"forks_count":101,"subscribers_count":37,"default_branch":"master","last_synced_at":"2025-04-03T21:12:24.289Z","etag":null,"topics":["architecture","graphql","javascript","react","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/karanpratapsingh.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-06-27T07:12:18.000Z","updated_at":"2025-03-31T03:30:24.000Z","dependencies_parsed_at":"2022-09-04T15:04:39.926Z","dependency_job_id":null,"html_url":"https://github.com/karanpratapsingh/fullstack-starterkit","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/karanpratapsingh%2Ffullstack-starterkit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/karanpratapsingh%2Ffullstack-starterkit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/karanpratapsingh%2Ffullstack-starterkit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/karanpratapsingh%2Ffullstack-starterkit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/karanpratapsingh","download_url":"https://codeload.github.com/karanpratapsingh/fullstack-starterkit/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248617502,"owners_count":21134191,"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":["architecture","graphql","javascript","react","typescript"],"created_at":"2024-08-01T17:01:08.853Z","updated_at":"2025-04-12T18:46:07.534Z","avatar_url":"https://github.com/karanpratapsingh.png","language":"TypeScript","readme":"![fullstack-starterkit](https://user-images.githubusercontent.com/29705703/86912939-7b0e7e00-c13b-11ea-950b-200a4529ae6b.png)\n\n\u003cp align=\"center\"\u003e\n\u003cimg src=\"https://img.shields.io/codacy/grade/a1a0da0231dc4759aad40b42cec607f5?style=for-the-badge\" /\u003e\n\u003cimg src=\"https://img.shields.io/badge/License-MIT-red.svg?style=for-the-badge\" /\u003e\n\u003cimg src=\"https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=for-the-badge\" alt=\"PRs welcome!\" /\u003e\n\u003cimg src=\"https://img.shields.io/github/workflow/status/karanpratapsingh/fullstack-starterkit/CI?style=for-the-badge\" /\u003e\n\u003cimg alt=\"Twitter: karan_6864\" src=\"https://img.shields.io/twitter/follow/karan_6864.svg?style=for-the-badge\u0026logo=TWITTER\u0026logoColor=FFFFFF\u0026labelColor=00aced\u0026logoWidth=20\u0026color=lightgray\" target=\"_blank\" /\u003e\n\n### Motivation :star:\n\nSetting up boiler plates when starting new projects is tedious sometimes and I often found myself setting it up from scratch 🥱\n\nHence I made this starterkit following some of the best patterns and practices I learnt from some of the larger codebase and fantastic developers I've had a chance to work with 🙌\n\nThe main purpose of this repository is to provide a scalable \"batteries included\" full stack starterkit which follows good architecture patterns (might be opinionated) and code decoupling which becomes significant as the project grows or new developers are onboarded\n\n#### Features\n\n- **All in Typescript**\n  Because TypeScript is awesome, and types are important 😃\n\n- **GraphQL First**\n  This starterkit is built with graphql first approach using the [Apollo](https://www.apollographql.com/) platform \n\n- **Includes CI** \n  CI is integral part of any project. This starterkit includes `Github Actions` by default. PR's for integration with any other providers are welcome 🙌\n\n- **Docker Support**\n  You can also use docker to develop and run your applications\n\n- **Testing Focused**\n  This project uses [Jest](https://jestjs.io/) for testing framework and comes with sample tests which are easy to extend\n  \n- **Prisma**\n  [Prisma](https://www.prisma.io/) is the ORM being used for [PostgreSQL](https://www.postgresql.org/). Feel free to submit a PR for any other ORM or drivers you'd like to see here 😁\n\n- **PWA Support**\n  This starterkit comes with out of the box PWA support\n\n\n**Please leave a :star: as motivation if you liked the idea :smile:**\n\n### :rocket: Technologies Used\n\n\u003cimg src=\"https://user-images.githubusercontent.com/29705703/140613353-47b10569-288e-49af-995e-e7fb89fe5566.png\" alt='technologies' width='80%'\u003e\n\n### 📖 Contents\n- [Architecture](#architecture)\n  - [Backend](#backend)\n  - [Web](#web)\n- [Getting started](#getting-started)\n- [How to Contribute](#how-to-contribute)\n- [License](#license)\n\n### Video Overview\n\nHere's a brief video overview of this project, hope it helps.\n\n[![Full Stack Starterkit Overview](http://img.youtube.com/vi/TgtUhEnW8O4/0.jpg)](http://www.youtube.com/watch?v=TgtUhEnW8O4 \"Full Stack Starterkit Overview\")\n\n\u003ci\u003eBig thanks to [@mikestaub](https://twitter.com/mikestaub) for mentoring me on the lot of the ideas you will come across in this repository. Checkout how he's changing social media with [Peapods](https://peapods.com)\u003c/i\u003e\n\n### 🏭 \u003ca id=\"architecture\" style=\"color: black;\"\u003eArchitecture\u003c/a\u003e\n\n#### \u003ca id=\"backend\" style=\"color: black;\"\u003eBackend\u003c/a\u003e\n\nHere is the folder structure for `backend`, it is using `yarn workspaces` which helps us split our  monorepo into packages such as DB, GraphQL. Which if required can be made into their own micro services.\n\n``` \nbackend\n├── build\n├── config\n├── logs\n├── packages\n│   ├── db\n│   │   └──prisma\n│   ├── graphql\n│   │   ├── api\n│   │   ├── schema\n│   │   └── types\n│   └── utils\n├── tests\n│   ├── db\n│   └── graphql\n├── index.ts\n└── package.json\n```\n\n##### DB\n\nThis workspace package contains the database abstractions. The database stack is [PostgreSQL](https://www.postgresql.org/) as relational database and [Prisma](https://www.prisma.io/) as an ORM, read more about DB package [here](./backend/packages/db/README.md)\n\n##### GraphQL\n\nThe GraphQL package is organized as below:\n``` \ngraphql\n├── schema\n│   └── user                \u003c---- some entity\n│       ├── resolvers \n│       │     ├── types     \u003c---- type resolvers\n│       │     ├── queries   \u003c---- query resolvers\n│       │     └── mutations \u003c---- mutation resolvers\n│       ├── queries.graphql\n│       ├── mutations.graphql\n│       └── types.graphql\n├── api\n│   ├── queries             \n│   └── mutations\n├── types                   \u003c---- graphql types\n│   ├── schema           \n│   └── resolvers\n└── index.json\n```\n\nThe schema splits each entity into it's own set of schema to modularize the codebase. The graphql package uses [schema stitching](https://www.apollographql.com/docs/apollo-server/features/schema-stitching) and [code generators](https://graphql-code-generator.com/) to construct the whole schema.\n\nIt is organized so because if you choose to split graphql into it's own set of microservices later, it should be relatively easier to do so as this should be easy to integrate with [Apollo Federation](https://www.apollographql.com/docs/apollo-server/federation/introduction)\n\nRead more about GraphQL package [here](./backend/packages/graphql/README.md)\n\n#### \u003ca id='web' style=\"color: black;\"\u003eWeb\u003c/a\u003e\nHere is the folder structure for `web`, it is a standard [create-react-app](https://create-react-app.dev/) using [craco](https://github.com/gsoft-inc/craco) to override configs without ejecting\n\nWeb package uses [Material UI](https://material-ui.com/) heavily as it makes theming and customization very easy. PR's for any other UI kit are welcome 😃\n\n``` \nweb\n├── build\n├── public\n├── src\n│   ├── assets\n│   ├── config\n│   ├── constants\n│   ├── global\n│   ├── tests\n│   ├── layout     \u003c---- controls, pure components\n│   ├── theme      \u003c---- theme config\n│   ├── graphql\n│   │   └── operations.tsx     \u003c---- generated graphql operations and types\n│   ├── pages\n│   │   └──  Home   \u003c---- page component\n│   │        ├── components \u003c---- page specific components\n│   │        └── hooks      \u003c---- page specific custom hooks   \n│   └── utils\n├── tests\n│   ├── db\n│   └── graphql\n├── index.ts\n└── package.json\n```\n\n\n### 🏃 \u003ca id=\"getting-started\" style=\"color: black;\"\u003eGetting Started\u003c/a\u003e\n\n**Setting up environment variables**\n\nBefore getting started, create `.env` files at both `backend/.env` as well as `web/.env` following the `.env.template` files located in those directories. \n\n**Install dependencies**\n\nI recommend using `yarn` instead of `npm` as this project heavily uses `yarn workspaces`\n\nInstall [volta](https://docs.volta.sh/guide/getting-started), which should automatically install correct `node` and `yarn` version when you checkout the repository (check the root package.json for config)\n\n```\nyarn\n```\n\n\u003ci\u003eTo install dependencies for `web` and `backend` automatically, a postinstall script has been added in the main `package.json`\u003c/i\u003e\n\n**Running web**\n\n- Docker (recommended)\n\n```\n$ cd web\n$ yarn dev\n```\n\nOnce you're done working, use `yarn dev:down` command to stop the docker containers.\n\n- Locally\n\n```\n$ cd web\n$ yarn start:web\n```\n\n**Running backend**\n\n- Docker (recommended)\n\n```\n$ cd backend\n$ yarn dev\n```\n\nOnce the container starts, you'll be inside the backend image. Now, simply migrate the db (only first time) and start the development server.\n\n```\n$ yarn migrate\n$ yarn start\n```\n\nOnce you're done working, exit out from the container and use `yarn dev:down` command to stop the docker containers.\n\n- Locally\n\n```\n$ cd backend\n$ yarn start\n```\n\n_Note: When running locally, you'll be required to run your own instance of postgres._\n\n**Running backend-go**\n\nIf you don't have [`make`](https://en.wikipedia.org/wiki/Make_(software)) installed, commands are available in `Makefile`.\n\n```\n$ cd backend-go\n$ make dev\n```\n\nNow from inside the container, you can run the tests or application like below:\n\n```\n$ make test\n$ make run\n```\n\n\u003ci\u003e\nFeel free to open a new issue if you're facing any problem 🙋\n\u003c/i\u003e\n\n**Codegen**\n\nThis starterkit uses [graphql-code-generator](https://github.com/dotansimha/graphql-code-generator) to codegen lot of things like TypeScript types, React Apollo hooks and queries, GraphQL Schema AST etc.\n\n```\ncd backend\nyarn generate:graphql\n```\n\n\u003ci\u003e\nCodegen is also executed in yarn postinstall hook\n\u003c/i\u003e\n\n\n### 👏 \u003ca id=\"how-to-contribute\" style=\"color: black;\"\u003eHow to Contribute\u003c/a\u003e\n\nContributions are welcome as always, before submitting a new PR please make sure to open a new\nissue so community members can discuss.\n\nAdditionally you might find existing open issues which can helps with improvements.\n\nThis project follows standard [code of conduct](/CODE_OF_CONDUCT.md) so that you can understand what actions will and will not be tolerated.\n\n### 📄 \u003ca id=\"license\" style=\"color: black;\"\u003eLicense\u003c/a\u003e\n\nThis project is MIT licensed, as found in the [LICENSE](/LICENSE)\n\n\u003cp\u003e\n  \u003cp  style=\"margin: 0\"\u003e  \n    Built and maintained with 🌮 by \u003ca href=\"https://karanpratapsingh.com\"\u003eKaran\u003c/a\u003e\n  \u003c/p\u003e\n  \u003cp style=\"margin: 0px 10px;\"\u003e  \n    \u003ca href=\"mailto:contact@karanpratapsingh.com\"\u003e💼 Hire Me\u003c/a\u003e | \n    \u003ca href=\"https://www.paypal.me/karanpratapsingh\"\u003e🍺 Donate\u003c/a\u003e \n  \u003c/p\u003e\n\u003c/p\u003e \n","funding_links":["https://www.paypal.me/karanpratapsingh"],"categories":["TypeScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkaranpratapsingh%2Ffullstack-starterkit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkaranpratapsingh%2Ffullstack-starterkit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkaranpratapsingh%2Ffullstack-starterkit/lists"}