Awesome Open Source
Awesome Open Source

fullstack-starterkit

PRs welcome! Twitter: karan_6864

Motivation โญ๏ธ

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

Features

  • 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 Actions by default. PR's for integration with any other providers are welcome ๐Ÿ™Œ

  • Docker Support You can also use docker to develop and run your applications

  • Testing Focused This project uses Jest for testing framework and comes with sample tests which are easy to extend

  • Prisma Prisma is the ORM being used for PostgreSQL. Feel free to submit a PR for any other ORM or drivers you'd like to see here ๐Ÿ˜

  • PWA Support This starterkit comes with out of the box PWA support

Please leave a โญ๏ธ as motivation if you liked the idea ๐Ÿ˜„

๐Ÿš€ Technologies Used

technologies

๐Ÿ“– Contents

Video Overview

Here's a brief video overview of this project, hope it helps.

Full Stack Starterkit Overview

Big thanks to @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

๐Ÿญ Architecture

Backend

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
DB

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

GraphQL

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

Web

Here is the folder structure for web, it is a standard create-react-app using craco to override configs without ejecting

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

๐Ÿƒ Getting Started

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.

Install dependencies

I recommend using yarn instead of npm as this project heavily uses yarn workspaces

Install volta, which should automatically install correct node and yarn version when you checkout the repository (check the root package.json for config)

yarn

To install dependencies for web and backend automatically, a postinstall script has been added in the main package.json

Running web

  • Docker (recommended)
$ cd web
$ yarn dev

Once you're done working, use yarn dev:down command to stop the docker containers.

  • Locally
$ cd web
$ yarn start:web

Running backend

  • Docker (recommended)
$ cd backend
$ yarn dev

Once the container starts, you'll be inside the backend image. Now, simply migrate the db (only first time) and start the development server.

$ yarn migrate
$ yarn start

Once you're done working, exit out from the container and use yarn dev:down command to stop the docker containers.

  • Locally
$ cd backend
$ yarn start

Note: When running locally, you'll be required to run your own instance of postgres.

Running backend-go

If you don't have make installed, commands are available in Makefile.

$ cd backend-go
$ make dev

Now from inside the container, you can run the tests or application like below:

$ make test
$ make run
Feel free to open a new issue if you're facing any problem ๐Ÿ™‹

Codegen

This starterkit uses graphql-code-generator to codegen lot of things like TypeScript types, React Apollo hooks and queries, GraphQL Schema AST etc.

cd backend
yarn generate:graphql
Codegen is also executed in yarn postinstall hook

๐Ÿ‘ 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.

๐Ÿ“„ License

This project is MIT licensed, as found in the LICENSE

Built and maintained with ๐ŸŒฎ by Karan

๐Ÿ’ผ Hire Me | ๐Ÿบ Donate

Alternatives To Fullstack Starterkit
Select To Compare


Alternative Project Comparisons
Related Awesome Lists
Top Programming Languages

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Javascript (1,157,785)ย 
Typescript (306,570)ย 
Reactjs (175,361)ย 
Graphql (16,393)ย 
Stack (15,985)ย 
Schema (14,612)ย 
Orm (6,014)ย 
Starter Kit (4,023)ย 
Prisma (1,963)ย