Skip to content

Latest commit

 

History

History
634 lines (457 loc) · 17.7 KB

README.md

File metadata and controls

634 lines (457 loc) · 17.7 KB
Raw

🐶 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)