Developer Documentation

Table of Contents

Project Structure

The project is organized into frontend (Next.js, React, Tailwind, DaisyUI) and backend (Django, DRF, Djoser) folders. The frontend/public directory holds static assets. The frontend/app directory uses the Next.js App Router for routing and SSR.

Frontend Pages & Logic

  • Home Page (/): Landing page with hero, features, and CTA. Uses Navbar, Footer, and custom cards.
  • Blog (/blog): Lists blog posts, supports search/filter, and links to dynamic post pages. Uses shared posts.ts data.
  • Blog Post (/blog/[slug]): Dynamic route for each post. Supports comments, thumbs up/down, and auto metadata. Uses client-side state for demo.
  • Login/Register: Auth pages using NextAuth and custom forms.
  • Dashboard: Protected area for logged-in users, with profile, billing, templates, and workflow subpages.
  • Developer Docs (/developer-docs): This documentation page.
  • Other Pages: About, Privacy, Terms, Features, Pricing, Documentation, etc. Each page is a React component in app/.

Backend Overview

The backend uses Django, Django Rest Framework, and Djoser for API, authentication, and user management. Endpoints are consumed by the frontend via fetch or SWR.

Middleware & Security

The frontend/middleware.ts file handles authentication redirects and sets security headers (CSP, HSTS, X-Frame-Options, etc.) for all routes except static assets and API.

Reusable Components

UI is built with modular, functional React components. Common components include Navbar, Footer, Button, Input, Card, and custom feature cards. Components are in frontend/components/.

API & Data Flow

Data is fetched from the Django backend using REST endpoints. Client-side data fetching uses SWR for reactivity and caching. Blog data is currently static for demo but can be connected to the backend.

Authentication

Authentication is handled with NextAuth (frontend) and Djoser (backend). Middleware protects routes and redirects unauthenticated users. User context is provided via React Context API.

Styling & UI

Tailwind CSS and DaisyUI are used for styling. The design is responsive and modern, with gradients, cards, and utility classes. Custom themes can be added via Tailwind config.