Building a Modern Fitness App with React and Django REST Framework

Why React + Django REST Framework?

When I built the first FitnessPro as a traditional Django monolith, it worked great — but the user experience felt like a traditional web app. Modern fitness apps need to feel snappy and responsive. That's why I rebuilt it as a React SPA backed by a Django REST API.

Setting Up the Django REST Backend

Django REST Framework (DRF) makes it remarkably easy to build a REST API from your existing Django models. The key is using ModelViewSet for standard CRUD operations and writing custom API views for anything more complex.

from rest_framework import viewsets
from rest_framework.permissions import IsAuthenticated

class ExerciseViewSet(viewsets.ReadOnlyModelViewSet):
    queryset = Exercise.objects.all()
    serializer_class = ExerciseSerializer
    permission_classes = [IsAuthenticated]
    
    def get_queryset(self):
        queryset = super().get_queryset()
        muscle = self.request.query_params.get('muscle')
        if muscle:
            queryset = queryset.filter(target_muscle=muscle)
        return queryset

Integrating Clerk Authentication

Clerk is genuinely the best authentication solution I've used. You get a beautiful sign-in/sign-up UI, social logins, JWT tokens — all out of the box. On the React side, it's just a few hooks:

import { useAuth, SignIn } from '@clerk/clerk-react';

function ProtectedRoute({ children }) {
  const { isSignedIn } = useAuth();
  return isSignedIn ? children : <SignIn />;
}

On the Django side, I validate Clerk JWTs using their JWKS endpoint, which lets me verify tokens without any server-to-server communication.

The ExerciseDB API

ExerciseDB provides a massive database of exercises with photos, GIFs, target muscles, and equipment. I created a React component that lets users search by muscle group, equipment type, or exercise name, with results displayed in a clean card grid.

Deployment

• Backend: Django REST API on PythonAnywhere
• Frontend: React app on Vercel (auto-deploys from GitHub)
• Auth: Clerk (managed)

The combination of Vercel for the frontend and PythonAnywhere for the backend gives you a fully deployed, production-grade app for free.

Check out the live demo and the source code.