dogokit-stack
dogokit-stack copied to clipboard
🐶 Dogokit Stack — Opinionated tech stack to build software and apps
🐶 Dogokit Stack
An opiniated stack for building real world apps with web technologies.
Core:
Remix, Tailwind CSS, Prisma ORM, MySQL, Vercel
Preferences:
Linear, Figma, HTML, CSS, JavaScript, TypeScript, Node.js, npm/pnpm, React, Remix, Tailwind CSS, Radix UI, Prisma ORM, MySQL on PlanetScale, Zod, Vercel, Bitwarden.
This is the short version of Stack All. You can use this repo as a template to help with your technical evaluation and decision.
The emoji 🧰 (toolbox) indicated the recommendation and 🔰 (beginner) need to be prioritized. Just keep in mind it doesn't mean that everything is required. Also feel free to skip the ones without the 🧰.
Main Categories:
- Stack: For technical evaluation
- Work Stack
- App Stack/Dependency
- Development Stack/Dependency
- Deployment Stack
- External Service Stack
- References: For learning more
- Checklist: For development decision
Work Stack
Browser
Communication
Note and Knowledge Base
Project or Product Management
Survey Form and Data Management
Terminal
Code Editor
Documentation and Content
Time Management/Tracking
Repository
Design Stack
Sketch/Diagram
UI and UX
App Stack/Dependency
App Language/Platform/Runtime/Format
- HTML 🧰🔰
- CSS 🧰🔰
- JavaScript 🧰🔰
- TypeScript 🧰🔰
- JSON 🧰
- Node.js 🧰🔰
- Deno
- Bun
Package Manager
General:
Installer:
Full Stack Framework
- Remix 🧰🔰
- 📦 React, TypeScript, Prisma, Tailwind CSS, Remix Auth
- Next.js 🧰
- T3 Stack 🧰
- 📦 Next.js, TypeScript, tRPC, Prisma, Tailwind CSS, NextAuth.js
- SolidStart
- SvelteKit
Frontend/Client-Side Web Library/Framework
Frontend/Client-Side Mobile Library/Framework
API Layer
Content Layer
For transforming the data into the content.
- DIY: Just create it ourself
- Contentlayer
- Astro:Content
Auth Layer
Functions/Services:
- Remix Auth 🧰🔰
- Auth.js 🧰
- Clerk 🧰: For setup auth the fastest way
- Auth0
Methods:
Security/Encryption/Encoding:
Backend/Server-Side Library/Framework
If using Full Stack Framework's Approach, these might not needed.
REST:
GraphQL:
Data Fething
General:
- Fetch API 🧰🔰
- Axios HTTP 🧰🔰
- ky
REST:
GraphQL:
Styling
- Tailwind CSS 🧰🔰
clsx🧰🔰: For constructingclassNamestrings conditionallycva: For creating component variants (Class Variance Authority)- PostCSS
- Autoprefixer
- Fontsource: For self-host Open Source fonts in neatly bundled NPM packages.
Components
- Radix UI 🧰🔰: For the most complete unstyled UI components
- shadcn UI: For ready to use UI components made of Radix UI and Tailwind CSS
shadcn/ui- Chimera UI: For installable shadcn UI components
- shadcn UI: For ready to use UI components made of Radix UI and Tailwind CSS
- Headless UI
- Ariakit
- Downshift
- React Wrap Balancer
- NProgress 🧰: For slim progress bar
Icons
Router/Routing
Data Validation
- Zod 🧰🔰
Form Handling
Framework Specific:
- Remix Validated Form 🧰🔰: For full stack form handling
- Remix Forms by Seasoned
Framework Agnostic:
- HouseForm 🧰: For highly interactive client side form handling
- React Hook Form (RHF)
- Formik
Complex State Management
Database ORM
- Prisma ORM 🧰🔰: For modeling the data and connecting the database
- TypeORM
- Sequelize
- Mongoose
Database
- MySQL on PlanetScale 🧰🔰
- PostgreSQL on Neon or Supabase
- MongoDB on MongoDB Atlas
App Utility
Remix:
General:
sleep-promise: For a promise after a specified delay- Invariant: For descriptive errors in development, but generic errors in production
- Falso: For all the fake data
Text/String:
@sindresorhus/slugify- Voca: For string manipulaton
prettyjson: For formatting JSON data in a coloured YAML-style, perfect for CLI outputpluralizecountry-code-lookup- i18next
Number/Currency:
numeral: For formatting and manipulating numbers- currency.js
Date:
File/Asset:
pdfjs-dist: For parsing and rendering PDFs
Email:
Development Stack/Dependency
Language Transpiler
- TypeScript 🧰🔰: For type safety
- swc 🧰
- Babel
Tooling Language/Platform/Runtime
These are important just to know the language behind the tools.
Project Bundler
Repo Management
Code Formating
- Pretier 🧰🔰: For opiniated formatting
- Rome
- EditorConfig
Code Linting
- ESLint 🧰🔰: For enforcing JS/TS syntax rules
- stylelint 🧰: For enforcing CSS syntax rules
- ls-lint
- commitlint
- lint-staged
Testing
- Vitest 🧰🔰: For unit test
- Jest
- testing-library 🧰: For unit test
- Playwright 🧰: For end-to-end test
- MSW 🧰: For mock service test
Dev Utility
Workflow:
- Bitwarden🧰🔰: For any credential management
- Doppler 🧰🔰: For app environment variable management
- Kodiak: For pull request management
- [
npm-run-all]/run-p: For parallel scripts - [
motdotla/dotenv]
TypeScript:
@total-typescript/ts-reset: For improving types for common JavaScript AP
Setup:
Extra:
- webhookthing
- Pino: For simple logging
bundle-wizard: For evaluating bundle size@milahu/patch-package: For patching node modules
Deployment Stack
Frontend/Client Focused
- Vercel 🧰🔰: For full stack app deployment with frontend focus
- Netlify 🧰: For full stack app deployment with frontend focus
Backend/Server Focused
- Railway.app 🧰: For full stack app deployment with all focus
- Render
- Fly.io
- Deno Deploy
Complex Infra Focused
External Service Stack
Monitoring
- Highlight
- Sentry
Analytics
Multimedia/Image/Video
- Uploadcare: For easy image storage/hosting 🧰🔰
- ImageKit: For easy image storage/hosting
- Mux Video: For modern video hosting
- bunny.net (Bunny CDN): For cheapest video storage/hosting/streaming
Map
Transactional:
- Mailjet 🧰🔰: For cheapest transactional email service
- Resend 🧰
- Postmark 🧰
- Sendgrid
- Amazon SES
Marketing:
- ConvertKit 🧰🔰
- Bento 🧰
- Substack
CI/CD (Continuous Integration/Deployment)
- GitHub Actions 🧰: For easy CI/CD on GitHub
- GitLab CI: For easy CI/CD on GitLab
- Circle CI
References
Template
- Rewinds - Remix Tailwind CSS starter kit
- neorepo - Remix/Next.js production-ready starter kit
- SaasRock - The One-Man SaaS Framework
- MakerKit - SaaS Starter Kits based on React
Checklist
Ideas
- [ ] Website
- [ ] Personal Website
- [ ] Company Profile
- [ ] Organization Profile
- [ ] School Portal
- [ ] Government Portal
- [ ] Community Portal
- [ ] Application
- [ ] Content Management System (CMS)
- [ ] Learning Management System (LMS)
- [ ] Information and Encyclopedia
- [ ] News and Magazine
- [ ] Writing and Publication
- [ ] Work and Productivity
- [ ] Contacts and Address Book
- [ ] Social Media and Event
- [ ] Note-Taking and Research
- [ ] Multimedia Streaming
- [ ] Cooking and Culinary
- [ ] Commerce and Shopping
- [ ] Forum and Discussion
- [ ] Jobs and Hiring
- [ ] Health and Fitness Tracker
- [ ] Personal Development
- [ ] Places and Exploration
- [ ] Travel and Accommodation
- [ ] Property and Housing
- [ ] Directory and List
- [ ] Software as a Service (SaaS)
Todos
- [ ] Stack:
- [ ] Work Stack
- [ ] App Stack/Dependency
- [ ] Development Stack/Dependency
- [ ] Deployment Stack
- [ ] External Service Stack
- [ ] General:
- [ ] Format and lint rules
- [ ] Function vs arrow function
- [ ] Type naming convention
- [ ] Frontend/Client/Website:
- [ ] Landing page/route
- [ ] Header and Navigation
- [ ] Main
- [ ] Footer
- [ ] 404 Not Found page/route
- [ ] Splat (
*) routes - [ ] Favicons
- [ ] SEO metadata
- [ ]
charset - [ ]
sitemap.xml - [ ]
robots.txt
- [ ]
- [ ] OG image for social media
- [ ] Twitter metadata
- [ ] JSON-LD Structured data
- [ ] Analytics
- [ ] Landing page/route
- [ ] Backend/Server/API/Database:
- [ ] Model naming convention (singular vs plural)
- [ ] Field/property case convention (camel vs snake)