{"id":16078034,"url":"https://github.com/dogokit/dogokit-beagle","last_synced_at":"2025-10-22T20:30:55.973Z","repository":{"id":202719294,"uuid":"707990962","full_name":"dogokit/dogokit-beagle","owner":"dogokit","description":"🐶Dogokit Beagle: Full stack web app template kit with React, Remix v2, Tailwind CSS (shadcn/ui), Prisma","archived":false,"fork":false,"pushed_at":"2024-09-11T00:05:23.000Z","size":1712,"stargazers_count":62,"open_issues_count":0,"forks_count":5,"subscribers_count":0,"default_branch":"main","last_synced_at":"2024-12-09T04:36:42.695Z","etag":null,"topics":["dogokit","prisma-orm","radix-ui","react","remix","remix-run","tailwindcss","template"],"latest_commit_sha":null,"homepage":"https://dogokit-beagle.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dogokit.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":".github/SECURITY.md","support":".github/SUPPORT.md","governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["dogokit","mhaidarhanif"],"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2023-10-21T07:23:10.000Z","updated_at":"2024-12-05T21:39:12.000Z","dependencies_parsed_at":"2024-08-17T08:17:38.249Z","dependency_job_id":null,"html_url":"https://github.com/dogokit/dogokit-beagle","commit_stats":null,"previous_names":["dogokit/dogokit-remix","dogokit/dogokit-beagle"],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dogokit%2Fdogokit-beagle","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dogokit%2Fdogokit-beagle/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dogokit%2Fdogokit-beagle/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dogokit%2Fdogokit-beagle/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dogokit","download_url":"https://codeload.github.com/dogokit/dogokit-beagle/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":237739846,"owners_count":19358624,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dogokit","prisma-orm","radix-ui","react","remix","remix-run","tailwindcss","template"],"created_at":"2024-10-09T10:06:14.348Z","updated_at":"2025-10-22T20:30:55.524Z","avatar_url":"https://github.com/dogokit.png","language":"TypeScript","funding_links":["https://github.com/sponsors/dogokit","https://github.com/sponsors/mhaidarhanif"],"categories":["tailwindcss","TypeScript"],"sub_categories":[],"readme":"# [🐶 Dogokit Beagle](https://dogokit-beagle.vercel.app)\n\n![TypeScript](https://img.shields.io/badge/TypeScript-3178C6?style=flat-square\u0026logo=typescript\u0026logoColor=white)\n![Remix](https://img.shields.io/badge/Remix-000000?style=flat-square\u0026logo=remix\u0026logoColor=white)\n![React](https://img.shields.io/badge/React-61DAFB?style=flat-square\u0026logo=react\u0026logoColor=white)\n![Tailwind CSS](https://img.shields.io/badge/-Tailwind_CSS-06B6D4?style=flat-square\u0026logo=tailwindcss\u0026logoColor=white)\n![Radix UI](https://img.shields.io/badge/Radix_UI-111111?style=flat-square\u0026logo=framer\u0026logoColor=white)\n![Prisma ORM](https://img.shields.io/badge/Prisma_ORM-2D3748?style=flat-square\u0026logo=prisma\u0026logoColor=white)\n![Vercel](https://img.shields.io/badge/Vercel-000000?style=flat-square\u0026logo=vercel\u0026logoColor=white)\n\n\u003e 🚧 Migrating to PostgreSQL (Neon) from MySQL (PlanetScale)\n\n🐶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\n[dogokit/dogokit-beagle](https://github.com/dogokit/dogokit-beagle).\n\nThe 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.\n\nCheck out:\n\n- Web: \u003chttps://dogokit-beagle.vercel.app\u003e\n- Repo: \u003chttps://github.com/dogokit/dogokit-beagle\u003e\n\n## Table of Contents\n\n- [Quick Start](#quick-start)\n- [Goal](#goal)\n- [Prerequisites](#prerequisites)\n- [Concept](#concept)\n- [Tech Stack](#tech-stack)\n- [Setup](#setup)\n- [References](#references)\n\n## Quick Start\n\n\u003c!-- THIS IS A REMOVABLE SECTION --\u003e\n\nStarting new?\n[Use this template to generate the repository](https://github.com/dogokit/dogokit-beagle/generate).\n\nClone?\n\n```sh\ngit clone git@github.com:dogokit/dogokit-beagle.git\n```\n\nUse `pnpx` or `pnpm dlx`?\n\n```sh\npnpx create-remix@latest --template dogokit/dogokit-beagle\n```\n\nOnce decided to use this, in order to get the latest\n[README docs](https://github.com/dogokit/dogokit-beagle/blob/main/README.md) possible, replace and\nremove all explanation in here except the [Setup](#setup) section.\n\nThis is a template kit, not a blank repo generator. Customize it based on the actual application\nneeds. Make sure to first explore to understand, rename, and replace the contents along the way.\n\n## Goal\n\n\u003c!-- THIS IS A REMOVABLE SECTION --\u003e\n\nThe goal is to use this for building web apps:\n\n- Personal Website\n- Company Profile\n- Interactive Form\n- Todo List\n- Blog or News\n- Social Media\n- Community Forum\n- Support Desk\n- Art Gallery\n- Job Board\n- Hiring or Recruitment\n- Applicant Tracking System (ATS)\n- Inventory Management\n- Events Management\n- Knowledge Management\n- Admin Panel or Dashboard\n- E-Commerce or Storefront\n- Product or Project Management\n- Content Management System (CMS)\n- Learning Management System (LMS)\n- Software as a Service (SaaS)\n\n## Prerequisites\n\nBefore using this template, you should already understand and have experience with:\n\n- CLI/Terminal\n- HTML\n- CSS\n- JavaScript\n- Node.js\n- TypeScript\n- React\n\n## Concept\n\n\u003c!-- THIS IS A REMOVABLE SECTION --\u003e\n\nSome reasons for making and using this template kit.\n\n- Create a new [Remix](https://remix.run) app or existing one with multiple features quickly\n- Setup commonly used development and production parts\n  - With [pnpm](https://pnpm.io) by default\n- UI components and styles\n  - Light and dark mode theme\n  - Styling with [Tailwind CSS](https://tailwindcss.com) and [Radix UI](https://radix-ui.com)\n  - Bundled with [shadcn UI](https://ui.shadcn.com)\n  - Icon retrieval either with [Iconify](https://iconify.design) or manual import\n- Database with [Prisma ORM](https://prisma.io)\n  - Default for [PostgreSQL](https://postgresql.org) on [Neon](https://neon.tech)\n  - Option for [MySQL](https://mysql.com) on [PlanetScale](https://planetscale.com)\n  - Run local development database instance as a container with [Docker](https://docker) and\n    [Docker Compose](https://docs.docker.com/compose)\n- Auth (authentication and authorization) built-in\n  - With [Remix Auth](https://github.com/sergiodxa/remix-auth) using various strategies: Form and\n    OAuth with 3rd party services\n- Various code and utilities\n  - Environment variables check with [Zod](https://zod.dev) and znv\n  - Date and time, encryption, metadata, redirect route, placeholder, sitemap, string functions,\n    timer delay, URL, etc\n- Code quality with [Prettier](https://prettier.io), [ESLint](https://eslint.org),\n  [Stylelint](https://stylelint.io), [Commitlint](https://commitlint.js.org)\n\nLater:\n\n- Sending transactional email with [React Email](https://react.email) and\n  [Resend](https://resend.com)\n- Testing with [Vitest](https://vitest.dev) and [Playwright](https://playwright.dev)\n- Commands with `dogokit` CLI or `@dogokit/cli`\n\n## Tech Stack\n\n\u003c!-- THIS IS A REMOVABLE SECTION --\u003e\n\nThe main prerequisites to learn, understand, and use with the stack. See the complete and\ncategorized list in the [guide to tech stack](./docs/GUIDE_STACK.md) including things to consider to\nuse later and won't use at all.\n\n(Architecture diagram can help later on here)\n\n- [Remix](https://remix.run)\n- [React](https://react.dev)\n- [TypeScript](https://typescriptlang.org)\n- [Node.js](https://nodejs.org)\n- [pnpm](https://pnpm.io)\n- [Tailwind CSS](https://tailwindcss.com)\n- [Radix UI](https://radix-ui.com)\n- [Iconify](https://iconify.design)\n- [Prisma ORM](https://prisma.io)\n- [MySQL](https://mysql.com)\n- [Docker](https://docker.com) and [Docker Compose](https://docs.docker.com/compose)\n\n## Setup\n\n### Dependencies\n\nUse [pnpm](https://pnpm.io) to improve productivity and replace npm, so make sure\n[pnpm is installed](https://pnpm.io/installation#using-npm):\n\n```sh\nnpm i -g pnpm\n```\n\nTo run the app locally, make sure the project's local dependencies are installed:\n\n```sh\npnpm install\n```\n\nThis also run the `postinstall` script from `package.json` which by default run `prisma generate`.\n\n\u003e Note: Not using Bun yet as there are still some issues.\n\n### Prisma Client Generation\n\nBy default installing the modules is also running the `postinstall` script that generate the Prisma\nClient (`@prisma/client`) for it to be used in the app.\n\nIf it isn't generated or need to generate manually, run:\n\n```sh\npnpm db:gen\n# prisma generate\n```\n\n### Code Quality\n\nLog, format, lint to check if the setup is fine:\n\n```sh\npnpm check\n# check: env typecheck prettier eslint stylelint prisma\n```\n\n```sh\npnpm fix\n# fix: prettier eslint stylelint prisma\n```\n\n\u003e Note: Can ignore non-critical warning from ESLint and TypeScript\n\n### Environment Variables\n\nCreate the `.env` file from `.env.example`. This is the one for local development, not production\n\n```sh\ncp -i .env.example .env\n```\n\nConfigure the required environment variables if on local, otherwise in the project settings on other\nenvironments.\n\nIf necessary, create the `.env.production` for production access. Adjust accordingly if need for\n`staging`, `test`, etc. Be careful to change the `APP_URL` on different domains and subdomains.\n\n```sh\ncp -i .env.example .env.production\n```\n\nRequired:\n\n- `APP_URL`: For example, `http://localhost:3000`\n- `SESSION_SECRET`: For example, `the_secret_text`. Anything goes, but better to generate a random\n  string using `openssl rand -base64 32` on the terminal or put any long random text.\n- `DATABASE_URL`: For example, `mysql://user:password@localhost:3306/dogokit`. Continue to read the\n  Database Setup.\n\nOptional:\n\n- `NODE_ENV`: For example, `development`\n- `*_CLIENT_ID` and `*_CLIENT_SECRET`: For OAuth related,\n  [check Guide: OAuth](./docs/GUIDE_OAUTH.md)\n\n#### Database Setup\n\nPrisma ORM is used to communicate with the database easily.\n\nFor the database, either choose to use MySQL or PostgreSQL (relational database) from local system,\nDocker container, services like [PlanetScale](https://planetscale.com) (MySQL) or\n[Neon](https://neon.tech) (PostgreSQL).\n\nIf prefer using Docker and Docker Compose for local development,\n[follow this guide on database](./docs/GUIDE_DATABASE.md).\n\nThe app is configured primarily to be deployed using PlanetScale. Because of that, the migration\nfiles are not needed. Therefore, push the schema directly there. The migration process will be\nhandled through its [deploy requests](https://planetscale.com/docs/concepts/deploy-requests).\n\nThis repo template does not recommend MongoDB (document database), although Prisma has a stable\nsupport for it. The database provider can still be changed, and the schema and databaase operations\nmight need to adapt.\n\n#### MySQL Database with PlanetScale\n\nTo start quickly, create a [PlanetScale](https://planetscale.com) account to have a MySQL instance\nfor development and production. After the database has been created, \"Get the connection string\",\nselect \"Prisma\", then copy the full `DATABASE_URL`.\n\n\u003e Keep in mind the free plan only allow for 1 database. So either later keep it, delete it when\n\u003e unused, or upgrade the plan. There's also a verification with a payment card, even though it's\n\u003e still free to start.\n\nAlso read:\n\n- [Prisma with PlanetScale](https://prisma.io/docs/guides/database/planetscale)\n- [PlanetScale with Prisma](https://planetscale.com/docs/prisma/prisma-quickstart)\n\n### Database Operations\n\nSync between Prisma schema and the database directly, by making schema changes with\n`prisma db push`, which can be done regularly while updating the models:\n\n```sh\npnpm db:push\n# prisma db push\n```\n\n\u003e Note: Only need to push the schema in development. No need for migration files.\n\nEven with local development without PlanetScale, pushing the schema directly is still okay when in\ndevelopment or\n[prototyping the schema](https://prisma.io/docs/concepts/components/prisma-migrate/db-push). After a\nsuccess push, then it will automatically run `prisma generate`.\n\nCreate `users.ts` in `prisma/credentials` folder with the format below. Can focus on certain users\nwho want to be able to access in development, so it doesn't have to be everyone.\n\n```ts\nexport const dataCredentialUsers = [\n  {\n    fullname: \"Example\",\n    username: \"example\",\n    nickname: \"Dogo\",\n    email: \"example@example.com\",\n    password: \"exampleexample\",\n    roleSymbol: \"ADMIN\",\n  },\n]\n```\n\nThen seed the initial data when needed:\n\n```sh\npnpm db:seed\n# prisma db seed\n```\n\n### Build\n\nCheck if the build is fine. This als be used to build the app for production.\n\n```sh\npnpm build\n# remix build\n```\n\nThis will also run `prisma generate` too before the build.\n\nThen try to run the app in production mode:\n\n```sh\npnpm start\n```\n\nThen pick a host to deploy it to, such as:\n\n- Vercel\n- Netlify\n- Fly.io\n- Render.com\n- Railway.app\n- Google Cloud\n- Amazon Web Services\n- Microsoft Azure\n\nIf familiar with deploying node applications, the built-in Remix app server is production-ready.\nMake sure to deploy the output of `remix build`\n\n- `build/`\n- `public/build/`\n\n### Development\n\nFinally, develop the app while running the development server:\n\n```sh\npnpm dev\n# remix dev --manual\n```\n\nOpen \u003chttp://localhost:3000\u003e and it's ready!\n\n## What's Next?\n\n\u003c!-- THIS IS A REMOVABLE SECTION --\u003e\n\nDevelop the app as usual, the Remix way.\n\nRead the [guide to codebase](./docs/GUIDE_CODEBASE.md) and [guide steps](./docs/GUIDE_STEPS.md) to\nlearn more about the setup.\n\n### Change the Contents\n\n- Arrange and remove components as needed.\n- Find and replace various texts, especially the word Dogokit.\n\n### Change Theme Colors\n\nUse [`kiliman/shadcn-custom-theme`](https://github.com/kiliman/shadcn-custom-theme) to generate\nshadcn UI CSS variables with Tailwind CSS colors.\n\nFor example:\n\n```sh\npnpx shadcn-custom-theme primary=indigo secondary=blue accent=violet gray=neutral\n```\n\n### Setup some services\n\n- Image upload with [Uploadcare](https://uploadcare.com)\n  - `UPLOADCARE_PUBLIC_KEY`, `UPLOADCARE_SECRET_KEY`\n- Transactional email with [Resend](https://resend.com)\n  - `RESEND_API_KEY`\n- Product analytics with [Posthog](https://posthog.com)\n  - `POSTHOG_KEY`\n\n### Subscribe for the status of the services\n\n- [Vercel Status](https://vercel-status.com)\n- [PlanetScale Status](https://planetscalestatus.com)\n- [Uploadcare Status](https://status.uploadcare.com)\n- [Resend Status](https://resend-status.com)\n\n## References\n\n\u003c!-- THIS IS A REMOVABLE SECTION --\u003e\n\n### Used By\n\n- [🐾 Allnimal](https://allnimal.com)\n  - [🐻 Bearmentor](https://bearmentor.com)\n  - [🐱 Catamyst](https://catamyst.com)\n  - [🐶 Dogokit](https://dogokit-beagle.vercel.app)\n\n## Authors\n\nOriginally created by [@mhaidarhanif](https://github.com/mhaidarhanif) in 2023, from the 🐾 Allnimal group (🐻 Bearmentor, 🐱 Catamyst, 🐶 Dogokit)\n\n---\n\n2024 ©️ 🐶 Dogokit\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdogokit%2Fdogokit-beagle","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdogokit%2Fdogokit-beagle","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdogokit%2Fdogokit-beagle/lists"}