Car Doctor Website - Client Side

A user-friendly web application for car care services, built with React, Tailwind CSS, and Firebase.

Description:

This repository houses the client-side code for the Car Doctor website, a dynamic web application designed to streamline car care services for users. Leveraging React's component-based architecture and Vite's blazing-fast development environment, the application boasts a smooth and responsive user experience across laptops, tablets, and mobile devices.

Key Features:

• Seamless Service Exploration: Users can effortlessly browse through the offered car care services, presented in a visually appealing and responsive design that adapts flawlessly to various screen sizes.
• Effortless Service Booking: With a simple click on the "Book" button, users initiate the service booking process. This intuitive flow allows them to effortlessly schedule appointments for their car care needs.
• Comprehensive Booking Information: The booking process empowers users to provide essential information about their vehicle and desired services, ensuring accurate scheduling and service delivery.
• Organized Booking Management: Users retain complete control over their booked services. They can view all scheduled appointments within a dedicated section, providing a clear overview of their car care plans.
• Flexible Service Management: Users enjoy the freedom to modify their bookings. They can cancel services that no longer suit their needs or confirm appointments to solidify their schedules.
• Secure User Management: My Bookings acts as a private route, accessible only after successful user registration. This ensures that personal service information remains protected.
• Streamlined Authentication: New users can register for an account, creating a secure profile within the system. Existing users can log in with their credentials, facilitating easy access to their bookings and account details.

Technologies:

• Front-End: React + Vite
• Routing: React Router
• Styling: Tailwind CSS, Daisy UI
• Authentication and Hosting: Firebase
• State Management: Context API

Live Website

• Firebase: https://car-doctor-client-99145.web.app/

• Netlify: https://car-doctor-client-nion.netlify.app/

• Surge: https://hungry-pancake.surge.sh/

Installation

Get up and running with the Car Doctor website's client-side code in just three easy steps using npm:

1. Clone the Repository:

   Begin by cloning this repository using Git. Replace <repository-url> with the actual URL of your repository:

   git clone <repository-url>
   cd Car-Doctor-Client-Side  # Replace with your project's directory name

2. Install Dependencies:

   Navigate to the project directory (Car-Doctor-Client-Side in this example) and execute the following command to install all the necessary project dependencies:

   npm install

   This command will download and install the JavaScript libraries and tools required for the Car Doctor website to function correctly.

3. Start the Development Server:

   Once the dependencies are installed, you can launch the development server using the following command:

   npm start

   This command will typically start a development server using Vite or another similar tool, allowing you to view and interact with the website in your web browser (usually at http://localhost:3000 or a similar address).

Additional Notes:

• Make sure you have Git and npm installed on your system before proceeding. You can download them from the official websites:
  • Git: https://git-scm.com/downloads
  • npm: https://nodejs.org/en/learn/getting-started/an-introduction-to-the-npm-package-manager
• Refer to the project's README file for any specific configuration or environment setup instructions.

By following these steps, you'll have a local development environment set up and running, allowing you to explore the Car Doctor website's code and potentially contribute to its further development.Absolutely, here's the section on commits with a potential improvement:

Commits

This repository adheres to a structured commit message convention to enhance readability and maintainability. Here's an overview of the key commit types:

• feat: Introduces a new feature to the application.
• fix: Addresses a bug or issue identified in the codebase.
• docs: Encompasses changes made to documentation, such as updates, additions, or corrections.
• style: Covers formatting adjustments, whitespace changes, or fixing minor inconsistencies like missing semicolons.
• refactor: Represents code structure improvements without altering functionality. This can involve code organization, renaming variables or functions, or improving readability.
• test: Introduces new tests or updates existing tests to ensure code quality and maintainability.
• chore: Encompasses changes that don't directly affect the application's functionality, such as updating build tasks, package manager configurations, or dependency versions.

Optional Improvement:

Consider adopting a more comprehensive commit message convention like Conventional Commits (https://www.conventionalcommits.org/en/v1.0.0-beta.4/). This approach provides a standard format for commit messages, including type, scope (optional), and a clear description of the change, making it easier to generate changelogs, automate workflows, and collaborate effectively.

By following these guidelines and potentially adopting a more detailed convention, you'll ensure clear and consistent commit messages that benefit you and your team in the long run.

Contributing

Contributions are always welcome!

Contributions are welcome! Please open a pull request for any improvements or features.

Please adhere to this project's code of conduct.

License

This project is licensed under the MIT License.

Deployment

To deploy this project run

git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/Nadim-Nion/car-doctor-client.git
git push -u origin main

Screenshots

• Home Page:

• Booking Page:

• My Booking Page:

• Login Page:

• Register Page:

Tech Stack

Client: React, React Router, Tailwind, Daisy UI

Server: Express.js, Node.js

Database: MongoDB

Tools: Vite, Firebase, Vercel, npm, Surge, Netlify

State Management: Context API

FAQ

Is this website reponsible?

Answer : Yes, the home page is responsive for the all devices (Desktop, Tablet and Phone)

Is this website store data to the database?

Answer : I have stored all the data in MongoDB.

🚀 About Me

Hi, I am Nadim Mahmud Nion. I have recently concluded my graduation from the department of Computer Science and Engineering (CSE) at the Daffodil International University (DIU). I have been learning MERN Stack Web Development since 2022. I am expertise in the following skills:

• React

• Express.js

• Node.js

• MongoDB

• Vite

• React Router

• Firebase

• Vercel

• JavaScript

• Advanced JavaScript

• Daisy UI

• Bootstrap

• Tailwind

• HTML5

• CSS3

• Media Query

I have built multiple projects using these skills. You are invited to my GitHub profile to know about my projects and don't forget to give a star to my projects.