Scruba - Car Wash Service Website

A modern, full-stack web application for a mobile car wash service built with React, TypeScript, Express, and Vite.

Tech Stack

• Frontend: React 18, TypeScript, Tailwind CSS, Vite
• Backend: Express.js, TypeScript
• Database: PostgreSQL with Drizzle ORM
• UI Components: Radix UI, Lucide React
• State Management: TanStack Query
• Authentication: Passport.js
• Styling: Tailwind CSS with custom animations

Prerequisites

• Node.js (v18 or higher)
• npm or yarn
• PostgreSQL database

Getting Started

1. Clone the repository

   git clone <repository-url>
   cd Scruba_Website

2. Install dependencies

   npm install

3. Set up environment variables

   cp .env.example .env

   Edit .env and fill in your database URL and other configuration.

4. Run database migrations

   npm run db:push

5. Start development server

   npm run dev

Development Scripts

• npm run dev - Start the full-stack development server (recommended)
• npm run dev:concurrent - Start client and server separately with hot reload
• npm run client:dev - Start only the Vite dev server (frontend on port 3000)
• npm run server:dev - Start only the Express server (backend on port 5000)
• npm run build - Build for production
• npm run start - Start production server
• npm run check - Run TypeScript type checking
• npm run db:push - Push database schema changes

Development Workflow

For most development work, use:

npm run dev

This will start the full-stack application on port 5000 with hot reload for both client and server code.

If you need separate development servers:

npm run dev:concurrent

This will start the client on port 3000 and server on port 5000 separately.

Project Structure

├── client/                 # Frontend React application
│   ├── src/
│   │   ├── components/     # React components
│   │   ├── hooks/          # Custom React hooks
│   │   ├── lib/            # Utility libraries
│   │   └── pages/          # Page components
│   └── index.html
├── server/                 # Backend Express application
│   ├── index.ts           # Server entry point
│   ├── routes.ts          # API routes
│   ├── storage.ts         # Database configuration
│   └── vite.ts            # Vite SSR setup
├── shared/                 # Shared types and schemas
└── attached_assets/        # Static assets

Features

• Mobile-responsive design
• Car wash service booking
• Pricing plans and packages
• How it works section
• About section
• Contact forms
• Modern UI with animations

Development Notes

• The application uses a single port for both frontend and backend in development
• Hot reload is enabled for both client and server code
• Environment variables are required for database and session configuration
• TypeScript is used throughout the project for type safety

Deployment

1. Build the application:

   npm run build

2. Set production environment variables

3. Start the production server:

   npm start

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Run type checking: npm run check
5. Submit a pull request

Made with ❤️ By QuirkLabs, for the community!