Starter.dev is an open source community resource developed by This Dot Labs that provides code starter kits in a variety of web technologies, including React, Angular, Vue, etc. with the hope of enabling developers to bootstrap their projects quickly without having to spend time configuring tooling. We ship starter kits with showcases to demonstrate how to best utilize these kits and structure more complex projects.
We’re excited to announce a new kit and showcase featuring Next.js, React Query, and Tailwind CSS. This kit features some of the most popular tools available in the React ecosystem.
We wanted to provide our team and the community with a starter kit that uses these libraries and that also comes setup and configured with all of the common tools and utilities that we use when building a new website or app.
These include Jest for unit and component testing, Mock Service Worker for network request mocking, Storybook for a component library, ESlint for linting, and Prettier.
It can take a substantial amount of time, when starting a new project, to get all these tools configured properly. So, it was important to us when designing these kits to make them as effortless as possible for users. We’ve started to use this kit at This Dot Labs where it has saved us a lot of time on our projects already. We’re excited to make this kit available to the community as well.
The easiest way to get started on your new project with next-react-query-tailwind is to install it via the starter.dev CLI: npx @this-dot/create-starter. This will open a prompt that lists the available starter.dev kits. Select next-react-query-tailwind, provide the name of your project, and the CLI will download the kit for local development. Once you have it installed and cd into your new project directory, it’s as simple as running yarn (or your package manager of choice) to install the packages, and yarn dev to start the Next.JS development server. For more detailed documentation, see the kits README.md file.
The starter kit itself is lean. The goal is to provide the things you need for your project and then get out of the way. It includes a Counter component with a co-located component test and a Greeting component that makes an API request with React Query also with a co-located test file. These are just a couple of basic examples to get you started and to help demonstrate how you can utilize testing and Storybook out of the box.
If you’re new to this stack or just want to see what a full-scale application built on it looks like, we’ve got you covered. Along with this awesome starter kit, we are also releasing a demo application that we built with it to really show off how you can use it and some good patterns for developing your apps with the tools available in the starter kit. Our demo app is a GitHub clone and it is available on GitHub and viewed at http://next-react-query-tailwind.starter.dev/.
For the demo app, we combined React Query with GraphQL using graphql-code-generator which generates TypeScript types for all of our queries in the app. React Query makes the experience snappy by caching the results from all of our GraphQL queries while we use the app. We use Mock Service Worker to mock all of the queries from our application so it can run offline, in Storybook, or in our component tests.
We built our GitHub clone using an MVC style architecture in React where we have specific components responsible for fetching and marshaling our data SomeComponent.data, and a view component responsible for rendering it SomeComponent.view. Our Tailwind styles are defined in CSS modules to keep our markup clean and uncluttered. We have our Storybook stories, component tests, and mock api responses co-located with our components in a single directory ie: SomeComponent -> SomeComponent.stories, SomeComponent.test.tsx etc.
Here’s an example of the files included in our GitHub clones FileViewer component:
These patterns and structures we’ve used throughout our demo app worked really well for us. Everything is nicely organized making it very easy for anyone to jump in and contribute to the project. Remember that this is just an example of how you can use the tools in this starter kit to build out your next (pun intended) application – but our starter kit leaves the door open for you to structure in whatever way fits best with your project’s needs.
Have a request or a question about a starter.dev project? Reach out in the issues to make your requests or ask us your questions. The project is also 100% open sourced so feel free to hop in and code with us!
