diff --git a/README.md b/README.md index 7a50776..5bb9dab 100644 --- a/README.md +++ b/README.md @@ -1,310 +1,261 @@ -## πŸš— RentOrbits - Car Rental Website +## πŸš— RentOrbits – Car Rental Website -A Modern, Responsive Car Rental Platform built using **React**, **TypeScript**, and **Tailwind CSS**. +A **modern, responsive car rental platform** built using **React**, **TypeScript**, and **Tailwind CSS**. -RentOrbits provides a Smooth User Experience for Browsing Cars, learning about the Company, and Sending Rental Inquiries. +RentOrbits delivers a smooth and intuitive user experience for browsing cars, learning about the company, and sending rental inquiriesβ€”all through a clean and scalable web interface. -> -*** +--- ## πŸ“‘ Table of Contents -- ✨ [Features](#-features) -- πŸ› οΈ [Prerequisites](#prerequisites) -- πŸ“₯ [Installation](#-installation) -- πŸ—‚οΈ [Project Structure](#-project-structure) -- ⚑ [Technologies Used](#-technologies-used) -- 🌟 [Future Enhancements](#-future-enhancements) -- 🀝 [Contributing](#contributing) -- πŸ“œ [License](#license) - -> -*** + +* ✨ [Features](#-features) +* πŸ› οΈ [Prerequisites](#-prerequisites) +* πŸ“₯ [Installation](#-installation) +* πŸ—‚οΈ [Project Structure](#-project-structure) +* ⚑ [Technologies Used](#-technologies-used) +* 🌟 [Future Enhancements](#-future-enhancements) +* 🀝 [Contributing](#contributing) +* πŸ“œ [License](#license) + +--- ## πŸ’‘ About RentOrbits -RentOrbits is a modern, open-source car rental platform designed to simplify the way users discover, explore, and inquire about rental cars. Built with React, TypeScript, and Tailwind CSS, RentOrbits focuses on clean design, smooth performance, and a scalable architecture that makes it easy for both users and developers. +RentOrbits is a modern, open-source car rental platform designed to simplify how users **discover, explore, and inquire about rental cars**. Built with **React**, **TypeScript**, and **Tailwind CSS**, the project emphasizes clean UI design, smooth performance, and a scalable architecture. + +Whether you're a customer looking for a hassle-free rental experience or a developer exploring a real-world full-stack application, RentOrbits brings usability, clarity, and modern web development practices together in one place. -Whether you're a customer looking for a hassle-free rental experience or a developer exploring a real-world full-stack project, RentOrbits brings usability, clarity, and modern web practices together in one place. +--- ## 🎯 Our Mission -- πŸš— Simplify Car Rentals -Make browsing and exploring rental cars intuitive, fast, and user-friendly. -- πŸ§‘β€πŸ’» Developer-Friendly Codebase -Maintain clean, modular, and well-structured code that’s easy to understand and extend. -- 🌐 Open Source First -Encourage collaboration and learning through an accessible open-source project. -- ⚑ Performance & Responsiveness -Deliver a fast, lightweight experience that works seamlessly across all devices. +* πŸš— **Simplify Car Rentals** + Make browsing and exploring rental cars fast, intuitive, and user-friendly. + +* πŸ§‘β€πŸ’» **Developer-Friendly Codebase** + Maintain clean, modular, and well-structured code that is easy to understand and extend. + +* 🌐 **Open-Source First** + Encourage collaboration, learning, and community-driven development. + +* ⚑ **Performance & Responsiveness** + Deliver a lightweight and responsive experience across all devices. + +--- ## 🌟 Why RentOrbits? -In a space often cluttered with outdated interfaces and complex workflows, RentOrbits proves that a car rental platform can be simple, elegant, and efficient. +In a space often cluttered with outdated interfaces and complex workflows, RentOrbits demonstrates that a car rental platform can be **simple, elegant, and efficient**. + By leveraging modern frontend tools and a scalable backend architecture, RentOrbits is ideal for: -- πŸŽ“ Students learning full-stack web development -- πŸ›  Developers looking to contribute to an open-source project -- 🚘 Businesses exploring a clean rental platform foundation +* πŸŽ“ Students learning full-stack web development +* πŸ›  Developers looking to contribute to an open-source project +* 🚘 Businesses exploring a clean and extensible rental platform foundation + +--- ## πŸš€ Future Vision -- πŸ“… Online car booking & availability management -- πŸ’³ Secure payment gateway integration -- πŸ“Š User dashboards with booking history -- πŸ§‘β€πŸ’Ό Admin panel for managing cars & bookings -- ⭐ Ratings, reviews & feedback system +* πŸ“… Online car booking & availability management +* πŸ’³ Secure payment gateway integration +* πŸ“Š User dashboards with booking history +* πŸ§‘β€πŸ’Ό Admin panel for managing cars & bookings +* ⭐ Ratings, reviews & feedback system -## **✨ RentOrbits aims to be more than just a project β€” it’s a foundation for learning, collaboration, and real-world application.** +> **✨ RentOrbits aims to be more than just a project β€” it’s a foundation for learning, collaboration, and real-world application.** -> -*** +--- ## ✨ Features -- πŸ“± Fully responsive design for all devices -- 🚘 Car listings with detailed information -- πŸ“¬ Contact form for customer inquiries -- 🏒 About page with company information -- 🎨 Modern UI built using Tailwind CSS +* πŸ“± Fully responsive design for all devices +* 🚘 Car listings with detailed information +* πŸ“¬ Contact form for customer inquiries +* 🏒 About page with company information +* 🎨 Modern UI built using Tailwind CSS -> -*** +--- ## πŸ› οΈ Prerequisites -- Node.js (v14 or higher) -- npm (v6 or higher) +* Node.js (v14 or higher) +* npm (v6 or higher) -> -*** +--- ## πŸ“₯ Installation -1. Clone the repository: +1. **Clone the repository** + ```bash git clone https://github.com/Diksha78-bot/RentOrbits.git cd RentOrbits ``` -2. Install dependencies (from root directory): +2. **Install dependencies (from root directory)** + ```bash npm install ``` -3. Start the development servers: +3. **Start the development servers** + +Run frontend and backend together: -**Both frontend and backend together:** ```bash npm start ``` -**Or run individually:** +Or run individually: + +Frontend: -Frontend only: ```bash npm run frontend ``` -Backend only: +Backend: + ```bash npm run backend ``` -Frontend will be available at `http://localhost:3000` and backend API at configured port (typically `http://localhost:5000`). +Frontend runs at `http://localhost:3000` +Backend API runs at the configured port (typically `http://localhost:5000`) -## Environment Variables +--- -Create a `.env` file in the root directory based on `.env.example` and add your own configuration values. +## πŸ” Environment Variables -> Note: Do not commit `.env` files to version control. +Create a `.env` file in the root directory using `.env.example` as a reference and add your configuration values. -## Project Structure -> -*** +> ⚠️ **Do not commit `.env` files to version control.** +--- -## πŸ“ Project Structure +## πŸ—‚οΈ Project Structure -``` +```text RentOrbits/ β”‚ -β”œβ”€β”€ .github/ISSUE_TEMPLATE/ -β”‚ └── pull_request_template.md -β”‚ └── SECURITY.md -β”‚ └── feature-request.md -β”‚ └── bug-report.md -β”‚ └── documentation-issue.md +β”œβ”€β”€ .github/ISSUE_TEMPLATE/ # GitHub issue & PR templates β”‚ -β”‚ -β”œβ”€β”€ frontend/ # React frontend application +β”œβ”€β”€ frontend/ # React frontend β”‚ β”œβ”€β”€ src/ -β”‚ β”‚ β”œβ”€β”€ components/ # Reusable React components -β”‚ β”‚ β”‚ └── CarCard.tsx -β”‚ β”‚ β”‚ └── CarCard.tsx -β”‚ β”‚ β”‚ └── CarSkeleton.tsx -β”‚ β”‚ β”‚ └── Chatbot.tsx -β”‚ β”‚ β”‚ └── Contact.tsx -β”‚ β”‚ β”‚ └── ErrorState.tsx -β”‚ β”‚ β”‚ └── Footer.tsx -β”‚ β”‚ β”‚ └── Login.tsx -β”‚ β”‚ β”‚ └── LoginModal.tsx -β”‚ β”‚ β”‚ └── Navbar.tsx -β”‚ β”‚ β”‚ └── Notification.tsx -β”‚ β”‚ β”‚ └── ProtectedRoute.tsx -β”‚ β”‚ β”œβ”€β”€ context/ # React Context (Auth context) -β”‚ β”‚ β”‚ └── AuthContext.tsx -β”‚ β”‚ β”‚ └── AuthContext.tsx -β”‚ β”‚ β”œβ”€β”€ pages/ # Page components -β”‚ β”‚ β”‚ └── About.tsx -β”‚ β”‚ β”‚ └── Cars.tsx -β”‚ β”‚ β”‚ └── Contact.tsx -β”‚ β”‚ β”‚ └── Home.tsx -β”‚ β”‚ β”‚ └── Profile.tsx -β”‚ β”‚ β”‚ └── Properties.tsx -β”‚ β”‚ β”œβ”€β”€ services/ # API and Firebase services -β”‚ β”‚ β”‚ └── api.ts -β”‚ β”‚ β”‚ └── firebase.ts -β”‚ β”‚ β”œβ”€β”€ utils/ # Utility functions -β”‚ β”‚ β”‚ └── imageUtils.ts -β”‚ β”‚ β”œβ”€β”€ App.tsx -β”‚ β”‚ β”œβ”€β”€ index.tsx -β”‚ β”‚ β”œβ”€β”€ index.css -β”‚ β”‚ └── theme.ts -β”‚ β”œβ”€β”€ public/ # Static assets -β”‚ β”‚ β”œβ”€β”€ CarImages/ -β”‚ β”‚ β”‚ └── Audi A6.jpg -β”‚ β”‚ β”‚ └── BMW 5 Series.jpg -β”‚ β”‚ β”‚ └── Honda CR-V.jpg -β”‚ β”‚ β”‚ └── Honda Civic.jpg -β”‚ β”‚ β”‚ └── Hyundai Creta.jpg -β”‚ β”‚ β”‚ └── Hyundai Verna.jpg -β”‚ β”‚ β”‚ └── Hyundai i20.jpg -β”‚ β”‚ β”‚ └── Mahindra XUV700.jpg -β”‚ β”‚ β”‚ └── Maruti Swift.jpg -β”‚ β”‚ β”‚ └── Mercedes-Benz-E-Class.jpg -β”‚ β”‚ β”‚ └── Tata Altroz.jpg -β”‚ β”‚ β”‚ └── Toyota Camry.jpg -β”‚ β”‚ β”‚ └── Toyota Fortuner.jpg -β”‚ β”‚ β”‚ └── Volvo S90.jpg -β”‚ β”‚ β”‚ └── placeholder.jpg -β”‚ β”‚ β”œβ”€β”€ data/ -β”‚ β”‚ β”‚ └── cars.json -β”‚ β”‚ β”œβ”€β”€ images/ -β”‚ β”‚ β”‚ └── hero-bg.png -β”‚ β”‚ β”œβ”€β”€ 404.html -β”‚ β”‚ β”œβ”€β”€ index.html -β”‚ β”‚ β”œβ”€β”€ logo.png -β”‚ β”‚ β”œβ”€β”€ logo.svg -β”‚ β”‚ └── manifest.json -β”‚ β”œβ”€β”€ package.json -β”‚ β”œβ”€β”€ package-lock.json -β”‚ β”œβ”€β”€ tsconfig.json -β”‚ └── tailwind.config.js +β”‚ β”‚ β”œβ”€β”€ components/ # Reusable UI components +β”‚ β”‚ β”œβ”€β”€ context/ # React Context (Auth) +β”‚ β”‚ β”œβ”€β”€ pages/ # Application pages +β”‚ β”‚ β”œβ”€β”€ services/ # API & Firebase services +β”‚ β”‚ β”œβ”€β”€ utils/ # Utility functions +β”‚ β”‚ └── App.tsx +β”‚ └── public/ # Static assets & data β”‚ -β”œβ”€β”€ backend/ # Node/Express API server -β”‚ β”œβ”€β”€ src/ # Backend source code -β”‚ β”‚ └── index.ts -β”‚ β”œβ”€β”€ middleware/ # Express middleware (auth, etc) -β”‚ β”‚ └── auth.js -β”‚ β”‚ └── auth.ts -β”‚ β”œβ”€β”€ models/ # Database models (User, Car, Booking) -β”‚ β”‚ └── Booking.js -β”‚ β”‚ └── Booking.ts -β”‚ β”‚ └── Car.js -β”‚ β”‚ └── Car.ts -β”‚ β”‚ └── User.js -β”‚ β”‚ └── User.ts -β”‚ β”œβ”€β”€ routes/ # API routes -β”‚ β”‚ └── bookingRoutes.js -β”‚ β”‚ └── bookingRoutes.ts -β”‚ β”‚ └── carRoutes.js -β”‚ β”‚ └── carRoutes.ts -β”‚ β”‚ └── userRoutes.js -β”‚ β”‚ └── userRoutes.ts -β”‚ β”œβ”€β”€ .gitignore -β”‚ β”œβ”€β”€ package.json -β”‚ β”œβ”€β”€ package-lock.json -β”‚ β”œβ”€β”€ server.ts -β”‚ └── tsconfig.json +β”œβ”€β”€ backend/ # Node.js + Express backend +β”‚ β”œβ”€β”€ src/ # Backend source +β”‚ β”œβ”€β”€ middleware/ # Auth & middleware +β”‚ β”œβ”€β”€ models/ # Database models +β”‚ └── routes/ # API routes β”‚ -└── .env # Environment variables -β”œβ”€β”€ .gitignore +β”œβ”€β”€ CONTRIBUTING.md β”œβ”€β”€ CODE_OF_CONDUCT.md -β”œβ”€β”€ CONTRIBUTING.md -β”œβ”€β”€ LICENSE -β”œβ”€β”€ README.md -β”œβ”€β”€ desktop.ini -β”œβ”€β”€ package.json # Root monorepo config - +β”œβ”€β”€ LICENSE +└── README.md ``` -> -*** + +--- ## ⚑ Technologies Used -**🎨 Frontend:** -- React 18 -- TypeScript -- Tailwind CSS -- React Router -- Axios (for API calls) -- Firebase (Authentication) - -**🧠 Backend:** -- Node.js -- Express.js -- TypeScript -- MongoDB (Mongoose) -- JWT (Authentication) -- BCryptJS (Password hashing) - -> -*** +### 🎨 Frontend + +* React 18 +* TypeScript +* Tailwind CSS +* React Router +* Axios +* Firebase Authentication + +### 🧠 Backend + +* Node.js +* Express.js +* TypeScript +* MongoDB (Mongoose) +* JWT Authentication +* BCryptJS + +--- ## 🌟 Future Enhancements -- πŸš€ Online car booking system -- πŸ’³ Payment gateway integration -- πŸ“Š User dashboard & booking history -- πŸ§‘β€πŸ’Ό Admin panel for car management -- ⭐ Ratings & reviews feature +* πŸš€ Online car booking system +* πŸ’³ Payment gateway integration +* πŸ“Š User dashboard & booking history +* πŸ§‘β€πŸ’Ό Admin panel for car management +* ⭐ Ratings & reviews feature + +--- + +## 🀝 Contributing + +We welcome contributions from everyone! -> -*** +### How to Contribute -## Contributing +1. Fork the repository +2. Create your feature branch -## How to Contribute? + ```bash + git checkout -b feature/amazing-feature + ``` +3. Commit your changes -1. Fork the repository -2. Create your feature branch (`git checkout -b feature/amazing-feature`) -3. Commit your changes (`git commit -m 'Add some amazing feature'`) -4. Push to the branch (`git push origin feature/amazing-feature`) -5. Open a Pull Request + ```bash + git commit -m "feat: add amazing feature" + ``` +4. Push to your branch -Check out our [Contributing Guidelines](CONTRIBUTING.md) for more details! + ```bash + git push origin feature/amazing-feature + ``` +5. Open a Pull Request -> -*** +For more details, read the [Contributing Guidelines](CONTRIBUTING.md). -## Contributors +--- -Thanks to all the wonderful contributors πŸ’– +## πŸ‘₯ Contributors + +Thanks to all the amazing contributors πŸ’– -See full list of contributor contributions: [Contribution Graph](https://github.com/Diksha78-bot/RentOrbits/graphs/contributors) +--- + +## πŸ“œ License + +This project is licensed under the **MIT License**. +See the [LICENSE](LICENSE) file for details. + +--- -> -*** +## ⭐ Support the Project -## License +If you like this project, **don’t forget to give it a star** ⭐ +It really helps the project grow! -This project is licensed under the MIT License β€” see the LICENSE file for details. +--- -> -*** +### βœ… Next step for you + +Now run: + +```bash +git add README.md +git commit -m "docs: improve README clarity and structure" +git push origin docs/add-project-description +``` -## **⭐ If you like this project, don’t forget to give it a star!**