Skip to content

Starter.dev: Bootstrap your project with zero configuration!

🔗Starter.dev: Bootstrap your project with zero configuration!

🔗Table of contents

We’re excited to present you with starter.dev, a set of zero-configuration project kits built with your favorite tools. Each kit is configured with the following so you can focus on building features instead of spending time on configuration:

  • State Management
  • Data Fetching
  • Testing
  • Storybook
  • Community standardized ESLint and Prettier

We’re also launching starter.dev showcases which utilizes the kits and demonstrates how to build at-scale applications and go beyond the basic TodoMVC app, though we love a good TodoMVC!

🔗Why Starter Kits?

This Dot Labs engages with its clients to build modern applications, and many of them are requesting greenfield projects using the latest and greatest technologies.

While starting these projects, our architects found that they were repeating a bunch of the same steps each time they needed to start a new one. Most meta frameworks ship with the bare minimum, and don’t include features like testing or Storybook out of the box, and configuring these technologies can be time consuming.

With this challenge in mind, we sought to create zero-config starter templates to help kick start projects. And thus, starter.dev was born!

🔗Why Showcases?

During starter.dev’s development, Minko Gechev from the Angular team approached us about a project to help enhance Angular education tooling. You can learn more about this specific effort in the blog post announcing the GitHub Clone Showcases.

Minko’s idea was to demonstrate building applications that utilize these key features of the Angular framework:

Routing Forms State Management API interactions - REST or GraphQL Authentication

This idea laid the groundwork for many of the starter kits we created. We’ve developed several GitHub Clone showcase to help developers understand how to best utilize the kits, and build at-scale applications that accompany our kits.

🔗Getting Started

Getting started with starter.dev (pun intended) is as simple as running a scaffolding script:

  • Run npx @this-dot/create-starter to run the scaffolding tool
  • Select one of the kits from our library from the CLI
  • Name your project
  • cd into your project directory, install dependencies using the tool of your choice.

After completing these steps, you can start building features in your new project immediately.

🔗What Kits Exist Today?

This Dot is happy to ship starter.dev with the following kits:

  • Angular + Apollo Client + Tailwind CSS
  • Angular + NgRx + SCSS
  • Create React App + RxJS + Styled Components
  • Next.js + TanStack Query (formerly React Query) + Tailwind CSS
  • Remix + GraphQL + Tailwind CSS
  • Vue 3 + Apollo Client + Quasar
  • Qwik + GraphQL + Tailwind CSS
  • SvelteKit + SASS

Each kit ships with the following out-of-the-box:

  • Testing via jest or vitest
  • Storybook
  • ESLint and Prettier Configuration
  • State Management
  • Data Fetching for either REST or GraphQL
  • Some starter components to demonstrate global state management and data fetching

These starter kits don’t ship with E2E testing libraries, such as Cypress or Playwright, for now, because these tools come with amazing out-of-the-box configurations and do not require additional setups. However, the showcases use Cypress tests consistency which you can check out in the showcases repo.

🔗Collaborate with us

Starter.dev began as an internal need, but anyone can benefit from the existence of these kits. While there is a set structure for building out new kits, This Dot welcomes requests for new kits.

We’ll work with you to determine what the structure of your kit should be and then scaffold out all of the issues needed to complete the work. Our team will help build out new issues, but we encourage the community to jump in and help build as well. This is a great opportunity to collaborate with the community as both a learner and a teacher.

At This Dot, two of our guiding principles are: Getting Better Together and Giving Back to the Community. We believe that starter.dev is a perfect opportunity for us to get better through collaborative efforts with community members, and helping the community through what we hope is a great open source resource.

🔗What’s Next?

We want to get this tool into your hands, and improve what exists. Tell us what is working for you and not, and we’ll do our best to address those issues.

Next, we want to expand our library of kits. Tell us what are some kits you would like to see. We’re looking into building out kits for SolidJS and Node backend technologies as part of our next iterations, but we’re sure there other tools people would like to see.

Finally, we’ll be publishing some additional educational materials around some of the decisions and design patterns we’ve chosen for each kit and showcase. We’re excited to share our process with you.

  • This Dot Labs is a development consultancy focused on providing staff augmentation, architectural guidance, and consulting to companies. We help implement and teach modern web best practices with technologies such as React, Angular, Vue, Web Components, GraphQL, Node, and more.*

You might also like

General

Semantic HTML: Why it matters and top tips on how to apply it

General

Getting Started with Git

General

Intro to Google DevTools: Console Panel

General

Intro to Google DevTools: Network Panel