Skip to main content

Product Engineering

Make dreams a reality at the speed of inspiration.

Purpose​

Product engineering is the art of turning ideas into tangible, market-ready solutions. It's about crafting products that not only work flawlessly but also delight users and make business sense. 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.

Mantra

Focus on delivering solutions that help people solve valuable real world problems

Subjects​

V0​

Vercel V0 is a new way to build web applications that combines the best of server-side rendering with the flexibility of client-side rendering. It allows developers to build applications that are fast, secure, and scalable, while also being easy to maintain and update.

Next Framework​

Next.js is a powerful fullstack React framework that excels in enabling product engineers to rapidly prototype, develop, and deploy high-quality digital products that are performant, scalable, and user-friendly. Next.js's ability to handle both frontend and backend concerns within a single framework makes it an ideal choice for creating comprehensive digital solutions efficiently.

Best Practices​

  1. Adopt a "server-first" mindset when building components
  2. Use Server Components for data fetching and resource-intensive operations
  3. Implement Client Components only when interactivity is needed
  4. Leverage Server Actions for form submissions and data mutations
  5. Optimize performance by reducing client-side JavaScript
  6. Ensure proper separation of concerns between server and client code
  7. Utilize TypeScript for enhanced type safety across the stack
  8. Implement proper error handling and loading states
  9. Follow security best practices when working with sensitive data
  10. Regularly review and optimize bundle sizes

Benefits​

Broad benefits of using Next.js with Vercel include:

  1. Versatility: It supports various rendering strategies, making it suitable for e-commerce, SaaS, media platforms, and more.
  2. Built-in optimizations: Features like image optimization and font optimization enhance performance without additional effort.
  3. Rich ecosystem: Next.js integrates seamlessly with a wide range of tools and services, facilitating rapid product development.
  4. 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.

  1. Faster Time-to-Market: The unified approach can lead to quicker development cycles, allowing businesses to launch features and updates more rapidly.
  2. 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.
  3. 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.
  4. Enhanced Security: Sensitive operations can be performed on the server, reducing the risk of exposing critical data or logic to the client.
  5. Cost-Effective: With less client-side processing, applications may require less powerful devices to run smoothly, potentially expanding your user base.
  6. Scalability: Server-side rendering can handle more users efficiently, making it easier to scale applications as your business grows.
  7. SEO Benefits: Server-rendered content is more easily indexable by search engines, potentially improving your application's visibility online.
  8. Reduced Complexity: By eliminating the need for separate API layers in many cases, the overall system architecture becomes simpler and easier to maintain.
  9. Future-Proofing: This approach aligns with the industry trend towards more integrated, full-stack development, positioning your application for future advancements.
  10. Competitive Advantage: Adopting these cutting-edge technologies will give any business an edge over competitors still using older, less efficient methods.

Starter Kits​

Starter kits to roll into dreamineering repo

Showcase​

Best practice Nextjs projects to learn from.

Roadmap​

What does the 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
  • 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

Educators​