
# From Idea to Deployment: My 30-Day Web App Challenge

Last month, I challenged myself to build and deploy a complete web application in 30 days. The result? [FPL Banter](https://www.fplbanter.com) - now serving thousands of users daily.

Here's my exact process.

## Week 1: Planning & Design (Days 1-7)

### Day 1-2: Problem Validation
- Identified pain point: FPL players wanted to share and compare failures
- Surveyed 50 potential users on Reddit r/FantasyPL
- Validated: 78% said they'd use it

### Day 3-4: Feature Planning
**MVP Features (Must-Have)**:
- User authentication
- FPL team connection
- Basic banter statistics
- Tournament creation

**Nice-to-Have** (Post-launch):
- Social sharing
- Advanced analytics
- Mobile app

### Day 5-7: Tech Stack Selection
- **Frontend**: React + Tailwind (fast development)
- **Backend**: FastAPI (type-safe, fast)
- **Database**: MongoDB (flexible schema)
- **Hosting**: Vercel (frontend) + DigitalOcean (backend)

## Week 2: Core Development (Days 8-14)

### Day 8-10: Authentication
```python
# FastAPI JWT auth
from fastapi import Depends, HTTPException
from jose import JWTError, jwt

def get_current_user(token: str = Depends(oauth2_scheme)):
    try:
        payload = jwt.decode(token, SECRET_KEY, algorithms=[ALGORITHM])
        user_id: str = payload.get("sub")
        if user_id is None:
            raise credentials_exception
    except JWTError:
        raise credentials_exception
    return user_id
```

**Time saved**: Used `python-jose` library instead of building from scratch

### Day 11-12: FPL API Integration
```python
import aiohttp

async def fetch_fpl_data(team_id: int):
    async with aiohttp.ClientSession() as session:
        async with session.get(
            f"https://fantasy.premierleague.com/api/entry/{team_id}/"
        ) as response:
            return await response.json()
```

**Gotcha**: FPL API rate limits. Solved with 5-minute caching.

### Day 13-14: Database Models
```python
from pydantic import BaseModel
from typing import List

class Tournament(BaseModel):
    id: str
    name: str
    commissioner_id: str
    members: List[str]
    created_at: datetime
```

## Week 3: Features & Polish (Days 15-21)

### Day 15-17: Banter Statistics
Built 8 different stat calculators:
```python
def calculate_benched_beast(team_history):
    total_benched_points = 0
    for gameweek in team_history:
        bench_points = sum(player.points for player in gameweek.bench)
        total_benched_points += bench_points
    return total_benched_points
```

### Day 18-19: UI/UX
- Used Shadcn UI components (saved 3 days)
- Dark mode by default (FPL players love it)
- Mobile-first design

### Day 20-21: Testing
```python
import pytest

def test_tournament_creation():
    response = client.post("/api/tournaments", json={
        "name": "Test League",
        "fpl_league_id": 123456
    })
    assert response.status_code == 201
    assert response.json()["name"] == "Test League"
```

## Week 4: Deployment & Launch (Days 22-30)

### Day 22-24: Deployment Setup
**Frontend (Vercel)**:
```bash
vercel --prod
```
Done in 2 minutes!

**Backend (DigitalOcean)**:
```dockerfile
FROM python:3.11-slim
WORKDIR /app
COPY requirements.txt .
RUN pip install -r requirements.txt
COPY . .
CMD ["uvicorn", "main:app", "--host", "0.0.0.0", "--port", "8000"]
```

### Day 25-26: Performance Optimization
- Added Redis caching
- Optimized database queries
- Compressed images
- Result: <200ms response times ✅

### Day 27: Soft Launch
- Posted on r/FantasyPL
- Shared with Twitter FPL community
- **50 users** in first 24 hours!

### Day 28-29: Bug Fixes
Real users found issues I missed:
- Rate limiting too aggressive
- Email verification broken on mobile
- Tournament invites not working

**Fixed all within 48 hours**

### Day 30: Official Launch
- Product Hunt launch
- LinkedIn announcement
- Email to beta users

**Results**: 500+ signups in first week!

## Lessons Learned

### What Worked ✅
1. **MVP First**: Launched with core features only
2. **Familiar Stack**: Used technologies I knew well
3. **User Feedback**: Involved users from day 1
4. **Time Boxing**: Strict daily goals kept me on track

### What I'd Do Differently ❌
1. **More Testing**: Found embarrassing bugs post-launch
2. **Beta Program**: Should have had 20 beta testers, not 5
3. **Documentation**: Wish I'd documented API earlier
4. **Marketing Plan**: Launch day was chaotic

## The Tools That Saved Me

- **Cursor/VSCode**: AI pair programming
- **Figma**: Quick mockups
- **Linear**: Task management
- **Vercel**: Zero-config deployment
- **Sentry**: Error tracking

## Time Breakdown

| Phase | Days | Percentage |
|-------|------|------------|
| Planning | 7 | 23% |
| Development | 14 | 47% |
| Testing | 3 | 10% |
| Deployment | 3 | 10% |
| Launch | 3 | 10% |

## Could You Do It Faster?

**Yes, if**:
- You use no-code tools (Bubble, Webflow)
- You skip custom features
- You use templates

**No, if**:
- You want custom functionality
- You're learning new tech
- You have a complex backend

## My 30-Day App Checklist

**Week 1: Planning**
- [ ] Validate problem with real users
- [ ] Define MVP features
- [ ] Choose tech stack
- [ ] Set up project structure

**Week 2: Core Development**
- [ ] Authentication system
- [ ] Database models
- [ ] Core API endpoints
- [ ] Basic UI

**Week 3: Features**
- [ ] Main features complete
- [ ] UI polished
- [ ] Write tests
- [ ] Get user feedback

**Week 4: Launch**
- [ ] Deploy to production
- [ ] Performance optimization
- [ ] Fix critical bugs
- [ ] Official launch!

## Final Thoughts

30 days is doable, but it's intense. I worked:
- **Weekdays**: 6-8 hours after work
- **Weekends**: 10-12 hours

**Total**: ~200 hours of focused work

Worth it? **Absolutely**. FPL Banter now has thousands of active users and growing.

---

**Want to try your own 30-day challenge?** Start with a problem you're passionate about. The motivation will carry you through the hard days.

**Connect with me:**
- [Live App: FPL Banter](https://www.fplbanter.com)
- [LinkedIn](https://www.linkedin.com/in/ola-benjamin-rx91)
- [Portfolio](https://t0yosi.vercel.app)


From Idea to Deployment: My 30-Day Web App Challenge


# My Full-Stack Developer Toolkit for 2025

After building 15+ production applications, I've refined my toolkit to maximize productivity and minimize headaches.

Here's everything I use, why I use it, and free alternatives.

## Frontend Development

### React Ecosystem

**Framework**: [Next.js 14](https://nextjs.org)
- Why: Built-in SSR, routing, API routes
- Free: Yes
- Alternative: Remix, Astro

**UI Library**: [Chakra UI](https://chakra-ui.com) or [Tailwind CSS](https://tailwindcss.com)
- Chakra for rapid prototyping
- Tailwind for custom designs
- Free: Yes

**State Management**:
- **Simple apps**: React Context
- **Complex apps**: [Zustand](https://zustand-demo.pmnd.rs/)
- Free: Yes
- Alternative: Redux Toolkit, Jotai

**Animations**: [Framer Motion](https://www.framer.com/motion/)
- Why: Declarative, performant
- Free: Yes
- Alternative: React Spring

## Backend Development

### Python Stack

**Framework**: [FastAPI](https://fastapi.tiangolo.com/)
- Why: Fast, type-safe, auto-docs
- Perfect for: APIs, microservices
- Free: Yes

**Framework #2**: [Django](https://www.djangoproject.com/)
- Why: Batteries included, admin panel
- Perfect for: Full applications, CMS
- Free: Yes

**ORM**:
- FastAPI: SQLAlchemy
- Django: Built-in ORM
- Free: Yes

### Node.js (When Needed)

**Framework**: Next.js API Routes
- Why: Same language as frontend
- Free: Yes

## Databases

### Primary Database

**PostgreSQL**
- Why: Reliable, feature-rich
- Host: [Supabase](https://supabase.com) (generous free tier)
- Alternative: [Railway](https://railway.app), AWS RDS

**MongoDB**
- Why: Flexible schema, fast queries
- Host: [MongoDB Atlas](https://www.mongodb.com/cloud/atlas) (512MB free)
- Use case: Rapidly evolving data models

### Caching & Real-time

**Redis**
- Why: Fast caching, pub/sub
- Host: [Upstash](https://upstash.com) (10K requests/day free)
- Alternative: Railway Redis

## Authentication

**Auth Provider**: [NextAuth.js](https://next-auth.js.org/)
- Why: OAuth providers, JWT, session management
- Free: Yes
- Alternative: Clerk ($0.02/MAU after 10K)

**For APIs**: Custom JWT with `python-jose`

## Deployment & Hosting

### Frontend

**Vercel** (Primary)
- Why: Zero-config, preview deployments, fast
- Free tier: Generous
- Perfect for: Next.js, React apps

### Backend

**Railway** or **DigitalOcean**
- Railway: $5/month, easy setup
- DigitalOcean: $6/month, more control

**Serverless Alternative**:
- Vercel Edge Functions
- Cloudflare Workers

## File Storage

**Vercel Blob Storage**
- Why: Integrated with Vercel, fast CDN
- Pricing: Pay as you go

**Alternative**:
- AWS S3 (cheaper at scale)
- Cloudinary (image optimization built-in)

## Email Services

**[Resend](https://resend.com)**
- Why: Developer-friendly API, React email templates
- Free: 3,000 emails/month
- Alternative: SendGrid, Mailgun

**Transactional Email Example**:
```typescript
import { Resend } from 'resend'

const resend = new Resend(process.env.RESEND_API_KEY)

await resend.emails.send({
  from: 'noreply@yourdomain.com',
  to: user.email,
  subject: 'Welcome!',
  react: <WelcomeEmail name={user.name} />
})
```

## Forms & Contact

**[Web3Forms](https://web3forms.com)**
- Why: No backend needed, free forever
- Free: Yes
- Alternative: Formspree, Tally

## Analytics

**[Vercel Analytics](https://vercel.com/analytics)**
- Why: Privacy-friendly, no cookies
- Pricing: $10/month
- Free alternative: Plausible, Umami (self-hosted)

**[Google Analytics 4](https://analytics.google.com)**
- Why: Industry standard, free
- Free: Yes

## Monitoring & Error Tracking

**[Sentry](https://sentry.io)**
- Why: Catch errors before users report them
- Free: 5K errors/month
- Alternative: LogRocket, Rollbar

## API Development

### Testing

**[Postman](https://www.postman.com)**
- Why: API testing, documentation
- Free: Yes

**[Hoppscotch](https://hoppscotch.io)** (Open Source Alternative)
- Lighter, faster
- Free: Yes

### Documentation

**[Swagger/OpenAPI](https://swagger.io)**
- FastAPI: Built-in
- Django: drf-yasg
- Free: Yes

## Version Control & CI/CD

**GitHub**
- Why: Industry standard, GitHub Actions
- Free: Unlimited public repos

**GitHub Actions** (CI/CD)
```yaml
name: Deploy
on:
  push:
    branches: [main]
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - run: npm test
      - run: vercel --prod
```

## Design & Prototyping

**[Figma](https://figma.com)**
- Why: Collaborative, components, prototypes
- Free: 3 files
- Alternative: Penpot (open source)

**Icon Libraries**:
- [React Icons](https://react-icons.github.io/react-icons/) - Free
- [Heroicons](https://heroicons.com/) - Free, beautiful

## Code Editor

**VS Code** with extensions:
- **ESLint**: Code linting
- **Prettier**: Code formatting
- **GitHub Copilot**: AI pair programming ($10/month for students)
- **Tailwind IntelliSense**: Tailwind autocomplete

## Documentation

**[README.so](https://readme.so)**
- Why: Beautiful README templates
- Free: Yes

**[Notion](https://notion.so)**
- Why: Project docs, wikis
- Free: Personal use

## Project Management

**[Linear](https://linear.app)**
- Why: Fast, clean, keyboard shortcuts
- Pricing: Free for small teams
- Alternative: GitHub Projects (free)

## Newsletter (If Needed)

**[ConvertKit](https://convertkit.com)**
- Free: Up to 1,000 subscribers
- Alternative: Buttondown, Substack

## Domain Names

**[Namecheap](https://namecheap.com)**
- Why: Cheap, good support
- Price: ~$10/year
- Alternative: Cloudflare Domains (at cost)

## My Complete Stack for New Projects

**Minimum Viable Stack** (All Free/Cheap):
```
Frontend:     Next.js + Tailwind CSS
Backend:      Next.js API Routes
Database:     Supabase (PostgreSQL)
Auth:         NextAuth.js
Forms:        Web3Forms
Email:        Resend (free tier)
Deployment:   Vercel
Monitoring:   Sentry (free tier)
Analytics:    Vercel Analytics / GA4
```

**Total Monthly Cost**: $0-20 depending on usage

**Production-Ready Stack**:
```
Frontend:     Next.js + Chakra UI
Backend:      FastAPI
Database:     PostgreSQL (Railway) + Redis (Upstash)
Auth:         Custom JWT
File Storage: Vercel Blob
Email:        Resend
Deployment:   Vercel (frontend) + Railway (backend)
Monitoring:   Sentry
Analytics:    Vercel Analytics
```

**Total Monthly Cost**: $15-30

## Learning Resources

**Free Courses**:
- [freeCodeCamp](https://www.freecodecamp.org) - Full-stack certification
- [Full Stack Open](https://fullstackopen.com) - Modern web development

**Paid (Worth It)**:
- [Frontend Masters](https://frontendmasters.com) - $39/month
- [Wes Bos Courses](https://wesbos.com/courses) - One-time purchase

## The "Should I Use This?" Framework

Before adopting a new tool, I ask:

1. **Does it solve a real problem?** (Not just hype)
2. **Is it actively maintained?** (Check GitHub issues)
3. **Is there good documentation?** (Can I learn it quickly?)
4. **What's the lock-in?** (Easy to switch later?)
5. **What's the pricing?** (Hidden costs?)

## Tools I Stopped Using

- ❌ Redux → Too complex for most apps
- ❌ MongoDB for everything → PostgreSQL is better for relational data
- ❌ Custom auth → NextAuth.js is easier
- ❌ Heroku → Too expensive vs Railway/Vercel

## Final Thoughts

**Don't chase every new tool**. Master a core stack first, then expand.

My rule: **If it doesn't save time or money, skip it**.

---

**What's in your toolkit?** I'm always looking for better tools. Connect with me on [LinkedIn](https://www.linkedin.com/in/ola-benjamin-rx91) and share what you're using!

**See these tools in action**:
- [My Portfolio](https://t0yosi.vercel.app)
- [GitHub](https://github.com/t0yosi)


My Full-Stack Developer Toolkit for 2025


# Next.js 14 App Router: Building Production-Ready Travel Platforms

When building [Bisoa Travels](https://bisoa-travels.vercel.app), I had the opportunity to leverage Next.js 14's latest features. Here's what I learned building a production travel platform from scratch.

## Why Next.js 14?

The App Router isn't just a new routing system - it's a fundamental shift in how we build React applications:

- **Server Components by default** - Better performance out of the box
- **Streaming & Suspense** - Progressive page loading
- **Better SEO** - True server-side rendering
- **TypeScript-first** - Better developer experience

## Project Structure

```
bisoa-travels/
├── app/
│   ├── (routes)/
│   │   ├── destinations/
│   │   ├── bookings/
│   │   └── contact/
│   ├── api/
│   │   ├── bookings/route.ts
│   │   └── documents/route.ts
│   └── layout.tsx
├── components/
├── lib/
└── prisma/
```

## Server Components FTW

One of the biggest wins: fetching data directly in components:

```tsx
// app/destinations/[id]/page.tsx
import { prisma } from '@/lib/prisma'

export default async function DestinationPage({
  params
}: {
  params: { id: string }
}) {
  // This runs on the server!
  const destination = await prisma.destination.findUnique({
    where: { id: params.id },
    include: {
      hotels: true,
      activities: true,
      reviews: true
    }
  })

  return <DestinationDetails destination={destination} />
}
```

**No useState, no useEffect, no loading states** - just clean, simple code.

## Streaming with Suspense

For slow-loading sections, use Suspense:

```tsx
import { Suspense } from 'react'

export default function BookingPage() {
  return (
    <div>
      <Hero />

      <Suspense fallback={<PackagesSkeleton />}>
        <TravelPackages />
      </Suspense>

      <Suspense fallback={<ReviewsSkeleton />}>
        <CustomerReviews />
      </Suspense>
    </div>
  )
}
```

The page loads progressively - users see content immediately!

## API Routes with Route Handlers

Creating booking APIs is clean and type-safe:

```typescript
// app/api/bookings/route.ts
import { NextRequest, NextResponse } from 'next/server'
import { z } from 'zod'
import { prisma } from '@/lib/prisma'

const BookingSchema = z.object({
  destination: z.string(),
  startDate: z.string().datetime(),
  endDate: z.string().datetime(),
  travelers: z.number().min(1),
  email: z.string().email()
})

export async function POST(request: NextRequest) {
  try {
    const body = await request.json()
    const data = BookingSchema.parse(body)

    const booking = await prisma.booking.create({
      data: {
        ...data,
        status: 'PENDING'
      }
    })

    // Send confirmation email
    await sendBookingConfirmation(booking)

    return NextResponse.json(booking, { status: 201 })
  } catch (error) {
    if (error instanceof z.ZodError) {
      return NextResponse.json(
        { error: 'Validation failed', details: error.errors },
        { status: 400 }
      )
    }
    return NextResponse.json(
      { error: 'Internal server error' },
      { status: 500 }
    )
  }
}
```

## Image Optimization

Next.js Image component is amazing:

```tsx
import Image from 'next/image'

<Image
  src="/destinations/paris.jpg"
  alt="Paris destination"
  width={800}
  height={600}
  placeholder="blur"
  blurDataURL="data:image/..."
  priority={isAboveFold}
/>
```

**Result**: Automatic WebP/AVIF conversion, responsive sizes, lazy loading!

## Document Verification with Google Cloud Vision

For travel document uploads, I integrated AI verification:

```typescript
// app/api/documents/verify/route.ts
import { ImageAnnotatorClient } from '@google-cloud/vision'

const client = new ImageAnnotatorClient()

export async function POST(request: NextRequest) {
  const formData = await request.formData()
  const file = formData.get('document') as File

  const buffer = Buffer.from(await file.arrayBuffer())

  // Detect text in document
  const [result] = await client.textDetection(buffer)
  const text = result.fullTextAnnotation?.text

  // Validate passport/ID
  const isValid = validateDocument(text)

  return NextResponse.json({
    valid: isValid,
    confidence: result.confidence
  })
}
```

## Performance Optimizations

### 1. Metadata for SEO

```typescript
// app/destinations/[id]/page.tsx
export async function generateMetadata({
  params
}: {
  params: { id: string }
}): Promise<Metadata> {
  const destination = await getDestination(params.id)

  return {
    title: `${destination.name} - Bisoa Travels`,
    description: destination.description,
    openGraph: {
      title: destination.name,
      description: destination.description,
      images: [destination.image]
    }
  }
}
```

### 2. Static Generation for Popular Routes

```typescript
export async function generateStaticParams() {
  const destinations = await prisma.destination.findMany({
    where: { popular: true }
  })

  return destinations.map(dest => ({
    id: dest.id
  }))
}
```

### 3. Edge Runtime for Geo-Location

```typescript
export const runtime = 'edge'

export async function GET(request: NextRequest) {
  const country = request.geo?.country || 'US'
  const currency = getCurrencyByCountry(country)

  return NextResponse.json({ currency })
}
```

## Rate Limiting with Upstash Redis

```typescript
import { Ratelimit } from '@upstash/ratelimit'
import { Redis } from '@upstash/redis'

const ratelimit = new Ratelimit({
  redis: Redis.fromEnv(),
  limiter: Ratelimit.slidingWindow(10, '10 s')
})

export async function POST(request: NextRequest) {
  const ip = request.ip ?? '127.0.0.1'
  const { success } = await ratelimit.limit(ip)

  if (!success) {
    return NextResponse.json(
      { error: 'Too many requests' },
      { status: 429 }
    )
  }

  // Process request...
}
```

## Email Notifications with Resend

```typescript
import { Resend } from 'resend'

const resend = new Resend(process.env.RESEND_API_KEY)

async function sendBookingConfirmation(booking: Booking) {
  await resend.emails.send({
    from: 'bookings@bisoatravels.com',
    to: booking.email,
    subject: 'Your Booking Confirmation',
    react: <BookingConfirmationEmail booking={booking} />
  })
}
```

## Deployment on Vercel

One command: `vercel deploy`

Features you get free:
- Automatic HTTPS
- Global CDN
- Preview deployments
- Analytics
- Edge functions

## Performance Results

- **Lighthouse Score**: 98/100
- **First Contentful Paint**: 0.8s
- **Time to Interactive**: 1.2s
- **Total Blocking Time**: 50ms

## Lessons Learned

1. **Server Components are the default** - use Client Components sparingly
2. **Streaming is powerful** - don't wait for all data before rendering
3. **Type safety saves time** - Zod + TypeScript catch errors early
4. **Edge runtime is fast** - use it for geolocation, auth checks
5. **Image optimization matters** - Next/Image is non-negotiable

## What's Next?

Exploring:
- Parallel Routes for complex UIs
- Intercepting Routes for modals
- Server Actions for forms
- Partial Prerendering (experimental)

---

**Building with Next.js 14?** I'd love to see what you're working on! Check out [Bisoa Travels](https://bisoa-travels.vercel.app) for a live example.

**Connect:**
- [LinkedIn](https://www.linkedin.com/in/ola-benjamin-rx91)
- [GitHub](https://github.com/t0yosi)
- [Portfolio](https://t0yosi.vercel.app)


Next.js 14 App Router: Building Production-Ready Travel Platforms


# React Performance Optimization: From 3s to 300ms Load Time

When I launched the initial version of my travel platform, users complained about slow load times. The homepage took **3+ seconds** to become interactive. After optimization, I got it down to **<300ms**.

Here's exactly how I did it.

## The Performance Problem

Initial metrics were terrible:
- **First Contentful Paint**: 2.8s
- **Time to Interactive**: 4.1s
- **Total Bundle Size**: 847KB (gzipped)
- **Lighthouse Score**: 62/100

Users were bouncing before the page even loaded.

## Optimization #1: Code Splitting

**Problem**: Shipping one massive JavaScript bundle.

**Solution**: Split code by route:

```jsx
// Before: Everything in one bundle
import Dashboard from './pages/Dashboard'
import Profile from './pages/Profile'
import Settings from './pages/Settings'

// After: Lazy load route components
const Dashboard = lazy(() => import('./pages/Dashboard'))
const Profile = lazy(() => import('./pages/Profile'))
const Settings = lazy(() => import('./pages/Settings'))

function App() {
  return (
    <Suspense fallback={<PageLoader />}>
      <Routes>
        <Route path="/dashboard" element={<Dashboard />} />
        <Route path="/profile" element={<Profile />} />
        <Route path="/settings" element={<Settings />} />
      </Routes>
    </Suspense>
  )
}
```

**Result**: Initial bundle dropped from 847KB to 234KB (-72%)

## Optimization #2: Memoization

**Problem**: Expensive calculations running on every render.

### useMemo for Expensive Computations

```jsx
function DestinationList({ destinations, filters }) {
  // BAD: Recalculates on every render
  const filtered = destinations
    .filter(d => d.price <= filters.maxPrice)
    .sort((a, b) => b.rating - a.rating)

  // GOOD: Only recalculates when dependencies change
  const filteredDestinations = useMemo(() => {
    return destinations
      .filter(d => d.price <= filters.maxPrice)
      .sort((a, b) => b.rating - a.rating)
  }, [destinations, filters.maxPrice])

  return <List items={filteredDestinations} />
}
```

### React.memo for Component Memoization

```jsx
// Expensive component that shouldn't re-render unnecessarily
const DestinationCard = React.memo(({ destination, onBook }) => {
  return (
    <Card>
      <Image src={destination.image} />
      <Title>{destination.name}</Title>
      <Price>${destination.price}</Price>
      <Button onClick={() => onBook(destination.id)}>
        Book Now
      </Button>
    </Card>
  )
}, (prevProps, nextProps) => {
  // Custom comparison function
  return prevProps.destination.id === nextProps.destination.id
})
```

### useCallback for Event Handlers

```jsx
function BookingForm() {
  const [bookings, setBookings] = useState([])

  // BAD: Creates new function on every render
  const handleBook = (id) => {
    setBookings(prev => [...prev, id])
  }

  // GOOD: Function reference stays stable
  const handleBook = useCallback((id) => {
    setBookings(prev => [...prev, id])
  }, [])

  return (
    <DestinationList onBook={handleBook} />
  )
}
```

## Optimization #3: Virtualization

**Problem**: Rendering 1000+ items in a list kills performance.

**Solution**: React Window (virtualization):

```jsx
import { FixedSizeList } from 'react-window'

function DestinationList({ destinations }) {
  const Row = ({ index, style }) => (
    <div style={style}>
      <DestinationCard destination={destinations[index]} />
    </div>
  )

  return (
    <FixedSizeList
      height={600}
      itemCount={destinations.length}
      itemSize={200}
      width="100%"
    >
      {Row}
    </FixedSizeList>
  )
}
```

**Result**: Render time for 1000 items: 2400ms → 45ms (98% faster!)

## Optimization #4: Image Optimization

**Problem**: Shipping huge images (2MB+ per image).

**Solution**: Next.js Image component + modern formats:

```jsx
import Image from 'next/image'

// Before: Regular img tag
<img src="/paris.jpg" alt="Paris" />
// Size: 2.3MB, format: JPEG

// After: Optimized Next.js Image
<Image
  src="/paris.jpg"
  alt="Paris"
  width={800}
  height={600}
  placeholder="blur"
  blurDataURL="data:image/jpeg;base64,..."
  quality={85}
  formats={['image/avif', 'image/webp']}
/>
// Size: 47KB, format: AVIF
```

**Result**: 98% reduction in image payload!

## Optimization #5: Debouncing Search

**Problem**: API call on every keystroke.

```jsx
import { useDebouncedCallback } from 'use-debounce'

function SearchBar() {
  const [results, setResults] = useState([])

  const handleSearch = useDebouncedCallback(
    async (query) => {
      const data = await fetch(`/api/search?q=${query}`)
      setResults(data)
    },
    500  // Wait 500ms after user stops typing
  )

  return (
    <input
      onChange={(e) => handleSearch(e.target.value)}
      placeholder="Search destinations..."
    />
  )
}
```

**Result**: Reduced API calls by 95%

## Optimization #6: Prefetching

Load data before user clicks:

```jsx
import { useEffect } from 'react'
import { useRouter } from 'next/router'

function DestinationCard({ destination }) {
  const router = useRouter()

  const handleMouseEnter = () => {
    // Prefetch the destination page
    router.prefetch(`/destinations/${destination.id}`)
  }

  return (
    <Card onMouseEnter={handleMouseEnter}>
      <Link href={`/destinations/${destination.id}`}>
        <Image src={destination.image} />
        <Title>{destination.name}</Title>
      </Link>
    </Card>
  )
}
```

**Result**: Near-instant page transitions!

## Optimization #7: Bundle Analysis

Find what's bloating your bundle:

```bash
# Install bundle analyzer
npm install --save-dev @next/bundle-analyzer

# Add to next.config.js
const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
})

module.exports = withBundleAnalyzer({
  // your config
})

# Run analysis
ANALYZE=true npm run build
```

**Findings**:
- Moment.js (300KB) → Replaced with date-fns (12KB)
- Lodash (71KB) → Use individual imports
- Unused dependencies removed

**Result**: Another 350KB saved!

## Optimization #8: Lighthouse CI

Automate performance testing:

```yaml
# .github/workflows/lighthouse.yml
name: Lighthouse CI
on: [pull_request]

jobs:
  lighthouse:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Run Lighthouse CI
        uses: treosh/lighthouse-ci-action@v8
        with:
          urls: |
            https://staging.example.com
          uploadArtifacts: true
```

Never ship slow code again!

## Final Results

| Metric | Before | After | Improvement |
|--------|--------|-------|-------------|
| **FCP** | 2.8s | 0.4s | **-86%** |
| **TTI** | 4.1s | 0.9s | **-78%** |
| **Bundle** | 847KB | 234KB | **-72%** |
| **Lighthouse** | 62 | **96** | **+55%** |

## The Checklist

- [ ] Code split by route
- [ ] Memoize expensive calculations
- [ ] Virtualize long lists
- [ ] Optimize images (AVIF/WebP)
- [ ] Debounce user input
- [ ] Prefetch likely navigations
- [ ] Analyze bundle size
- [ ] Remove unused dependencies
- [ ] Lazy load below-the-fold content
- [ ] Enable compression (Gzip/Brotli)

## Tools I Use

1. **Chrome DevTools** - Performance profiling
2. **React DevTools Profiler** - Component render times
3. **Lighthouse** - Overall performance score
4. **Bundle Phobia** - Check package sizes before installing
5. **Web Vitals** - Real user metrics

## Common Mistakes to Avoid

1. ❌ Using `index` as key in lists
2. ❌ Inline function definitions in JSX
3. ❌ Not memoizing context values
4. ❌ Forgetting to cleanup useEffect
5. ❌ Overusing state (derive when possible)

## Conclusion

Performance isn't a feature - it's a requirement. Users expect fast, smooth experiences. These optimizations took my app from "barely usable" to "blazing fast."

Start with code splitting and image optimization - you'll see the biggest wins there.

---

**Want to see these techniques in action?** Check out my [portfolio projects](https://t0yosi.vercel.app/works) or connect on [LinkedIn](https://www.linkedin.com/in/ola-benjamin-rx91).

**Further Reading:**
- [React Performance Documentation](https://react.dev/learn/render-and-commit)
- [Web.dev Performance](https://web.dev/performance)
- [Next.js Optimization Guide](https://nextjs.org/docs/app/building-your-application/optimizing)


React Performance Optimization: From 3s to 300ms Load Time


# Building Scalable APIs with FastAPI: Lessons from FPL Banter

When I started building [FPL Banter](https://www.fplbanter.com), a social platform for Fantasy Premier League managers, I knew performance would be critical. With thousands of users expecting real-time data from the official FPL API, I needed a solution that was fast, scalable, and developer-friendly.

Enter **FastAPI** - and it exceeded every expectation.

## Why FastAPI?

Coming from a Django background, I was initially hesitant to switch frameworks. But FastAPI offered three killer features:

1. **Speed**: Built on Starlette and Pydantic, it's one of the fastest Python frameworks available
2. **Automatic Documentation**: Swagger UI and ReDoc out of the box
3. **Type Safety**: Pydantic models catch errors before they reach production

## The Challenge: Rate Limits & Data Freshness

The FPL API has strict rate limits. My challenge was:
- Serve fresh data to thousands of users
- Avoid hitting rate limits
- Keep response times under 200ms

### Solution: Intelligent Caching

```python
from functools import lru_cache
from datetime import datetime, timedelta

class FPLCache:
    def __init__(self, ttl_seconds=300):  # 5-minute cache
        self.cache = {}
        self.ttl = timedelta(seconds=ttl_seconds)

    def get(self, key):
        if key in self.cache:
            data, timestamp = self.cache[key]
            if datetime.now() - timestamp < self.ttl:
                return data
        return None

    def set(self, key, value):
        self.cache[key] = (value, datetime.now())
```

This simple caching strategy reduced our API calls by **95%** while keeping data fresh.

## Performance Optimizations

### 1. Async Everything

```python
@app.get("/leagues/{league_id}/standings")
async def get_standings(league_id: int):
    # Non-blocking database calls
    league = await db.leagues.find_one({"_id": league_id})

    # Parallel API calls
    async with aiohttp.ClientSession() as session:
        tasks = [fetch_player_data(session, player_id)
                for player_id in league['members']]
        results = await asyncio.gather(*tasks)

    return process_standings(results)
```

**Result**: Response times dropped from 2s to 180ms

### 2. Background Tasks

For heavy operations, use FastAPI's background tasks:

```python
from fastapi import BackgroundTasks

@app.post("/leagues/{league_id}/refresh")
async def refresh_league(
    league_id: int,
    background_tasks: BackgroundTasks
):
    background_tasks.add_task(
        update_league_data,
        league_id
    )
    return {"status": "Refresh started"}
```

### 3. Pagination

Never return unbounded lists:

```python
@app.get("/banter-stats")
async def get_banter_stats(
    skip: int = 0,
    limit: int = 20
):
    stats = await db.stats.find()\
        .skip(skip)\
        .limit(min(limit, 100))  # Cap at 100
    return stats
```

## Database Design with MongoDB

MongoDB's flexibility was perfect for rapidly evolving banter statistics:

```python
# Schema-less banter stats
{
    "user_id": "12345",
    "tournament_id": "fpl_banter",
    "stats": {
        "benched_beast": 156,
        "captain_catastrophe": 89,
        "differential_genius": 23
    },
    "updated_at": "2025-01-15T10:30:00Z"
}
```

No migrations needed when adding new stat types!

## Monitoring & Error Handling

```python
from fastapi import HTTPException
import logging

logger = logging.getLogger(__name__)

@app.get("/api/data")
async def get_data():
    try:
        data = await fetch_from_fpl()
        return data
    except RateLimitError:
        logger.warning("FPL rate limit hit")
        # Return cached data
        return get_cached_data()
    except Exception as e:
        logger.error(f"Unexpected error: {e}")
        raise HTTPException(
            status_code=500,
            detail="Internal server error"
        )
```

## Results

After 6 months in production:

- **99.9% uptime**
- **<200ms average response time**
- **Zero rate limit violations**
- **Thousands of daily active users**

## Key Takeaways

1. **Use async/await** everywhere - it's a game changer
2. **Cache aggressively** - but keep it fresh
3. **Monitor everything** - you can't improve what you don't measure
4. **Plan for failure** - the FPL API will go down, be ready

## What's Next?

I'm exploring:
- WebSocket support for real-time updates
- GraphQL layer for flexible querying
- Redis for distributed caching

---

**Have you built APIs with FastAPI?** I'd love to hear about your experience! Connect with me on [LinkedIn](https://www.linkedin.com/in/ola-benjamin-rx91) or check out the [FPL Banter project](https://www.fplbanter.com).

**Related Projects:**
- [FPL Banter](https://www.fplbanter.com) - Live FastAPI application
- [GitHub](https://github.com/t0yosi) - More projects & code samples


Building Scalable APIs with FastAPI: Lessons from FPL Banter


# Django REST Framework: Building a Social Platform from Scratch

Django has been my go-to framework for backend development, and building [Coonected](https://www.coonected.com) taught me invaluable lessons about scaling, security, and API design.

## Why Django REST Framework?

For [Coonected](https://www.coonected.com), I needed:
- Robust authentication & authorization
- Complex relational data models
- RESTful API for React frontend
- Admin panel for content moderation

Django REST Framework (DRF) provided all of this out of the box.

## Project Architecture

```
coonected/
├── Django_Backend/
│   ├── users/
│   ├── posts/
│   ├── connections/
│   ├── notifications/
│   └── api/
│       ├── serializers/
│       ├── views/
│       └── urls.py
└── React_Frontend/
```

## Data Models: The Foundation

```python
# users/models.py
from django.contrib.auth.models.AbstractUser import AbstractUser

class User(AbstractUser):
    bio = models.TextField(max_length=500, blank=True)
    avatar = models.ImageField(upload_to='avatars/', null=True)
    location = models.CharField(max_length=100, blank=True)
    website = models.URLField(blank=True)
    created_at = models.DateTimeField(auto_now_add=True)
    followers = models.ManyToManyField(
        'self',
        symmetrical=False,
        related_name='following'
    )

    class Meta:
        indexes = [
            models.Index(fields=['username']),
            models.Index(fields=['created_at']),
        ]
```

## Serializers: Data Transformation

```python
# api/serializers/user.py
from rest_framework import serializers

class UserSerializer(serializers.ModelSerializer):
    followers_count = serializers.IntegerField(
        source='followers.count',
        read_only=True
    )
    following_count = serializers.IntegerField(
        source='following.count',
        read_only=True
    )
    is_following = serializers.SerializerMethodField()

    class Meta:
        model = User
        fields = [
            'id', 'username', 'bio', 'avatar',
            'followers_count', 'following_count',
            'is_following'
        ]

    def get_is_following(self, obj):
        request = self.context.get('request')
        if request and request.user.is_authenticated:
            return obj.followers.filter(
                id=request.user.id
            ).exists()
        return False
```

## ViewSets: Clean API Endpoints

```python
# api/views/user.py
from rest_framework import viewsets, status
from rest_framework.decorators import action
from rest_framework.response import Response
from rest_framework.permissions import IsAuthenticated

class UserViewSet(viewsets.ModelViewSet):
    queryset = User.objects.all()
    serializer_class = UserSerializer
    permission_classes = [IsAuthenticated]

    @action(detail=True, methods=['post'])
    def follow(self, request, pk=None):
        user_to_follow = self.get_object()

        if user_to_follow == request.user:
            return Response(
                {'error': 'Cannot follow yourself'},
                status=status.HTTP_400_BAD_REQUEST
            )

        request.user.following.add(user_to_follow)

        # Create notification
        Notification.objects.create(
            user=user_to_follow,
            type='FOLLOW',
            actor=request.user
        )

        return Response({'status': 'following'})

    @action(detail=True, methods=['post'])
    def unfollow(self, request, pk=None):
        user_to_unfollow = self.get_object()
        request.user.following.remove(user_to_unfollow)
        return Response({'status': 'unfollowed'})
```

## Custom Permissions

```python
# api/permissions.py
from rest_framework import permissions

class IsOwnerOrReadOnly(permissions.BasePermission):
    def has_object_permission(self, request, view, obj):
        if request.method in permissions.SAFE_METHODS:
            return True
        return obj.user == request.user

class IsVerifiedUser(permissions.BasePermission):
    message = 'Please verify your email first.'

    def has_permission(self, request, view):
        return request.user.is_verified
```

## Pagination for Performance

```python
# settings.py
REST_FRAMEWORK = {
    'DEFAULT_PAGINATION_CLASS':
        'rest_framework.pagination.PageNumberPagination',
    'PAGE_SIZE': 20,
    'MAX_PAGE_SIZE': 100
}

# Custom pagination
from rest_framework.pagination import CursorPagination

class PostPagination(CursorPagination):
    page_size = 20
    ordering = '-created_at'  # Newest first
    cursor_query_param = 'cursor'
```

## Feed Algorithm

```python
# api/views/feed.py
from django.db.models import Q, Count

class FeedViewSet(viewsets.ReadOnlyModelViewSet):
    permission_classes = [IsAuthenticated]
    pagination_class = PostPagination

    def get_queryset(self):
        user = self.request.user

        # Posts from people you follow + your own posts
        return Post.objects.filter(
            Q(user__in=user.following.all()) | Q(user=user)
        ).select_related(
            'user'
        ).prefetch_related(
            'likes', 'comments'
        ).annotate(
            likes_count=Count('likes'),
            comments_count=Count('comments')
        ).order_by('-created_at')
```

## Query Optimization

### Problem: N+1 Queries

```python
# BAD - Causes N+1 queries
posts = Post.objects.all()
for post in posts:
    print(post.user.username)  # Extra query for each post!
```

### Solution: select_related & prefetch_related

```python
# GOOD - Single query with JOIN
posts = Post.objects.select_related('user').all()
for post in posts:
    print(post.user.username)  # No extra queries!

# For many-to-many
posts = Post.objects.prefetch_related('likes', 'comments').all()
```

## Caching with Redis

```python
# settings.py
CACHES = {
    'default': {
        'BACKEND': 'django_redis.cache.RedisCache',
        'LOCATION': 'redis://127.0.0.1:6379/1',
        'OPTIONS': {
            'CLIENT_CLASS': 'django_redis.client.DefaultClient',
        }
    }
}

# views.py
from django.core.cache import cache
from django.utils.decorators import method_decorator
from django.views.decorators.cache import cache_page

class TrendingPostsView(APIView):
    @method_decorator(cache_page(60 * 15))  # 15 minutes
    def get(self, request):
        trending = Post.objects.filter(
            created_at__gte=timezone.now() - timedelta(days=7)
        ).annotate(
            engagement=Count('likes') + Count('comments')
        ).order_by('-engagement')[:10]

        serializer = PostSerializer(trending, many=True)
        return Response(serializer.data)
```

## Real-time Notifications with Signals

```python
# notifications/signals.py
from django.db.models.signals import post_save
from django.dispatch import receiver

@receiver(post_save, sender=Comment)
def create_comment_notification(sender, instance, created, **kwargs):
    if created and instance.user != instance.post.user:
        Notification.objects.create(
            user=instance.post.user,
            type='COMMENT',
            actor=instance.user,
            post=instance.post,
            content_object=instance
        )
```

## File Uploads to Cloud Storage

```python
# settings.py
MEDIA_URL = '/media/'

# For production: AWS S3
if not DEBUG:
    DEFAULT_FILE_STORAGE = 'storages.backends.s3boto3.S3Boto3Storage'
    AWS_STORAGE_BUCKET_NAME = 'coonected-media'

# api/views/posts.py
from rest_framework.parsers import MultiPartParser, FormParser

class PostViewSet(viewsets.ModelViewSet):
    parser_classes = (MultiPartParser, FormParser)

    def create(self, request):
        serializer = PostSerializer(
            data=request.data,
            context={'request': request}
        )
        if serializer.is_valid():
            serializer.save(user=request.user)
            return Response(
                serializer.data,
                status=status.HTTP_201_CREATED
            )
        return Response(
            serializer.errors,
            status=status.HTTP_400_BAD_REQUEST
        )
```

## Testing the API

```python
# tests/test_api.py
from rest_framework.test import APITestCase
from django.contrib.auth import get_user_model

User = get_user_model()

class UserAPITest(APITestCase):
    def setUp(self):
        self.user = User.objects.create_user(
            username='testuser',
            password='testpass123'
        )
        self.client.force_authenticate(user=self.user)

    def test_follow_user(self):
        other_user = User.objects.create_user(
            username='otheruser',
            password='pass123'
        )

        url = f'/api/users/{other_user.id}/follow/'
        response = self.client.post(url)

        self.assertEqual(response.status_code, 200)
        self.assertTrue(
            other_user.followers.filter(id=self.user.id).exists()
        )
```

## Security Best Practices

### 1. Rate Limiting

```python
# settings.py
REST_FRAMEWORK = {
    'DEFAULT_THROTTLE_CLASSES': [
        'rest_framework.throttling.AnonRateThrottle',
        'rest_framework.throttling.UserRateThrottle'
    ],
    'DEFAULT_THROTTLE_RATES': {
        'anon': '100/day',
        'user': '1000/day'
    }
}
```

### 2. CORS Configuration

```python
# settings.py
CORS_ALLOWED_ORIGINS = [
    "https://coonected.com",
    "https://www.coonected.com",
]

CORS_ALLOW_CREDENTIALS = True
```

### 3. JWT Authentication

```python
# settings.py
REST_FRAMEWORK = {
    'DEFAULT_AUTHENTICATION_CLASSES': [
        'rest_framework_simplejwt.authentication.JWTAuthentication',
    ],
}

SIMPLE_JWT = {
    'ACCESS_TOKEN_LIFETIME': timedelta(minutes=60),
    'REFRESH_TOKEN_LIFETIME': timedelta(days=7),
}
```

## Deployment Checklist

- [x] DEBUG = False
- [x] SECRET_KEY from environment
- [x] Database on managed service (RDS, DigitalOcean)
- [x] Static files on CDN (S3 + CloudFront)
- [x] HTTPS only (Redirect HTTP)
- [x] Database backups automated
- [x] Monitoring (Sentry for errors)
- [x] Logging (CloudWatch, Papertrail)

## Performance Results

- **500+ concurrent users** handled smoothly
- **<100ms API response time** (90th percentile)
- **99.95% uptime** over 6 months

## Key Takeaways

1. **Use select_related/prefetch_related** - Avoid N+1 queries
2. **Cache aggressively** - Redis is your friend
3. **Index your databases** - Especially foreign keys and timestamps
4. **Test your APIs** - Don't ship broken endpoints
5. **Monitor everything** - You can't fix what you can't see

---

**Building with Django?** I'd love to hear about your experience! Check out [Coonected](https://www.coonected.com) or connect with me on [LinkedIn](https://www.linkedin.com/in/ola-benjamin-rx91).

**More Projects:**
- [My Portfolio](https://t0yosi.vercel.app)
- [GitHub](https://github.com/t0yosi)


Blog

From Idea to Deployment: My 30-Day Web App Challenge

My Full-Stack Developer Toolkit for 2025

Next.js 14 App Router: Building Production-Ready Travel Platforms

React Performance Optimization: From 3s to 300ms Load Time

Building Scalable APIs with FastAPI: Lessons from FPL Banter

Django REST Framework: Building a Social Platform from Scratch

Let's Build Something Great