A peer-to-peer car & bike rental marketplace powered by AI.
- Live Site: https://rydo-rho.vercel.app/
- Backend API: https://rydo-server.vercel.app/
- Demo Login:
demo@rydo.com/demopass123
- Backend (Rydo API): https://github.com/Saharier36/Rydo-Server
- Email/password registration and login via Better Auth
- Google OAuth social login
- Bearer token-based session management with persistent login
- Protected route middleware for authenticated-only pages
- Forgot password flow
- Browse all vehicles with paginated grid (12 per page)
- Full-text search across title, description, and location
- Filter by: vehicle type (car/bike), location, price range (min/max), minimum rating
- Sort by: newest, price (low-to-high, high-to-low), highest rating
- Active filter tags with one-click removal
- Responsive vehicle cards showing specs (transmission, fuel type, seats), location, rating, and price
- Dedicated vehicle detail page at
/vehicles/[id] - Image gallery with thumbnail strip
- Specs grid (seats, transmission, fuel type, category)
- Description section
- Booking calendar with react-day-picker showing unavailable dates (conflict-aware)
- Price breakdown with total calculation
- Related/similar vehicles section
- Integrated reviews section with rating, comments, and timestamps
- Add Vehicle form at
/items/addwith all required fields - Image upload via ImgBB API (up to 5 images per listing)
- Input validation (type, category, transmission, fuel type dropdowns)
- Manage Vehicles dashboard at
/items/manage - Table view (desktop) and card view (mobile) of owned listings
- View listing and delete with confirmation dialog (
@radix-ui/react-alert-dialog)
- Create booking with date selection, instant confirmation
- Conflict detection preventing double-bookings (server-enforced with double-check pattern)
- Cannot book your own vehicle
- View My Bookings at
/my-bookingswith vehicle data enrichment - Cancel booking (only before trip start, only own bookings)
- Visual status badges (confirmed/cancelled)
- Leave a rating (1–5) and comment tied to completed bookings
- Only users with a past confirmed booking can review a vehicle
- One review per user per vehicle
- Vehicle rating auto-recalculated on new review
- Star rating with hover interaction in the review form
- Natural language input: describe what you need (e.g., "cheap bike for commuting")
- Powered by Google Gemini — sends vehicle catalog + user context to the model
- Returns AI-matched recommendations with personalized reasons
- Suggested prompt chips for quick queries
- Graceful fallback to top-rated vehicles on API failure
- Optional personalization — if logged in, past bookings influence recommendations
- Shown on the homepage and toggleable on the browse page
- Floating chat widget accessible from any page
- Conversation history preserved during the session
- Function calling — Gemini can query the database for vehicle searches
- Rich results display: vehicle cards with image, price, location inline in chat
- Suggested starter prompts
- Typing indicator animation
- Error handling with user-friendly fallback messages
- Theme toggle (sun/moon icon) in navbar
- Respects system preference by default
- Persistent across navigation (uses
next-themes) - Smooth CSS transitions between themes
- Hero — search bar with location/date inputs, animated background
- How It Works — 4-step process walkthrough
- Categories — Cars & Bikes with full-bleed image cards
- Why Choose Rydo — stats (99.4% satisfaction, 14,800+ trips) and highlights
- Testimonials — user reviews with star ratings
- FAQ — accordion-style frequently asked questions
- Newsletter — email subscription form
- Footer — nav links, contact info, social media links
/about— About Us/contact— Contact page/privacy— Privacy Policy/terms— Terms of Service/forgot-password— Password reset
- Responsive design — mobile hamburger menu, adaptive grids
- Animations — framer-motion (page transitions, stagger children, hover effects, scroll-triggered reveals)
- Toast notifications via sonner
- Skeleton loading states on all data-fetching pages
- shadcn/ui components throughout
| Dependency | Purpose |
|---|---|
| Next.js 16 | React framework with App Router (file-based routing, server & client components) |
| TypeScript | Static typing across the entire codebase |
| Tailwind CSS v4 | Utility-first CSS framework for rapid, consistent styling |
| React 19 | UI component library |
MongoDB (mongodb) |
Native MongoDB driver (shared with auth) |
| Better Auth | Full authentication system — email/password, Google OAuth, bearer tokens, session management |
Google Gemini (@google/generative-ai) |
AI recommendations and chat assistant backend |
| @tanstack/react-query | Server state management, caching, and mutations |
| framer-motion | Declarative animations and transitions |
| next-themes | Dark/light mode with system preference support |
| react-day-picker | Date range picker for booking calendar |
| date-fns | Date formatting and manipulation |
| lucide-react | Icon library |
| sonner | Toast notification system |
clsx + tailwind-merge (cn utility) |
Conditional class merging |
| class-variance-authority | Component variant management |
shadcn/ui (@radix-ui/*) |
Accessible UI primitives (dialog, dropdown, checkbox, label, slot) |
- Node.js 18+
- A MongoDB instance (local or Atlas)
- A Google Gemini API key
- A Better Auth secret
- (Optional) An ImgBB API key for image uploads
git clone https://github.com/Saharier36/Rydo.git
cd Rydo
npm installCreate a .env file in the project root. See .env.example for all required variables:
MONGODB_URI=
BETTER_AUTH_SECRET=
GOOGLE_CLIENT_ID=
GOOGLE_CLIENT_SECRET=
BETTER_AUTH_URL=
NEXT_PUBLIC_BETTER_AUTH_URL=
NEXT_PUBLIC_SERVER_URL=
NEXT_PUBLIC_IMGBB_API_KEY=Note:
GOOGLE_CLIENT_IDandGOOGLE_CLIENT_SECRETare only required if using Google OAuth.NEXT_PUBLIC_IMGBB_API_KEYis only required for image uploads when adding vehicles.
npm run devOpen http://localhost:3000 in your browser.
npm run build
npm startclient/
├── app/ # Next.js App Router pages
│ ├── (auth)/ # Auth-related pages
│ │ ├── forgot-password/
│ │ ├── login/
│ │ └── register/
│ ├── about/
│ ├── api/auth/[...all]/ # Better Auth API routes
│ ├── contact/
│ ├── items/
│ │ ├── add/ # Add vehicle listing
│ │ └── manage/ # Manage owned listings
│ ├── my-bookings/ # User bookings dashboard
│ ├── privacy/
│ ├── terms/
│ ├── vehicles/
│ │ ├── [id]/ # Vehicle detail page
│ │ └── page.tsx # Browse vehicles page
│ ├── globals.css # Global styles & Tailwind
│ ├── layout.tsx # Root layout
│ ├── page.tsx # Landing page
│ └── providers.tsx # React Query provider
├── components/ # Shared components
│ ├── ui/ # shadcn/ui primitives
│ │ ├── alert-dialog.tsx
│ │ ├── button.tsx
│ │ ├── calendar.tsx
│ │ ├── card.tsx
│ │ ├── checkbox.tsx
│ │ ├── dropdown-menu.tsx
│ │ ├── input.tsx
│ │ ├── label.tsx
│ │ ├── skeleton.tsx
│ │ └── textarea.tsx
│ ├── ai-chat-widget.tsx # Floating AI chat assistant
│ ├── ai-recommendations.tsx # AI recommendation section
│ ├── categories.tsx
│ ├── faq.tsx
│ ├── featured-vehicles.tsx
│ ├── footer.tsx
│ ├── hero.tsx
│ ├── how-it-works.tsx
│ ├── layout-wrapper.tsx
│ ├── navbar.tsx
│ ├── newsletter.tsx
│ ├── protected-route.tsx
│ ├── testimonials.tsx
│ ├── theme-provider.tsx
│ ├── vehicle-card.tsx
│ └── vehicle-reviews.tsx
├── lib/ # Utility & API modules
│ ├── ai-api.ts # AI API client (recommendations + chat)
│ ├── auth-client.ts # Better Auth client setup
│ ├── auth.ts # Better Auth server config
│ ├── booking-api.ts # Booking API client
│ ├── mock-data.ts # Fallback mock data
│ ├── review-api.ts # Reviews API client
│ ├── utils.ts # cn() utility
│ └── vehicle-api.ts # Vehicle CRUD API client
├── public/ # Static assets
├── .env.example # Environment variable template
├── components.json # shadcn/ui configuration
├── next.config.ts
├── package.json
├── tsconfig.json
└── tailwind.config.ts
Screenshots to be added.
This project is deployed on Vercel. The frontend connects to the backend API via the NEXT_PUBLIC_SERVER_URL environment variable.