Learning Objectives

• Optimize database queries
• Implement caching
• Lazy load React components

Step 1: Database Optimization

python
Run Inline
# Add indexes
class Post(db.Model):
    __tablename__ = 'posts'
    __table_args__ = (
        db.Index('idx_post_created', 'created_at'),
    )
# Use eager loading
posts = Post.query.options(db.joinedload(Post.author)).all()

Step 2: React Lazy Loading

jsx
import React, { Suspense, lazy } from 'react';
const Dashboard = lazy(() => import('./components/Dashboard'));
function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <Routes>
        <Route path="/dashboard" element={<Dashboard />} />
      </Routes>
    </Suspense>
  );
}

• Page load time < 3 seconds
• API response time < 200ms
• Lighthouse score > 80
• Database indexes added
• N+1 queries eliminated
• Caching implemented
• Lazy loading working
• Performance metrics documented Join Discord PreviousMilestone 6: Testing & DebuggingNextMilestone 8: Final Integration & Documentation