Full stack Starterkit - GraphQL-first boilerplate that scales

#graphql #react #webdev #beginners

Configuration of a boilerplate for your newly started projects is a tedious, repeatable job ... which you can forget about thanks to @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 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.

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:

Source: 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 :)

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!