DEV Community

Insight 105
Insight 105

Posted on

React Application Architecture

#react #frontend #javascript #architecture

After completing the entire backend foundation, we shift our focus to the frontend side. Unlike a typical informational website, an online exam interface must be designed to handle:

  • Intense and rapid user interactions
  • Frequent state changes
  • Unstable network connections
  • Risk of refresh, tab switching, or browser crashes

Therefore, the Academic Suite frontend architecture is designed with a focus on resilience, state clarity, and separation of concerns.

7.1 Modern React Setup with Vite

Academic Suite uses Vite as the primary build tool for the React application.

Why Vite?

Compared to Create React App (CRA), Vite offers several significant advantages:

  • Extremely Fast Dev Server Startup
    Vite leverages native browser ES Modules, making startup time nearly instant (< 300ms).

  • Efficient Production Build
    For production builds, Vite uses Rollup which is proven to be stable and optimal.

This approach increases developer productivity, especially on medium to large-scale projects.

Frontend Folder Structure

The src/ folder structure is organized to clearly separate responsibilities:

src/
├── components/         # Reusable UI components
│   ├── ui/             # shadcn/ui primitives
│   └── ...             # Custom components
├── pages/              # Page-level components (routing targets)
├── lib/                # Utilities & configuration (Axios, helpers)
├── stores/             # Global client state (Zustand)
└── hooks/              # Custom hooks (useCountdown, useExamTimer)
Enter fullscreen mode Exit fullscreen mode

This structure makes it easy to scale the application without making the code difficult to maintain.

7.2 State Management Strategy

One common mistake in React applications is treating all state the same way.

In Academic Suite, state is separated into three main categories based on its nature and lifecycle.

A. Server State (Data from API)

For data originating from the backend such as:

  • Quiz lists
  • User profiles
  • Grade history

Academic Suite uses TanStack Query (React Query).

const { data, isLoading } = useQuery({
  queryKey: ['quizzes'],
  queryFn: fetchQuizzes,
})
Enter fullscreen mode Exit fullscreen mode

Advantages of React Query

  • Automatic Caching
    Data doesn't need to be fetched repeatedly when the user switches pages.

  • Background Refetching
    Data is automatically updated when the window becomes active again.

  • Built-in Loading & Error State
    Reduces the need for manual state.

This approach makes the frontend more efficient and consistent with the backend.

B. Global Client State (Session & User Identity)

For global data that:

  • Is needed on many pages
  • Rarely changes

such as logged-in user information, Academic Suite uses Zustand.

File: stores/authStore.ts

interface AuthState {
  user: User | null
  login: (token: string) => void
  logout: () => void
}

export const useAuthStore = create<AuthState>((set) => ({
  user: null,
  login: (token) => {
    // Decode JWT and set user
  },
  logout: () => set({ user: null }),
}))
Enter fullscreen mode Exit fullscreen mode

Zustand was chosen because:

  • Simple API
  • Minimal boilerplate
  • Easy to understand and maintain

C. Local UI State

For state relevant only to a single component, such as:

  • Modal open or closed
  • Form input values
  • Small UI toggles

simply use local useState or useReducer.

This approach keeps state close to the components that need it.

7.3 Routing & Access Protection

Academic Suite uses a routing system with role-based protection.

At the routing level, page access is restricted using the ProtectedRoute wrapper component.

<Route
  path="/quizzes/new"
  element={
    <ProtectedRoute allowedRoles={['admin', 'teacher']}>
      <QuizBuilderPage />
    </ProtectedRoute>
  }
/>
Enter fullscreen mode Exit fullscreen mode

Responsibility of ProtectedRoute

  1. Check user login status
  2. Retrieve role from global state
  3. Ensure role matches allowedRoles
  4. Redirect to login page or unauthorized if failed

This approach aligns frontend authorization with RBAC on the backend.

7.4 UI Framework: shadcn/ui & Tailwind CSS

Academic Suite does not use heavy dependency-based UI libraries like MUI.

Instead, it uses shadcn/ui combined with Tailwind CSS.

Uniqueness of shadcn/ui:

  • Not an npm library
  • Component code is copied directly into the project
  • Fully modifiable

With this approach:

  • The team has full control over the UI
  • Not tied to external library updates
  • Easy to make small adjustments without hacks

Chapter Summary

In this chapter, we built the foundation of the Academic Suite frontend architecture.

We discussed:

  • Modern React setup with Vite
  • Separated and clear state management strategies
  • Role-based routing protection
  • Flexible and controlled UI approach

With this architecture, the frontend is ready to face high interaction loads and real-world exam scenarios.

In Chapter 8, we will enter the most complex part of the frontend: the exam execution page, including timers, autosave, and crash handling.

Top comments (0)