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 ?
GraphQL First This starterkit is built with graphql first approach using the Apollo platform
Includes CI CI is integral part of any project. This starterkit includes
Github Actionsby default. PR's for integration with any other providers are welcome ?
Testing Focused This project uses Jest for testing framework and comes with sample tests which are easy to extend
Please leave a :star: as motivation if you liked the idea :smile:
:rocket: Technologies Used
Here is the folder structure for
backend, it is
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
This workspace package contains the database abstractions. The database stack is PostgreSQL as relational database and Prisma as an ORM, read more about DB package here
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
The schema splits each entity into it's own set of schema to modularize the codebase. The graphql package uses schema stitching and code generators to construct the whole schema.
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
Here is the folder structure for
web, it is a
standard create-react-app using react-app-rewired to override configs without
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 │ ├── layout <---- controls, pure components │ ├── tests │ ├── theme <---- theme config │ ├── pages │ │ └── Home <---- page component │ │ ├── components <---- page specific components │ │ └── hooks <---- page specific custom hooks │ └── utils ├── tests │ ├── db │ └── graphql ├── index.ts └── package.json
? Getting Started
Setting up environment variables
Before getting started, create
.env files at both
backend/.env as well as
.env.template files located in those
I recommend using
yarn instead of
as this project heavily used
Make sure to use your own
DATABASE_URL and not
the default as provided in
developing your own project, as the demo database might be
Feel free to open a new issue if you're facing any problem ?
? How to Contribute
Contributions are welcome as always, before submitting a new PR please make sure to open a new issue so community members can discuss.
Additionally you might find existing open issues which can helps with improvements.
This project follows standard code of conduct so that you can understand what actions will and will not be tolerated.
This project is MIT licensed, as found in the LICENSE