Cukito starter

Description

My personal starter project for all my SaaS as I like the tech stack I use and I want to have a consistent way of starting new projects.

Principles

• Simplicity: Keep it simple, stupid.
• Consistency: Use the same tech stack for all projects.
• Quality: Write clean, maintainable code.
• Speed: Develop fast, deploy fast.
• Security: Keep it secure.
• Free at start: Use free services until you need to scale.
• Automate: Automate everything.
• Mutability: Be ready to change to other tech stack withouth having to redo it again.

Getting started

Prerequisites

• Node.js (v20 or higher) for running JavaScript
• pnpm, our recommended package manager

Installation

1. Clone the repository

   git clone https://github.com/TheCukitoDev/starter.git

   or if you use the GitHub CLI

   gh repo clone TheCukitoDev/starter

2. Install the dependencies

   pnpm install

3. Start the development server

   pnpm run dev

4. Open the browser and go to http://localhost:3000 or if you specified a PORT in the .env file, go to http://localhost:${PORT}

Configuration

Open the .env file and change the values to your own. You can check the .env.example file for the default values.

Or if you want to use Doppler, you must identify yourself with Doppler. Please follow the instructions here to install Doppler. You can then run the following command to get the secrets from Doppler.

    doppler setup 

Then you can run the following command to run commands using.

    doppler run --command "${Your command here}"

If you have the Doppler Team Plan, you can use --watch flag to watch for changes in the secrets.

    doppler run --watch --command "${Your command here}"

And on deployment, make sure you use the deploy guide for Doppler here. Or you can just copy the secrets from Doppler and paste them in the .env file.

Features

• Authentication: Authentication with 2FA, magic links, SSO, username and password, acount linking, user impersonation, etc.

• Authorization: RBAC, permissions, etc.

• Billing: Subscription, invoices, etc.

• Settings: User settings, account settings, etc.

• Notifications: Email, SMS, push notifications, etc.

• Integrations: Google APIs, Stripe, etc.

• Monitoring: Logs, metrics, etc.

• Testing: Unit tests, integration tests, end-to-end tests, etc.

• Deployment: Serverless, Docker, etc.

• CI/CD: GitHub Actions, etc.

• Documentation: API documentation, user documentation, etc.

• SEO: Sitemap, robots.txt, etc.

• Analytics: PostHog, etc.

• Maintainability: Code quality, code reviews, etc.

• Security: OWASP, CORS, etc.

• Performance: Lighthouse, etc.

• Best technologies on their fields

Tech stack

Frontend

• React: A JavaScript library for building user interfaces.
• Next.js: The React framework for production.
• Tailwind CSS: A utility-first CSS framework for rapidly building custom designs.
• SWR: React Hooks library for data fetching.

Backend

• Node.js: JavaScript runtime built on Chrome's V8 JavaScript engine.
• Cosmos DB: A fully managed NoSQL database for modern app development.
• Lambda functions
• T3 Env: A simple and secure way to manage your environment variables.
• Cloudflare Pages: The best platform for deploying your frontend withouth bandwith limits.
• Crowdin for translations.
• next-intl for internationalization.

DevOps

• GitHub for version control.
• GitHub Actions for CI/CD.
• Sentry for error tracking.
• Codecov for code coverage.
• Dependabot for dependency updates.

Monitoring

• PostHog: Open-source product analytics.
• Better Stack for monitoring and status page.
• Checkly for API monitoring.

Security

• Clerk for authentication.
• CORS for security.
• OWASP for security.

IaaS

• SST for serverless.

Payments

• Stripe for payments.

Analytics

• PostHog for analytics.

Componetization

• Storybook for component documentation.

Components

• Heroicons for icons.
• Shadc/ui for components.
• MagicUI for components.
• NextUI for components.

Forms

• React Hook Form for forms.

Validation

• Zod for validation.

Documentation

• GitBook for documentation.

Testing

• Vitest for unit tests.
• Playwright for end-to-end tests.
• Chromatic for visual regression tests.

Usage

Initialization

Please make sure you follow the components installation guide here

Development

pnpm run dev

Production

For production, you need to build the project first.

pnpm run build

Then you can start the server.

pnpm start

or deploy it to the cloud.

pnpm run deploy

Setup guide

Clerk

We provide a standard way to setup Clerk. You can create custom components and pages with Clerk. You can check the guide here

Important

Clerk Elements is on Beta. Please use it with caution. It is not recommended to use it in production.

First, you need to create a Clerk account and create a new project. Then you must copy the env variables and paste them in the .env file. Or you can use Doppler to manage your secrets. It is just that simple.

Cosmos DB

We provide a standard way to setup Cosmos DB. You only need to paste the envs in the .env file or use Doppler to manage your secrets. It is just that simple. When you want to do some queries or mutations, you can import the client from the lib/db file.

Roadmap

Check the roadmap on the project's GH Repo here

Contributing

Follow the CONTRIBUTING file. Please read the CODE_OF_CONDUCT file.

Acknowledgements

• TheCukitoDev for the idea and the project.

References

Contact

You can open an issue or contact me at [email protected].

If you want to contact me about a business proposal, you can contact me at [email protected]

Feedback

Please open a discussion or contact me at [email protected].

License

Check the license file here.