VRide Admin Dashboard

Admin panel for the VRide car-rental platform. It's a single-page React app that lets the admin team review listings, approve ads, edit vehicle data, publish banners, and keep an eye on bookings.

Built with React 19, TypeScript, Vite, and SCSS. Talks to the VRide REST API for everything.

What it does

• List every vehicle in the system with pagination and search
• Approve or delete pending ads
• Edit vehicle details (category, body type, images, pricing, credits)
• Create and publish homepage banners
• View bookings
• Gated behind an admin login screen

Stack

• React 19 + TypeScript
• Vite 7 for dev server and builds
• React Router v7 for routing
• Axios wrapper around the backend API
• SCSS for styling (no UI framework, everything is hand-rolled)
• react-hot-toast for notifications
• react-icons for icons

Project layout

src/
  Components/     reusable UI (modals, forms)
  layout/         top and side navbars
  pages/          route-level pages (Home, Login, AdManager, YourAds, Bookings)
  services/       typed API clients (AdminServices, BookingServices, etc.)
  types/          shared TypeScript types
  utils/          helpers + ProtectedRoute guard
  styles/         global SCSS

Running it locally

You need Node 18+ and npm.

git clone <your-fork-url>
cd vride-dashboard
npm install
cp .env.example .env   # then fill in real values
npm run dev

The dev server runs on http://localhost:5173.

Environment variables

Copy .env.example to .env and set:

Variable	What it's for
VITE_BASE_URL	Base URL of the VRide API
VITE_ADMIN_EMAIL	Email used by the front-end admin gate
VITE_ADMIN_PASS_KEY	Pass key used by the front-end admin gate
VITE_SESSION_KEY	Value stored in localStorage after login

Heads up: Anything prefixed with VITE_ is shipped in the built JS bundle. The login check in this repo is a convenience gate, not a security boundary. If you're putting this in front of anything sensitive, move the check to the backend.

Scripts

npm run dev       # start Vite dev server
npm run build     # type-check and build for production
npm run preview   # preview the production build
npm run lint      # run ESLint

Deployment

The build output goes to dist/. The public/_redirects file is there so SPA routes work on Netlify (any host that respects that file, really). For other hosts, configure a fallback to index.html.

Notes

This was built to pair with the VRide rental API. Pointing it at a different backend means reworking the service layer in src/services/ — the payload shapes are specific to VRide.

License

No license file yet. Ask before reusing.