Full stack Starterkit - GraphQL-first boilerplate that scales
Tags: graphql, react, webdev, beginners
Published: 2020-08-05 11:31:40

Configuration of a boilerplate for your newly started projects is a tedious, repeatable job ... which you can forget about thanks to [@karanpratapsingh](https://github.com/karanpratapsingh), who has made a full-stack boilerplate following some of the best patterns & practices learned from most-popular codebase and developers he has worked with. All that to make it possible to bootstrap your GraphQL-first app in React with just a couple clicks.

No matter if are starting a simple personal project or enterprise app you are getting a scalable full-stack starter kit following good architecture patterns, which is super significant as your project grows.


## Tech stack
 
- **React (with TypeScript)** - the frontend part is powered by React with TypeScript, a JavaScript extension providing types that would save you much time catching errors.
- **GraphQL (with Apollo)** - as already mentioned at the beginning, this is a GraphQL-first approach using most popular GraphQL implementation - Apollo,
- **Prisma** - Prisma is an open-source modern ORM that makes database access easy with an auto-generated query builder. In this starterkit its begin used for PostgreSQL but the out is open for suggestions so if you would see other ORM or drivers here just submit a PR,
- **Jest** - Jest is a [JavaScript-based Testing Framework](https://jestjs.io/) working fine with numerous languages and frameworks, among others, React & TypeScript. The boilerplate comes with sample tests that are easily extendable for future modules as simplicity is one of the Jest's top principles.

![Technological stack of Full Stack Startekit ](https://dev-to-uploads.s3.amazonaws.com/i/f0n6otcyvrqveik1smeo.png)

## Project architecture

The library is using yarn workspaces which makes it easier to split the monorepo into packages responsible for a database connection, GraphQL part etc. It makes it really helpful if you choose to split GraphQL into its own set of microservices. The packages are organized as below:

![Project architecture](https://dev-to-uploads.s3.amazonaws.com/i/qrftcd9xwji9mdvknc0f.png)
##### Source: [karanpratapsingh/fullstack-starterkit](https://github.com/karanpratapsingh/fullstack-starterkit)

## Getting started

If you are ready to start your next GraphQL+React project begin with creating `.env` files at both `backend/.env` as well as `web/.env` following the `.env.template` files located in those directories. The next step would be installing dependencies. The author recommends using `yarn` instead of npm as this boilerplate uses `yarn workspaces` heavily. To run backend & frontend use:
```
yarn start:backend
yarn start:web
```
but make sure to provide your own `DATABASE_URL` rather than default one from `.env.template` as it might be changed or deleted anytime, as mentioned by the library creator. If you like the idea of GraphQL-first full-stack boilerplate please show its maintainers some love and [leave a star](https://github.com/karanpratapsingh/fullstack-starterkit) :)

---

## Speed up your GraphQL schema development

*GraphQL Editor* is a supportive tool for both advanced GraphQL users as well as those taking their first steps with GraphQL APIs. Our all-in-one development environment for GraphQL will help you build, manage & deploy your GraphQL API much faster. **[Try GraphQL Editor for free!](https://graphqleditor.com)**


[![GraphQL Editor](https://dev-to-uploads.s3.amazonaws.com/i/a7qwlawx8v594fs2bq0a.gif)](https://graphqleditor.com/)