dogokit-stack icon indicating copy to clipboard operation
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

Package Manager

General:

Installer:

Full Stack Framework

Frontend/Client-Side Web Library/Framework

Frontend/Client-Side Mobile Library/Framework

API Layer

Content Layer

For transforming the data into the content.

Auth Layer

Functions/Services:

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:

REST:

GraphQL:

Styling

Components

Icons

Router/Routing

Data Validation

Form Handling

Framework Specific:

Framework Agnostic:

Complex State Management

Database ORM

Database

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:

Number/Currency:

Date:

File/Asset:

Email:


Development Stack/Dependency

Language Transpiler

Tooling Language/Platform/Runtime

These are important just to know the language behind the tools.

  • Golang → esbuild, Vite
  • Rust → swc, Turbopack

Project Bundler

  • esbuild 🧰: For Remix default bundler
    • Vite 🧰: For client side only bundler
    • Turbopack 🧰: For Next.js future bundler
  • Webpack: For Next.js current bundler

Repo Management

Code Formating

Code Linting

Testing

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:

Setup:

Extra:


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

Complex Infra Focused


External Service Stack

Monitoring

  • Highlight
  • Sentry

Analytics

Multimedia/Image/Video

Map

Mail

Transactional:

Marketing:

CI/CD (Continuous Integration/Deployment)


References

Template


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
  • [ ] Backend/Server/API/Database:
    • [ ] Model naming convention (singular vs plural)
    • [ ] Field/property case convention (camel vs snake)