Setting up boiler plates when starting new projects is tedious sometimes and I often found myself setting it up from scratch ?
Hence 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 ?
The 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
All in Typescript
Because TypeScript is awesome, and types are important ?
This starterkit is built with graphql first approach using the Apollo platform
CI is integral part of any project. This starterkit includes
Github Actionsby default. PR's for integration with any other providers are welcome ?
This project uses Jest for testing framework and comes with sample tests which are easy to extend
This starterkit comes with out of the box PWA support
Please leave a :star: as motivation if you liked the idea :smile:
Here's a brief video overview of this project, hope it helps.
Here 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.
backend ├── build ├── config ├── logs ├── packages │ ├── db │ │ └──prisma │ ├── graphql │ │ ├── api │ │ ├── schema │ │ └── types │ └── utils ├── tests │ ├── db │ └── graphql ├── index.ts └── package.json
The GraphQL package is organized as below:
graphql ├── schema │ └── user <---- some entity │ ├── resolvers │ │ ├── types <---- type resolvers │ │ ├── queries <---- query resolvers │ │ └── mutations <---- mutation resolvers │ ├── queries.graphql │ ├── mutations.graphql │ └── types.graphql ├── api │ ├── queries │ └── mutations ├── types <---- graphql types │ ├── schema │ └── resolvers └── index.json
It 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
Read more about GraphQL package here
Web package uses Material UI heavily as it makes theming and customization very easy. PR's for any other UI kit are welcome ?
web ├── build ├── public ├── src │ ├── assets │ ├── config │ ├── constants │ ├── global │ ├── tests │ ├── layout <---- controls, pure components │ ├── theme <---- theme config │ ├── graphql │ │ └── operations.tsx <---- generated graphql operations and types │ ├── pages │ │ └── Home <---- page component │ │ ├── components <---- page specific components │ │ └── hooks <---- page specific custom hooks │ └── utils ├── tests │ ├── db │ └── graphql ├── index.ts └── package.json
Setting up environment variables
Before getting started, create
.env files at both
backend/.env as well as
web/.env following the
.env.template files located in those directories.
I recommend using
yarn instead of
npm as this project heavily uses
Install volta, which should automatically install correct
yarn version when you checkout the repository (check the root package.json for config)
To install dependencies for
backend automatically, a postinstall script has been added in the main
Make sure to use your own
DATABASE_URL and not the default as provided in
.env.template when developing your own project, as the demo database might be changed/deleted anytime
Feel free to open a new issue if you're facing any problem ?
This starterkit uses graphql-code-generator to codegen lot of things like TypeScript types, React Apollo hooks and queries, GraphQL Schema AST etc.
Codegen is also executed in yarn postinstall hook
cd backend yarn generate:graphql
This project is MIT licensed,