Scribd
Upload
9 views3 pages

This Website Is Built Using The Following Core Technologies and Frameworks

The document outlines the technology stack and architecture of a web application built with React, utilizing tools like Vite, Tailwind CSS, and TanStack Query for state management. It describes the component structure, file organization, and various libraries used for functionalities such as form handling, database management, and analytics. Overall, it emphasizes a modern, responsive design approach with a focus on performance and developer experience.

Uploaded by

xstories98
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
9 views3 pages

This Website Is Built Using The Following Core Technologies and Frameworks

The document outlines the technology stack and architecture of a web application built with React, utilizing tools like Vite, Tailwind CSS, and TanStack Query for state management. It describes the component structure, file organization, and various libraries used for functionalities such as form handling, database management, and analytics. Overall, it emphasizes a modern, responsive design approach with a focus on performance and developer experience.

Uploaded by

xstories98
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 3

This website is built using the following core technologies

and frameworks:
1. Frontend Framework: React (v18.3.1)
 A JavaScript library for building user interfaces
 Using TypeScript for type safety
2. Build Tool: Vite
 Modern frontend build tool that offers fast development
and optimized production builds
3. Styling: Tailwind CSS
 Utility-first CSS framework for rapid UI development
 Used for responsive design and styling components
4. Routing: React Router DOM (v6.22.3)
 Handles client-side routing and navigation
5. State Management & Data Fetching:
 TanStack Query (React Query) for server state
management
 React Context for global state (Auth context)
6. Form Handling:
 React Hook Form for form management
 Zod for form validation
7. Database:
 IndexedDB (using idb library) for client-side storage
 Prisma as the ORM (though currently using SQLite)
8. UI Components & Icons:
 Lucide React for icons
 Custom components built with Tailwind CSS
9. Additional Libraries:
 date-fns for date manipulation
 Chart.js with react-chartjs-2 for analytics
 jsPDF for PDF generation
 Google Maps API for distance calculation

The architecture follows a modern React application


structure with:
 Component-based development
 Custom hooks for reusable logic
 Service-based architecture for API calls
 TypeScript for type safety
 Responsive design principles

This stack provides a robust foundation for a production-


ready web application while maintaining good
performance and developer experience.

Frontend Files (React/UI Components)


src/components/
├── admin/
│ ├── AdminHeader.tsx
│ ├── AdminLayout.tsx
│ ├── AdminLogin.tsx
│ ├── AdminSidebar.tsx
│ └── ProtectedRoute.tsx
├── ui/
│ ├── Button.tsx
│ ├── Card.tsx
│ └── Input.tsx
├── BackButton.tsx
├── BookingForm.tsx
├── BookingSteps.tsx
├── FeaturesSection.tsx
├── FleetSection.tsx
├── Footer.tsx
├── Navbar.tsx
├── PageHeader.tsx
├── PaymentProcessor.tsx
├── ReviewsSection.tsx
├── SearchForm.tsx
├── SearchResults.tsx
└── VehicleCard.tsx

src/pages/
├── admin/
│ ├── AdminDashboard.tsx
│ ├── AdminBookings.tsx
│ ├── AdminVehicles.tsx
│ └── AdminPricing.tsx
├── AboutUsPage.tsx
├── BookingConfirmationPage.tsx
├── CancellationPolicyPage.tsx
├── ContactPage.tsx
├── FAQPage.tsx
├── HomePage.tsx
├── PaymentResultPage.tsx
├── PrivacyPolicyPage.tsx
├── SearchResultsPage.tsx
├── ServicesPage.tsx
├── TermsPage.tsx
└── UnauthorizedPage.tsx
Backend/Service Layer Files
src/services/
├── authService.ts
└── paymentService.ts

src/server/api/
└── bookings.ts

src/hooks/
├── useBookings.ts
├── useStats.ts
└── useVehicles.ts

src/contexts/
└── AuthContext.tsx
Database & Data Management Files
src/lib/
├── db.ts // IndexedDB database operations
├── prisma.ts // Prisma ORM configuration
├── statsDb.ts // Statistics database operations
└── vehicleDb.ts // Vehicle database operations

prisma/
└── schema.prisma // Database schema definition
Utility/Helper Files
src/utils/
├── maps.ts // Google Maps integration
└── pdfGenerator.ts // PDF generation utilities
Configuration Files
├── .env // Environment variables
├── eslint.config.js // ESLint configuration
├── postcss.config.js // PostCSS configuration
├── tailwind.config.js // Tailwind CSS configuration
├── tsconfig.json // TypeScript configuration
├── tsconfig.app.json // App-specific TS config
├── tsconfig.node.json // Node-specific TS config
└── vite.config.ts // Vite build configuration
Type Definitions
src/types/
└── index.ts // TypeScript type definitions

You might also like