Product Engineering
How do you build software products that deliver valuable outcomes?
| Focus | Notes |
|---|---|
| Smart Agents | The future of UI/UX |
| Next Best Practices | Service Actions = Better Security? (ByBit hack) |
| UI Components | |
| App Router | |
| State Management | |
| RSCs and Services | |
| Mobile Apps | |
| Browser APIs | the frontend iceberg |
| Blockchain Development |
tip
Verified Truth and Security will be at an Absolute Premium
Context
Purpose
Product engineering is the art of turning ideas into tangible, market-ready solutions that help people extract value from actions more effectively.
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.
Getting Started
AI Assistance
| JTBD | Decision |
|---|---|
| Design | v0 |
| Startup | bolt.new |
| Enterprise IDE | Cursor |
| Hosting | Vercel, Replit |
See AI Coding and Platform Engineering for detailed analysis.
Starter Kits
Follow engineers that ship value and study the starter kits they endorse.
- Lee Rob | Next SaaS Starter
- Morphic | AI Agent Stack
- [Solana Devs] | Create Solana Dapp
- Theo | Create T3 Apps
- Vercel | AI Cookbook
- Web Dev Cody | SaaS Starter Kit
Shipping Value
Engineer solutions with humans in the heart of the loop.
Inspiration
Bad artists copy. Good artists steal.
See T3 Collection for more.
Common App Requirements
Common features of SaaS Products include:
- Landing Page
- 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
Todo
Roll into dreamineering monorepo
Next 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.
Next Mastery 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