Expert guidance for building a social media platform with Next.js, TypeScript, React, TailwindCSS, Supabase, Clerk auth, and modern state management patterns
Expert development rules for building a social media platform with best-in-class UI/UX inspired by Peerlist, using Next.js, TypeScript, React, TailwindCSS, Supabase, and modern tooling.
This skill provides guidance for projects using:
1. **Write concise, technical TypeScript code** with accurate examples
2. **Use functional and declarative programming patterns** - avoid classes
3. **Prefer iteration and modularization** over code duplication
4. **Use descriptive variable names** with auxiliary verbs (e.g., `isLoading`, `hasError`)
5. **Structure files logically**: exported components → subcomponents → helpers → static content → types
6. **Favor named exports** for components and functions
1. **Use TypeScript for all code**
2. **Prefer interfaces over types** for object shapes
3. **Utilize Zod** for schema validation and type inference
4. **Implement functional components** with TypeScript interfaces for props
```typescript
// Example component structure
import { z } from 'zod';
// Schema definition
const userSchema = z.object({
id: z.string(),
name: z.string(),
email: z.string().email(),
});
// Type inference
type User = z.infer<typeof userSchema>;
// Component props interface
interface UserProfileProps {
user: User;
isLoading: boolean;
}
// Functional component
export function UserProfile({ user, isLoading }: UserProfileProps) {
// Component implementation
}
```
1. **Use the `function` keyword** for pure functions
2. **Write declarative JSX** with clear and readable structure
```typescript
// Pure function example
function calculateUserScore(posts: number, likes: number): number {
return posts * 10 + likes * 2;
}
```
1. **Implement responsive design** with a mobile-first approach
2. **Use TailwindCSS** for styling
3. **Ensure styling consistency** across the application
4. **Focus on UI/UX excellence** inspired by Peerlist design patterns
```tsx
// Mobile-first responsive example
<div className="w-full px-4 md:px-6 lg:px-8">
<div className="max-w-2xl mx-auto lg:max-w-4xl">
{/* Content */}
</div>
</div>
```
```typescript
import { create } from 'zustand';
interface AppState {
user: User | null;
setUser: (user: User | null) => void;
}
export const useAppStore = create<AppState>((set) => ({
user: null,
setUser: (user) => set({ user }),
}));
```
```typescript
import { useQuery } from '@tanstack/react-query';
export function useUserPosts(userId: string) {
return useQuery({
queryKey: ['posts', userId],
queryFn: async () => {
const response = await fetch(`/api/posts/${userId}`);
if (!response.ok) throw new Error('Failed to fetch posts');
return response.json();
},
});
}
```
1. **Prioritize error handling and edge cases**
2. **Handle errors at the beginning of functions** using guard clauses
3. **Implement proper error logging** and user-friendly messages
4. **Use custom error types** for consistent error handling
```typescript
function processUserData(data: unknown): User {
// Early validation with guard clause
if (!data) {
throw new Error('User data is required');
}
// Zod validation
const result = userSchema.safeParse(data);
if (!result.success) {
console.error('Validation failed:', result.error);
throw new Error('Invalid user data format');
}
return result.data;
}
```
```typescript
function createPost(userId: string, content: string) {
// Handle preconditions early
if (!userId) {
throw new Error('User ID is required');
}
if (!content || content.trim().length === 0) {
throw new Error('Post content cannot be empty');
}
if (content.length > 5000) {
throw new Error('Post content exceeds maximum length');
}
// Main logic after all validations
return savePost({ userId, content });
}
```
1. **Use Supabase** for backend services, authentication, and database
2. **Follow Supabase security guidelines** (Row Level Security policies)
3. **Validate all data** with Zod schemas before database operations
4. **Use Uploadthing** for image storage
```typescript
import { createClient } from '@supabase/supabase-js';
import { z } from 'zod';
const supabase = createClient(process.env.SUPABASE_URL!, process.env.SUPABASE_KEY!);
// Zod schema for data validation
const postSchema = z.object({
title: z.string().min(1).max(200),
content: z.string().min(1),
userId: z.string().uuid(),
});
async function createPost(data: unknown) {
// Validate before DB operation
const validatedData = postSchema.parse(data);
const { data: post, error } = await supabase
.from('posts')
.insert(validatedData)
.select()
.single();
if (error) {
console.error('Database error:', error);
throw new Error('Failed to create post');
}
return post;
}
```
1. **Optimize for both web and mobile performance**
2. **Use React Query caching** to minimize unnecessary requests
3. **Implement lazy loading** for images and components
4. **Use Next.js Image component** for optimized images
5. **Implement code splitting** for large components
```tsx
import Image from 'next/image';
import { lazy, Suspense } from 'react';
const HeavyComponent = lazy(() => import('./HeavyComponent'));
export function OptimizedPage() {
return (
<div>
<Image
src="/profile.jpg"
alt="Profile"
width={200}
height={200}
loading="lazy"
/>
<Suspense fallback={<LoadingSpinner />}>
<HeavyComponent />
</Suspense>
</div>
);
}
```
1. **Clean, well-documented code** following project standards
2. **Consistent error handling and logging** across the application
3. **Follow official documentation** for all technologies
4. **Stay updated** with latest Next.js data fetching and routing conventions
5. **Ensure production-ready code** with proper security and maintainability
```typescript
// components/UserProfile.tsx
// Imports
import { useState } from 'react';
import { z } from 'zod';
// Schema and types
const userSchema = z.object({
id: z.string(),
name: z.string(),
avatar: z.string().url(),
});
type User = z.infer<typeof userSchema>;
// Props interface
interface UserProfileProps {
userId: string;
}
// Helper functions
function formatUserName(name: string): string {
return name.trim().split(' ').map(capitalize).join(' ');
}
// Main component
export function UserProfile({ userId }: UserProfileProps) {
const [isEditing, setIsEditing] = useState(false);
const { data: user, isLoading, error } = useQuery({
queryKey: ['user', userId],
queryFn: fetchUser,
});
// Guard clauses
if (isLoading) return <LoadingSpinner />;
if (error) return <ErrorMessage error={error} />;
if (!user) return <NotFound />;
// Main render
return (
<div className="w-full max-w-2xl mx-auto p-4">
{/* Component JSX */}
</div>
);
}
// Subcomponents
function LoadingSpinner() {
return <div className="animate-spin">Loading...</div>;
}
```
This skill is optimized for developing social media platforms with:
Always prioritize code clarity, type safety, error handling, and performance optimization in your implementations.
Leave a review
No reviews yet. Be the first to review this skill!
# Download SKILL.md from killerskills.ai/api/skills/mitralist-social-platform-development/raw