DEV Community

Cover image for Neon OSS Kit: Ship your Next.js apps faster than ever!
Rohith Singh
Rohith Singh

Posted on • Updated on

Neon OSS Kit: Ship your Next.js apps faster than ever!

This is a submission for the Neon Open Source Starter Kit Challenge: Ultimate Starter Kit

My Kit

For the Neon OSS Challenge, I've built a Node.js CLI for shipping Next.js SaaS applications much faster than ever. The primary idea was to build something unique which can handle multiple starter templates at once. Hence, for now the starter kit comes in two flavors:

  • A Next.js project with Drizzle ORM
  • A Next.js project with Prisma :)

Why Neon OSS Starter Kit?

It is a common practice to start a new project by copying and pasting code from a previous project. This is not only time-consuming but also error-prone. The Neon OSS Starter Kit provides a well-documented, easy-to-use, and simple starting point for building your SaaS projects with Neon.

The starter kit is not just about setting up a simple database connected to the frontend; you can even use the power of machine learning with Neon as a Vector database, Axios for making server side calls. Learn more about these advanced features from the Neon OSS Kit docs page.

Tools and Features:

The starter kit comes with a bunch of pre-configured setups that allow you to start building your project without any additional configuration. Some of the major features include:

  • Neon (Database)
  • Clerk (Authentication)
  • Prisma/Drizzle (ORM tools)
  • Axios (A promise-based HTTP Client for node.js and the browser)
  • A simple and customizable frontend powered by React.js, Next.js, ShadcnUI, and TailwindCSS.

To scaffold the Neon OSS Starter Kit, you can run the following command:



npx @rohittcodes/neon-osskit@latest


Enter fullscreen mode Exit fullscreen mode

Note: This command will create a new Next.js project with Prisma ORM by default. You can explicitly provide other configurations (Drizzle/Prisma for now) by including drizzle or prisma at the end of the command.


npx @rohittcodes/neon-osskit@latest drizzle


**Preview**

![Landing page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3b36opy9d79z712f7na5.png)

![Dashboard page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2ymq4yefzd9i6714h7xl.png)

## Link to Kit
As mentioned above, the starter kit is divided into 3 individual repositories for now, and is documented with a [docs](https://github.com/rohittcodes/neon-osskit) repo which is the main source for any query related stuff.
- Then comes the Node.js [CLI](https://github.com/RohittCodes/neon-osskit-cli) repository for the starter kit, which is powered by 2 individual templates:
  - [Prisma](https://github.com/RohittCodes/neon-osskit-prisma): Prisma is a modern database toolkit that makes database access easy with type-safe database access and declarative data modeling.
  - [Drizzle](https://github.com/RohittCodes/neon-osskit-drizzle): Drizzle is a lightweight ORM for Node.js that provides a simple and intuitive API for interacting with databases.

Further moving on, the focus will be to turn these repos into a monorepo and maintain all the templates at a single source. And again, You can find the documentation here: https://osskit-neon.vercel.app

GitHub logo RohittCodes / neon-osskit

dev.to Neon-oss challenge winner. Neon OSS Kit is a collection of tools and services that help you build and scale your applications with Neon.

Neon OSS Starter Kit Documentation

Welcome to the official documentation for the Neon OSS Starter Kit. This documentation will guide you through the installation, setup, and usage of the Neon OSS Starter Kit.

Live Documentation

landing page

Creating a new project using the Neon OSS Starter Kit

To create a new project using the Neon OSS Starter Kit, you can use the following command:

npx @rohittcodes/neon-osskit@latest
Enter fullscreen mode Exit fullscreen mode

Note: This command will create a new next project with Prisma ORM by default.

To create a new project with drizzle, you can use the following command:

npx @rohittcodes/neon-osskit@latest drizzle
Enter fullscreen mode Exit fullscreen mode

for prisma again

npx @rohittcodes/neon-osskit@latest prisma
Enter fullscreen mode Exit fullscreen mode

Further Steps

After creating a new project using the Neon OSS Starter Kit, you can follow the steps below to get started:

  1. Add your environment variables to the .env file
DATABASE_URL="your-neon-database-url"
 
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your-clerk-publishable-key
CLERK_SECRET_KEY=your-clerk-secret-key
 
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
  1. Delete the .git folder and run git init to initialize a new git repository for…

Your Journey

Developing applications and tools meant for better utilization is what drives me, and developing this Node.js CLI was the first of its kind. I've been working on full-stack projects for the past year, but this challenge gave me the opportunity to build something I've dreamt of since my early days. Although the project isn't fully complete yet, I'll push myself to add more features to it and make it a monorepo as soon as possible.

The journey was quite hectic, but now that it's done, I'll be chilling for a little time. Why not contribute to some cool open-source projects after a little break? The official documentation provided a lot of help, which made the game easier. However, the idea wasn't just to build a CLI for only 2 templates, but I started it a little late.

Nevertheless, the journey was great, and I learned a lot from it.

Contributors

If you're an open source contributor, and would like to contribute to the documentation, please feel free to drop by and raise some issues + PRs. Thanks in advance😁.

<!-- Team Submissions: Please pick one member to publish the submission and credit teammates by listing their DEV usernames directly in the body of the post. -->

<!-- Don't forget to add a cover image (if you want). -->

<!-- Thanks for participating! -->

Enter fullscreen mode Exit fullscreen mode

Top comments (0)