dogokit-beagle

KO | EN

gitlite — search

#typescript #ai-agents #ai #dsh-plugin #deepseek-harness #open-source #claude-code #codex #cli #developer-tools #react #windows

★ 72 Open GitHub ↗

🐶Dogokit Beagle: Full stack web app template kit with React, Remix v2, Prisma, Tailwind CSS, shadcn/ui

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# [🐶 Dogokit Beagle](https://dogokit-beagle.vercel.app)

![TypeScript](https://img.shields.io/badge/TypeScript-3178C6?style=flat-square&logo=typescript&logoColor=white)
![Remix](https://img.shields.io/badge/Remix-000000?style=flat-square&logo=remix&logoColor=white)
![React](https://img.shields.io/badge/React-61DAFB?style=flat-square&logo=react&logoColor=white)
![Tailwind CSS](https://img.shields.io/badge/-Tailwind_CSS-06B6D4?style=flat-square&logo=tailwindcss&logoColor=white)
![Radix UI](https://img.shields.io/badge/Radix_UI-111111?style=flat-square&logo=framer&logoColor=white)
![Prisma ORM](https://img.shields.io/badge/Prisma_ORM-2D3748?style=flat-square&logo=prisma&logoColor=white)
![Vercel](https://img.shields.io/badge/Vercel-000000?style=flat-square&logo=vercel&logoColor=white)

> 🚧 Migrating to PostgreSQL (Neon) from MySQL (PlanetScale)

🐶Dogokit Beagle is a web app template kit using Remix, React, Tailwind CSS, Radix UI, Prisma ORM, and more. Read the latest updates and details on
[dogokit/dogokit-beagle](https://github.com/dogokit/dogokit-beagle).

The goal is to start and be as productive as possible to ship a web app quickly with [Remix](https://remix.run) full stack web framework. It is a highly opinionated collection of application structure, interactive UI components, software engineering and web development workflow, functionality hooks and utilities, also integration with 3rd party services.

Check out:

- Web: <https://dogokit-beagle.vercel.app>
- Repo: <https://github.com/dogokit/dogokit-beagle>

## Table of Contents

- [Quick Start](#quick-start)
- [Goal](#goal)
- [Prerequisites](#prerequisites)
- [Concept](#concept)
- [Tech Stack](#tech-stack)
- [Setup](#setup)
- [References](#references)

## Quick Start

Starting new?
[Use this template to generate the repository](https://github.com/dogokit/dogokit-beagle/generate).

Clone?

```sh
git clone git@github.com:dogokit/dogokit-beagle.git
```

Use `pnpx` or `pnpm dlx`?

```sh
pnpx create-remix@latest --template dogokit/dogokit-beagle
```

Once decided to use this, in order to get the latest
[README docs](https://github.com/dogokit/dogokit-beagle/blob/main/README.md) possible, replace and
remove all explanation in here except the [Setup](#setup) section.

This is a template kit, not a blank repo generator. Customize it based on the actual application
needs. Make sure to first explore to understand, rename, and replace the contents along the way.

## Goal

The goal is to use this for building web apps:

- Personal Website
- Company Profile
- Interactive Form
- Todo List
- Blog or News
- Social Media
- Community Forum
- Support Desk
- Art Gallery
- Job Board
- Hiring or Recruitment
- Applicant Tracking System (ATS)
- Inventory Management
- Events Management
- Knowledge Management
- Admin Panel or Dashboard
- E-Commerce or Storefront
- Product or Project Management
- Content Management System (CMS)
- Learning Management System (LMS)
- Software as a Service (SaaS)

## Prerequisites

Before using this template, you should already understand and have experience with:

- CLI/Terminal
- HTML
- CSS
- JavaScript
- Node.js
- TypeScript
- React

## Concept

Some reasons for making and using this template kit.

- Create a new [Remix](https://remix.run) app or existing one with multiple features quickly
- Setup commonly used development and production parts
  - With [pnpm](https://pnpm.io) by default
- UI components and styles
  - Light and dark mode theme
  - Styling with [Tailwind CSS](https://tailwindcss.com) and [Radix UI](https://radix-ui.com)
  - Bundled with [shadcn UI](https://ui.shadcn.com)
  - Icon retrieval either with [Iconify](https://iconify.design) or manual import
- Database with [Prisma ORM](https://prisma.io)
  - Default for [PostgreSQL](https://postgresql.org) on [Neon](https://neon.tech)
  - Option for [MySQL](https://mysql.com) on [PlanetScale](https://planetscale.com)
  - Run local development database instance as a container with [Docker](https://docker) and
    [Docker Compose](https://docs.docker.com/compose)
- Auth (authentication and authorization) built-in
  - With [Remix Auth](https://github.com/sergiodxa/remix-auth) using various strategies: Form and
    OAuth with 3rd party services
- Various code and utilities
  - Environment variables check with [Zod](https://zod.dev) and znv
  - Date and time, encryption, metadata, redirect route, placeholder, sitemap, string functions,
    timer delay, URL, etc
- Code quality with [Prettier](https://prettier.io), [ESLint](https://eslint.org),
  [Stylelint](https://stylelint.io), [Commitlint](https://commitlint.js.org)

Later:

- Sending transactional email with [React Email](https://react.email) and
  [Resend](https://resend.com)
- Testing with [Vitest](https://vitest.dev) and [Playwright](https://playwright.dev)
- Commands with `dogokit` CLI or `@dogokit/cli`

## Tech Stack

The main prerequisites to learn, understand, and use with the stack. See the complete and
categorized list in the [guide to tech stack](./docs/GUIDE_STACK.md) including things to consider to
use later and won't use at all.

(Architecture diagram can help later on here)

- [Remix](https://remix.run)
- [React](https://react.dev)
- [TypeScript](https://typescriptlang.org)
- [Node.js](https://nodejs.org)
- [pnpm](https://pnpm.io)
- [Tailwind CSS](https://tailwindcss.com)
- [Radix UI](https://radix-ui.com)
- [Iconify](https://iconify.design)
- [Prisma ORM](https://prisma.io)
- [MySQL](https://mysql.com)
- [Docker](https://docker.com) and [Docker Compose](https://docs.docker.com/compose)

## Setup

### Dependencies

Use [pnpm](https://pnpm.io) to improve productivity and replace npm, so make sure
[pnpm is installed](https://pnpm.io/installation#using-npm):

```sh
npm i -g pnpm
```

To run the app locally, make sure the project's local dependencies are installed:

```sh
pnpm install
```

This also run the `postinstall` script from `package.json` which by default run `prisma generate`.

> Note: Not using Bun yet as there are still some issues.

### Prisma Client Generation

By default installing the modules is also running the `postinstall` script that generate the Prisma
Client (`@prisma/client`) for it to be used in the app.

If it isn't generated or need to generate manually, run:

```sh
pnpm db:gen
# prisma generate
```

### Code Quality

Log, format, lint to check if the setup is fine:

```sh
pnpm check
# check: env typecheck prettier eslint stylelint prisma
```

```sh
pnpm fix
# fix: prettier eslint stylelint prisma
```

> Note: Can ignore non-critical warning from ESLint and TypeScript

### Environment Variables

Create the `.env` file from `.env.example`. This is the one for local development, not production

```sh
cp -i .env.example .env
```

Configure the required environment variables if on local, otherwise in the project settings on other
environments.

If necessary, create the `.env.production` for production access. Adjust accordingly if need for
`staging`, `test`, etc. Be careful to change the `APP_URL` on different domains and subdomains.

```sh
cp -i .env.example .env.production
```

Required:

- `APP_URL`: For example, `http://localhost:3000`
- `SESSION_SECRET`: For example, `the_secret_text`. Anything goes, but better to generate a random
  string using `openssl rand -base64 32` on the terminal or put any long random text.
- `DATABASE_URL`: For example, `mysql://user:password@localhost:3306/dogokit`. Continue to read the
  Database Setup.

Optional:

- `NODE_ENV`: For example, `development`
- `*_CLIENT_ID` and `*_CLIENT_SECRET`: For OAuth related,
  [check Guide: OAuth](./docs/GUIDE_OAUTH.md)

#### Database Setup

Prisma ORM is used to communicate with the database easily.

For the database, either choose to use MySQL or PostgreSQL (relational database) from local system,
Docker container, services like [PlanetScale](https://planetscale.com) (MySQL) or
[Neon](https://neon.tech) (PostgreSQL).

If prefer using Docker and Docker Compose for local development,
[follow this guide on database](./docs/GUIDE_DATABASE.md).

The app is configured primarily to be deployed using PlanetScale. Because of that, the migration
files are not needed. Therefore, push the schema directly there. The migration process will be
handled through its [deploy requests](https://planetscale.com/docs/concepts/deploy-requests).

This repo template does not recommend MongoDB (document database), although Prisma has a stable
support for it. The database provider can still be changed, and the schema and databaase operations
might need to adapt.

#### MySQL Database with PlanetScale

To start quickly, create a [PlanetScale](https://planetscale.com) account to have a MySQL instance
for development and production. After the database has been created, "Get the connection string",
select "Prisma", then copy the full `DATABASE_URL`.

> Keep in mind the free plan only allow for 1 database. So either later keep it, delete it when
> unused, or upgrade the plan. There's also a verification with a payment card, even though it's
> still free to start.

dogokit-beagle

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README