https://github.com/tareqrwk/wash-and-waxworks
Wash&WaxWorks Web App
https://github.com/tareqrwk/wash-and-waxworks
booking-platform cardetailing css expressjs fullstack-development html5 javascript mongodb nodejs reactjs tailwind-css webapp website
Last synced: 7 months ago
JSON representation
Wash&WaxWorks Web App
- Host: GitHub
- URL: https://github.com/tareqrwk/wash-and-waxworks
- Owner: tareqrwk
- License: apache-2.0
- Created: 2025-05-02T16:14:58.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2025-05-12T19:03:38.000Z (7 months ago)
- Last Synced: 2025-05-12T21:09:16.894Z (7 months ago)
- Topics: booking-platform, cardetailing, css, expressjs, fullstack-development, html5, javascript, mongodb, nodejs, reactjs, tailwind-css, webapp, website
- Language: JavaScript
- Homepage: https://washnwaxworks.ca/
- Size: 20.8 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 🚗 Wash&WaxWorks - Car Detailing Web App
---
## 🔧 Features
### 💻 Client-Side (Frontend)
- ✅ Mobile-responsive UI built with **Tailwind CSS**
- 🧾 Service booking form with real-time validation
- 🎯 Prefilled booking page from service page
- 🗓️ Scroll-triggered animations using **AOS**
- 📩 Contact form to reach the business via email
- ⭐ Review form for client feedback
- 📸 Before-and-after gallery
- 📊 Page visit counter
### 🔐 Admin-Side (Dashboard)
- 🔐 Secure login system for admins
- 📋 View all bookings in a table and calendar
- 🔎 Filter bookings by date
- 🌍 View total website visits
- 💬 View, feature, and delete reviews
- ➕ One-click add-to-homepage for testimonials
---
## 🧰 Tech Stack
| Layer | Technologies |
|-----------|-------------------------------------------|
| Frontend | React, Tailwind CSS, AOS, React Router |
| Backend | Node.js, Express.js, Nodemailer |
| Database | MongoDB with Mongoose |
| Email | Gmail SMTP via Nodemailer |
| Deployment| Render (Server), Vercel/Netlify (Frontend)|
---
## 📁 Project Structure
wash-and-waxworks/
├── client/ # React Frontend
│ ├── components/ # UI Components (Hero, Navbar, etc.)
│ ├── pages/ # Route-level Pages (Booking, Admin)
│ ├── App.js # Router and Layout
│ └── ...
├── server/ # Express Backend
│ ├── index.js # API Routes and Server Logic
│ └── ...
├── .env # Environment Variables
└── README.md # Project Documentation
## 🚀 Getting Started
### 1. Clone the Repository
```bash
git clone https://github.com/yourusername/wash-and-waxworks.git
cd wash-and-waxworks
```
### 2. Install dependencies
```bash
Frontend:
cd client
npm install
Backend:
cd server
npm install
```
### 3. Set Up Enviroment Variables
In your backend root folder create
a .env file that includes the following:
MONGO_URI=your_mongodb_connection_string
EMAIL_USER=your_gmail@gmail.com
EMAIL_PASS=your_gmail_app_password
ADMINS=[{"email":"admin@example.com","password":"yourPassword123"}]
💡 Make sure you've enabled "Less secure apps" or created an App Password in your Gmail account.
In your frontend root folder create
a .env file that includes the following:
REACT_APP_API_URL=https://wash-and-waxworks.onrender.com
## 🌐 Deployment
Frontend: Deploy using Vercel or Netlify
Backend: Deploy using Render or Railway
## Custom Domain
You can connect a custom domain by:
1. Purchasing a domain (GoDaddy, Namecheap, etc.)
2. Linking it to Vercel/Netlify in your dashboard
3. Updating environment variables (localhost → new domain if needed for backend URLs)
## 🙌 Acknowledgements
Built by Tareq Kurdiah as a portfolio project to practice full-stack development, UI/UX design, backend integration, and production deployment.
📬 Contact
📧 Email: tareqrwk@gmail.com
📄 License
This project is for educational, portfolio, and business use only. All rights reserved © 2025.