Product Engineering
Product engineering is the art of turning ideas into tangible, market-ready solutions that help people extract value from actions more effectively.
What happens with traditional product engineering now that SaaS is dead and humans interface online exclusively with Smart Agents
Minimize Time and Energy to extract maximal valuable outcomes
Purpose
Optimize Developer Experience to enable innovation that drives progress by eliminating needless friction and providing timely and actionable advice that extends natural capabilities.
Engineers in this field blend creativity with technical prowess, optimizing designs for performance, cost, and manufacturability. They're the bridge between visionary concepts and real-world implementation, ensuring that products are both innovative and practical.
Principles
- Planning & Performance
- UI Components
- App Router
- State Management
- RSCs and Services
- Mobile Apps
- Platform Engineering
Related
- Smart Agents
- Startups
- Saas Metrics
- SaaS Products
- Software Architecture
- AI Tech Stack
- Blockchain Development
Specifications
App Starter Kits
AI coding tools work better from a solid base, see AI Coding Plan for more.
- Create T3 Apps
- Create Solana Dapp
- WDC SaaS Starter Kit
- Lee Rob Next SaaS Starter
- Morphic | AI Agent Stack
- Leveraging AI
Product Features
Common features of SaaS Products include:
- CUI Interaction
- GUI Interface
- Authentication
- Lucia Auth
- Google & Github Login
- Magic Link Login
- Role Based Authorization
- Payment Subscriptions
- DDoS Protection
- Email Newsletters
- Documentation Site
- File Storage
- Database
- Blockchain
Roll into dreamineering monorepo
App Stack Components
Use core technologies from T3 Apps for developing human interfaces in TypeScript.
| Element | Decision |
|---|---|
| Language | TypeScript |
| Framework | Nextjs |
| CSS Styling | TailwindCSS |
| UI Components | Shadcn, Tailwind UI |
| Headless Components | Radix UI, Headless UI |
| Animation | Framer Motion |
| Resend | |
| Analytics | Posthog |
| State Mgt | Zustand |
| ORM | DrizzleORM |
| Database | Postgres/Supabase |
| Content | MDX |
| Documentation | Docusaurus |
See Browser APIs for more about the frontend iceberg.
Development Toolkit
Dev toolkit and platform for AI Coding
| JTBD | Decision |
|---|---|
| Design | v0 |
| Startup | bolt.new |
| Enterprise IDE | Cursor |
| Hosting | Vercel, Replit |
Best Practices
Best practices for building Next.js applications with React Server Components and Server Actions include:
- Adopt a "server-first" mindset when building components
- Use Server Components for data fetching and resource-intensive operations
- Implement Client Components only when interactivity is needed
- Leverage Server Actions for form submissions and data mutations
- Optimize performance by reducing client-side JavaScript
- Ensure proper separation of concerns between server and client code
- Utilize TypeScript for enhanced type safety across the stack
- Implement proper error handling and loading states
- Follow security best practices when working with sensitive data
- Regularly review and optimize bundle sizes
Benefits
Broad benefits of using Next.js with Vercel Platform include:
- Versatility: It supports various rendering strategies, making it suitable for e-commerce, SaaS, media platforms, and more.
- Built-in optimizations: Features like image optimization and font optimization enhance performance without additional effort.
- Rich ecosystem: Next.js integrates seamlessly with a wide range of tools and services, facilitating rapid product development.
- Strong community support: A large, active developer community ensures continuous improvement and readily available resources.
By embracing React Server Components and Server Actions, businesses further improve by delivering faster, more secure, and more efficient web applications that lead to improved customer satisfaction and increased revenue.
- Faster Time-to-Market: The unified approach can lead to quicker development cycles, allowing businesses to launch features and updates more rapidly.
- Unified Development: React Server Components and Server Actions allow developers to work seamlessly across both frontend and backend, streamlining the development process and reducing the need for separate teams.
- Improved Performance: By moving more logic to the server, applications can load faster and consume less data, leading to better user experiences, especially on slower devices or networks.
- Enhanced Security: Sensitive operations can be performed on the server, reducing the risk of exposing critical data or logic to the client.
- Cost-Effective: With less client-side processing, applications may require less powerful devices to run smoothly, potentially expanding your user base.
- Scalability: Server-side rendering can handle more users efficiently, making it easier to scale applications as your business grows.
- SEO Benefits: Server-rendered content is more easily indexable by search engines, potentially improving your application's visibility online.
- Reduced Complexity: By eliminating the need for separate API layers in many cases, the overall system architecture becomes simpler and easier to maintain.
- Future-Proofing: This approach aligns with the industry trend towards more integrated, full-stack development, positioning your application for future advancements.
- Competitive Advantage: Adopting these cutting-edge technologies will give any business an edge over competitors still using older, less efficient methods.
Showcase
Best practice Nextjs projects to learn from.
See T3 Collection for more.
Roadmap
What does the critical path to Nextjs mastery look like?
React Server Components
- Asynchronous Components
- RSC vs Client Components
- Client-Server Composition
- Component Directives
Data Fetching
- Streaming
- Partial Pre-Rendering
- Suspense
- Fallback Loading
Server Actions
- Declaration
- Usage Client Components
- Usage Server Components
- With and Without Forms
CRUD Operations
- Create a Record
- Read a Record
- Update a Record
- Delete a Record
Database
- Domain Modelling
- Schema Definition
- Seeding & Migrations
- UI Database Exploration
ORM
- Partial Selection
- Joins (Relation Queries)
- Upserts
- Transactions
Authentication
- Sign Up a User
- Sign In a User
- Sign Out a User
- Get Current Session
- Exclude Sensitive Data
Authorization
- Conditional UI Components
- Protected Routes
- Protected Server Actions
Pages, Layouts, Templates
- Static vs Dynamic Pages
- Shared and Nested Layouts
- Stable Template
- Route Handler
New Hooks
- useTransition
- useFormStatus
- useActionState
File Conventions
- Pages
- Loading, Error, Not Found
- Route Groups
- Private Folders
Navigation
- Router & Link Components
- Header & Sidebar
- Tabs & Breadcrumbs
- Redirects
Caching
- Full Route Cache
- Request Memoization
- Data & Router Cache
- generateStaticParams()
- Client-Side Cache
Validation & Feedback
- Server-Side Validation
- Form-Field Feedback
- Toast Feedback
- Feedback after Redirect
Cookies
- User Preferences
- Authentication
- User Feedback
Progressive Enhancement
- Works without JavaScript
- Fallback with
<noscript>
Project Structure
- General Folder Structure
- App Router Structure
- Feature Folders
- Shared Folders
Styling
- Light & Dark Mode
- Utility-First CSS
- Animations
- Theming
Component Patterns
- Reusable Components
- Component Composition
- Controlled Components
- Mediator Components
React
- useState, useEffect, useRef
- cache, Suspense
- cloneElement
- useImperativeHandle
- Custom Hooks
- Prop Drilling
TypeScript
- Inference & Assertions
- ReturnType & Awaited
- Type Merging
- Generics
CSS
- Vertical & Horizontal Layouts
- Animations
- Conditional Classes
- Responsive Design
Server-Side Operations
- Sorting
- Searching & Filtering
- Offset-Based Pagination
- Cursor-Based Pagination
Search Params
- useRouter, usePathname, useParams
- useSearchParams vs Search Params
- URLSearchParams & Typed Params
- URL State & Default State
React Query
- Prefetching in Server Components
- Initial State in Client Component
- Client-Side State Management
- Refetching & Invalidation
- Infinite Scrolling
- Intersection Observer
Architecture
- Clean Architecture
- Singleton, Sliding Window
- Inversion of Control
- Premature Optimizations
- DRY with Abstractions
- Happy & Unhappy Paths
- Configuration over Composition
Layers
- UI Layer
- Action Layer
- Query Layer
- Public API Layer