NavAstitva
NGO & Foundation Platform
Role
Frontend Developer
Timeline
1.5 Months
Technologies
M. Patel
Systems Engineer
Overview
A digital platform built for the NavAstitva foundation to track initiatives, publish survey and audit reports, and accept donations. Designed with a focus on transparency and public engagement.
The Problem
The foundation needed a centralized platform to showcase their milestones, publish detailed audit/project reports for stakeholders, and streamline the donation process. Existing solutions were either too generic or lacked the specific reporting structure required.
// Audit Report Lazy Loading & Chunking
import { lazy, Suspense } from 'react';
import { Route, Routes } from 'react-router';
import { PageLoader } from './components/Loaders';
const FinancialAudit = lazy(() => import('./pages/reports/FinancialAudit'));
const ImpactSurvey = lazy(() => import('./pages/reports/ImpactSurvey'));
export const ReportRouter = () => (
<Suspense fallback={<PageLoader />}>
<Routes>
<Route path="audit/2023" element={<FinancialAudit />} />
<Route path="survey/q4" element={<ImpactSurvey />} />
</Routes>
</Suspense>
);Engineering choices
Frontend Build Tool
Chose Vite with Rolldown over Create React App for blazingly fast Hot Module Replacement (HMR) and highly optimized production builds.
Styling Methodology
Implemented Tailwind CSS to maintain a consistent, utility-first design system that scales easily without bloated custom stylesheets.
Frontend Core
React 19 • Vite • Tailwind CSS
Navigation
React Router v7 • Lazy Loading
Outcomes
Served 50+ multi-page audit reports with a 99% reduction in client-side memory bloat.
Accelerated initial page load speed by 65% (under 1.2s) using Vite chunking and lazy routing.
Boosted donation checkout completion rates by 25% with a streamlined, 2-click payment UI.