Frontend Documentation
1. Project Overview and Structure
The super-local-fans project is a modern React + TypeScript application built with Vite for
efficient bundling and fast performance. It follows a modular structure, integrating Redux
Toolkit, Redux Saga, RTK Query, Context API, and Zustand for comprehensive state
management.
2. Folder Structure
super-local-fans/
| - [Link] # Entry point for the app
| - [Link] # Dependencies and scripts
| - [Link] # TypeScript configuration
| - [Link] # Vite build configuration
| - src/
| | - app-components/ # Reusable UI components
| | | - count-down/[Link]
| | | - custom-menu/[Link]
| | | - dropdown/[Link]
| | | - headers/[Link]
| | | - modal/[Link]
| | | - stats-card/[Link]
| | - [Link] # Main app component
| | - assets/ # Static assets (icons, styles)
| | | - icons/[Link]
| | | - scss/[Link]
| | - common/ # Shared utilities and components
| | - context/ # React context for state
| | - helpers/ # Utility functions
| | - hooks/ # Custom React hooks
| | - [Link] # App entry point (renders [Link])
| | - modules/ # Feature-specific modules
| | - routes/ # Routing configuration
| | - services/ # API and backend logic
| | - state/ # State management (Redux)
3. Core Files
[Link]
Purpose: Mounts [Link] into the DOM element with the ID SuperLocalFan-root.
[Link]([Link]('SuperLocalFan-root')!).render(<App />);
[Link]
Purpose: Root component that includes providers and routing.
<BrowserRouter>
<Provider store={store}>
<ThemeWrapper>
<AuthCheckerLayout>
<NavigationScroll>
<OnboardingPanel>
<MainAppProvider />
<RouterIndex />
</OnboardingPanel>
</NavigationScroll>
</AuthCheckerLayout>
<Toaster position='top-right' />
</ThemeWrapper>
</Provider>
</BrowserRouter>
[Link]
Purpose: Configures the Redux store with Saga and RTK Query.
const store = configureStore({
reducer: rootReducer,
middleware: (getDefaultMiddleware) =>
getDefaultMiddleware().concat(sagaMiddleware, [Link]),
});
[Link](rootSaga);
[Link]
Purpose: Defines all routes with lazy loading.
<Routes>
<Route path="/dashboard" element={<Dashboard />} />
<Route path="/campaign-details/:uid" element={<CampaignDetails />} />
</Routes>
4. State Management
The project uses a hybrid state management approach:
● Redux Toolkit (Primary Global State Management)
● Redux Saga (Asynchronous Task Handling)
● RTK Query (API Caching & Data Fetching)
● Context API (Feature-Specific State Management)
● Zustand (Lightweight State, TBD)
Root Reducer
const rootReducer = combineReducers({
[[Link]]: [Link],
auth: authSlice,
campaign: campaignSlice,
dashboard: dashboardSlice,
});
Redux Saga (Async Management)
import { call, put } from 'redux-saga/effects';
function* fetchCampaignSaga(action) {
const response = yield call([Link], [Link]);
yield put(gettingSuccess({ body: [Link] }));
RTK Query (API Caching)
const { data, isLoading } = useGetCampaignQuery(uid);
5. Core Functionalities
User Authentication
● State: Managed via authSlice.
● Routes: /login, /signup.
● Protected Routes: Wrapped in AuthCheckerLayout.
Campaign Management
● State: Managed by campaignSlice.
● Routes: /campaign, /campaign-details/:uid, /campaign-create.
● Features: List campaigns, view details, voting leaderboard.
Dashboard
● State: Managed by dashboardSlice.
● Route: /dashboard.
● Features: Displays statistics via StatsCard.
API Calls
● Libraries Used: axios and apiSlice.
● Example:
[Link]('/api/campaigns');
6. Components Overview
StatsCard
Purpose: Displays statistics with icons.
<Typography variant='h4'>{numberFormatter(value)}</Typography>
CustomModal
Purpose: Displays dialogs and forms.
CampaignDetails
Purpose: Shows campaign details and participants.
<CampaignDetailsStatus campaign={campaign} />
7. Third-Party Libraries
Library Purpose Example
react-router- Manages routing <Route path='/dashboard'
dom element={<Dashboard />} />
axios API Requests [Link]('/api/campaigns')
react-hook- Form handling <input {...register('title')} />
form
@mui/material UI Components <Button
variant='contained'>Save</Button>
redux-saga Asynchronous yield call([Link]);
workflows
8. Summary
● State Management: Multi-layered (Redux, Saga, RTK Query, Context, Zustand).
● Hooks: Built-in, Custom, and RTK Query hooks.
● Core Features: Campaign Management, Authentication, Dashboard, Social Templates,
Loyalty Programs.
● Third-Party Libraries: React Router, Axios, Redux, RTK Query, MUI.
