Skip to main content

React

SaaS Hammer React is a Next.js project which should work with SaaS Hammer Django backend via REST API.

Get Started​

Please make sure SaaS Hammer Django is already working in your local environment.

Create .env.development

NEXT_PUBLIC_API_URL=http://127.0.0.1:8000
$ npm install
$ npm run dev

Visit http://localhost:3000 and get started.

Techs​

  • Framework: Next.js (a React framework)
  • Language: TypeScript
  • UI:
    • React
    • Shadcn/UI for the component library
    • Tailwind CSS for styling
  • State Management: Zustand
  • Data Fetching: TanStack Query (React Query) and Axios
  • Forms: React Hook Form with Zod for validation
  • Tables: TanStack Table
  • File Uploads: Uppy
  • Linting: ESLint
  • Package Manager: npm

Workflow​

This frontend app is responsible for the user interface and interacts with the backend Django API to perform all data operations (CRUD). All business logic, authentication, and data storage are handled by the Django backend, while the frontend focuses on providing a responsive and user-friendly experience.

Whenever a user performs an action (such as creating, updating, or deleting data), the frontend sends a request to the backend API. The backend processes the request, applies any necessary business logic, and returns the result. The frontend then updates the UI based on the API response, handling both success and error states gracefully.

This clear separation allows for scalable development and makes it easy to maintain or extend either the frontend or backend independently.

The Django REST API docs are available at http://localhost:8000/api/docs/. You need to log in as admin to view them locally.

Backend Exception Handling​

The frontend is configured to handle exceptions from the Django REST Framework backend gracefully. Error handling is divided into two main categories.

Django REST Framework​

For general API calls made using axios, a response interceptor is in place (src/lib/api.ts).

If the backend returns a validation error (e.g., a 400 Bad Request), the response body is expected to follow a standard DRF error structure. The parseServerException utility (src/lib/error.ts) can be used to parse this response into a ServerException object. This object provides helpers to easily access error details, making it straightforward to display them in UI components.

If the backend returns a 401 Unauthorized error, the interceptor will automatically clear the user's session token from the local state, effectively logging them out.

Allauth​

For authentication-related operations (login, signup, password reset, etc.), a dedicated API client is used (src/lib/allauth.ts). This client communicates with the django-allauth endpoints.

When an API call via this client fails due to invalid user input or other issues, django-allauth has its own logic for returning a response that contains exceptions.

The getAllAuthErrorDict helper function (src/lib/allauth-errors.ts) is used to convert this list of errors into a dictionary. This allows form components to easily look up the error message for a specific field (e.g., email or password) and display it next to the corresponding input.