π Live Demo: startupchain.io
ENS Company Registry dApp - A decentralized application that allows users to register ENS names for companies, choose single or multi-owner structures, and set revenue split percentages.
- ENS Name Registration - Register ENS names for your business
- Multi-owner Support - Create single owner or Safe multisig structures
- Revenue Splitting - Set revenue split percentages between treasury and owners
- Email Onboarding - Support email authentication with embedded wallets via Privy
- Gasless Transactions - Enable gasless transactions for email users
- Next.js 14 with App Router
- React 18
- TypeScript
- Tailwind CSS
- Privy for Web3 authentication
- Wagmi + Viem for blockchain interactions
- ENS for domain registration
- Safe for multisig wallets
- TanStack Query for data fetching
- React Hook Form for form management
This project follows modern Next.js 13+ App Router patterns for optimal performance, SEO, and developer experience.
Server Components (SSG) + Client Components + Server Actions + TanStack Query
Use for: Static content, layout, SEO-critical content
// β
GOOD: Server Components
export default function Page() {
return (
<div>
<h1>Static Headline</h1> {/* SEO, fast loading */}
<ProductGrid /> {/* Static content */}
<Footer /> {/* Layout */}
</div>
)
}
Use for: User interactions, dynamic content, browser APIs
// β
GOOD: Client Components
'use client'
function SearchBar() {
const [query, setQuery] = useState('')
// User interactions, state management
}
Use for: Data fetching, caching, real-time updates
// β
GOOD: Reading data
const { data, isLoading } = useQuery({
queryKey: ['products', category],
queryFn: () => fetchProducts(category),
staleTime: 5 * 60 * 1000, // Cache 5 minutes
})
Use for: Data mutations, form submissions, security-critical operations
// β
GOOD: Writing data
'use server'
export async function createProduct(formData: FormData) {
// Database operations, file uploads, payments
}
Use for: Complex server logic, third-party integrations, blockchain interactions
// β
GOOD: Complex operations
export async function POST(request: Request) {
// Blockchain interactions, external APIs
}
Need to display data?
βββ Static/frequent visitors? β Server Components
βββ Dynamic/user-specific? β TanStack Query
βββ Real-time/updates? β TanStack Query + WebSockets
Need to handle user input?
βββ Form submission? β Server Actions
βββ Search/filtering? β TanStack Query
βββ Real-time input? β Client Components + TanStack Query
Need server-side processing?
βββ Simple read? β API Routes
βββ Complex mutation? β Server Actions
βββ File upload? β Server Actions
- Default to Server Components for static content
- Use Client Components only when necessary (user interactions, browser APIs)
- Keep components small and focused on single responsibilities
- Use TanStack Query for client-side data fetching
- Use Server Actions for data mutations and form submissions
- Use API Routes for complex server logic and blockchain interactions
- Always implement proper caching strategies
- Component state for UI-only state (modals, forms)
- TanStack Query for server state (API data)
- Context/Redux only for complex cross-component state
- Preserve SSG whenever possible
- Use dynamic imports for client-only components
- Implement proper loading states and error boundaries
- Optimize bundle size by code splitting
- Test SSG compatibility - Ensure new features don't break static generation
- Add proper TypeScript types - No
any
types allowed - Implement error handling - Graceful error states for all user interactions
- Add loading states - Users should always see feedback
- Test on different screen sizes - Responsive design required
- Architecture: Correct tool used for the job (Server vs Client vs API)
- Performance: SSG preserved, proper caching implemented
- TypeScript: Proper types, no
any
usage - Error Handling: Comprehensive error states
- Accessibility: ARIA labels, keyboard navigation
- Testing: Unit tests for critical functionality
// Server Component (SSG)
export default function ProductPage({ params }) {
const product = await getProduct(params.id) // Static generation
return (
<div>
<ProductInfo product={product} /> {/* Static content */}
<AddToCart product={product} /> {/* Client component */}
</div>
)
}
// Client Component
'use client'
function AddToCart({ product }) {
const { data } = useQuery(['cart'], fetchCart)
// Interactive features
}
// BAD: Making everything client
'use client'
export default function ProductPage() {
const [product, setProduct] = useState(null)
// Lost SSG benefits, slower loading
}
- Start with Server Components - Assume everything can be server-rendered
- Add Client Components gradually - Only when interactivity is needed
- Use TanStack Query for data - Automatic caching and state management
- Implement Server Actions for mutations - Secure server-side operations
- Test performance impact - Ensure SSG benefits are preserved
git clone [email protected]:zenbitETH/startupchain.git
cd startupchain
yarn install
Create a .env
file in the root directory:
cp .env.example .env
Add your Privy credentials to .env
:
# Get your app ID and secret at https://dashboard.privy.io
NEXT_PUBLIC_PRIVY_APP_ID=your_app_id_here
PRIVY_APP_SECRET=your_app_secret_here
- Go to Privy Dashboard
- Create a new app following this guide
- Copy your App ID and App Secret to the
.env
file - Configure your login methods (email, social, wallet)
- Set up embedded wallets if needed
yarn dev
Open http://localhost:3000 to see the application.
yarn dev
- Start development serveryarn build
- Build for productionyarn start
- Start production serveryarn lint
- Run ESLint
src/
βββ app/ # Next.js App Router pages
β βββ api/ # API routes for server logic
β βββ dashboard/ # User dashboard (authenticated)
β βββ layout.tsx # Root layout (Server Component)
β βββ page.tsx # Homepage (Server Component)
βββ components/ # React components
β βββ ui/ # Reusable UI components
β βββ auth/ # Authentication components
β βββ home/ # Homepage components
β βββ modals/ # Modal components
βββ hooks/ # Custom React hooks
βββ lib/ # Utilities and configurations
β βββ ens.ts # ENS utilities
β βββ providers.tsx # React providers
β βββ web3.ts # Web3 configuration
βββ styles/ # Global styles
The following contracts need to be implemented:
- CompanyRegistry.sol - Store company metadata, ENS names, treasury addresses
- RevenueManager.sol - Handle revenue splitting and withdrawals
- ENS Integration - Direct integration with ENS registrar contracts
- Safe Integration - Multi-signature wallet creation and management
This project is licensed under the MIT License.