Services Website

This is a responsive, modern services website built using React with Vite for fast development and hot module reloading (HMR). The project uses Tailwind CSS for easy and customizable styling, providing a great user interface with smooth animations and interactivity. It also incorporates modern JavaScript features and a component-based architecture to ensure scalability and maintainability.

---

Table of Contents

• Project Structure
• Key Features
• Technologies Used
• Setup Instructions
• File Breakdown
• Available Scripts
• Contact Information
• File Tree

---

Project Structure

The project is structured in a way to maintain modularity and ease of development. Each section of the website is broken down into React components, which are organized into relevant folders like components, modals, and assets.

• Components: Handles various sections like Navbar, Footer, Services, Testimonials, etc.
• Modals: Handles user interactions like SignIn and SignUp.
• Assets: Stores static assets like images and logos.
• Public: Contains static files served by Vite.
• Configuration Files: For ESLint, PostCSS, and Tailwind CSS, ensuring code quality and consistent styling.

---

Key Features

1. Component-Based Architecture: Each section of the website (Hero, Services, Contact, etc.) is built as a reusable React component.
2. Responsive Design: The project is fully responsive and mobile-friendly, thanks to Tailwind CSS's utility-first approach.
3. Service Tracking: A feature that allows users to track their booked services using the TrackServices component.
4. User Authentication: The SignInModal and SignUpModal components allow users to log in and register with ease.
5. Customizable Animations: Using GSAP or CSS animations (potentially), you can easily create dynamic interactions on the site.
6. Clean and Modern UI: With Tailwind CSS, creating elegant and professional-looking components has never been easier.
7. Optimized for Performance: Built using Vite, which is fast and lightweight, making the development and production environments highly optimized.

---

Technologies Used

• React: JavaScript library for building user interfaces.
• Vite: A fast build tool for modern web development, offering super-fast HMR and optimized builds.
• Tailwind CSS: Utility-first CSS framework for designing flexible and responsive UI.
• ESLint: A tool for identifying and fixing code quality issues.
• PostCSS: A tool for transforming CSS with JavaScript plugins.
• JavaScript (ES6+): Modern JavaScript features, including arrow functions, destructuring, and more.

---

Setup Instructions

To get the project up and running on your local machine, follow these steps:

1. Clone the repository:

   git clone https://github.com/byteom/ServicesWebsite.git
   cd ServicesWebsite

2. Install dependencies:

   npm install

3. Run the development server:

   npm run dev

   The website should now be running on http://localhost:3000.

4. Build for production:

   npm run build

   This will create a dist folder with the optimized production build.

---

File Breakdown

Important Files and Directories:

• .gitignore: Specifies files to be ignored by Git, such as node_modules and build artifacts.
• eslint.config.js: Configuration for ESLint to ensure code quality and consistency.
• tailwind.config.js: Tailwind CSS configuration for customizing styles and utilities.
• vite.config.js: Vite's configuration file for setting up the project build process.
• src/assets/: Contains static assets like images used throughout the website.
• src/components/: Contains React components for different sections of the website:
  • Banner.jsx: Displays the banner or hero section of the website.
  • Navbar.jsx: The navigation bar, allowing users to navigate through different pages.
  • Services.jsx: Displays a list of services offered by the website.
  • Testimonials.jsx: Shows user feedback and reviews.
  • Footer.jsx: The footer section, containing links and contact information.
  • TrackServices.jsx: Allows users to track the status of their booked services.
• src/modals/: Contains modal components like:
  • SignInModal.jsx: A modal for user sign-in.
  • SignUpModal.jsx: A modal for new user registration.

---

Available Scripts

In the project directory, you can run:

• npm run dev: Starts the development server with hot-reloading.
• npm run build: Builds the project for production.
• npm run lint: Runs ESLint to identify and fix code quality issues.
• npm run preview: Serves the production build locally.

File Tree

src
 ┣ assets
 ┃ ┣ images
 ┃ ┃ ┣ App_1.jpg
 ┃ ┃ ┗ webdevlopment _1.jpg
 ┃ ┗ react.svg
 ┣ components
 ┃ ┣ Banner.jsx
 ┃ ┣ BookingDetails.jsx
 ┃ ┣ BookingForm.jsx
 ┃ ┣ Contact.jsx
 ┃ ┣ Footer.jsx
 ┃ ┣ Hero.jsx
 ┃ ┣ Navbar.jsx
 ┃ ┣ NotificationBar.jsx
 ┃ ┣ Profile.jsx
 ┃ ┣ ScrollToTop.jsx
 ┃ ┣ Services.jsx
 ┃ ┣ ServiceSlider.jsx
 ┃ ┣ Testimonials.jsx
 ┃ ┗ TrackServices.jsx
 ┣ modals
 ┃ ┣ SignInModal.jsx
 ┃ ┗ SignUpModal.jsx
 ┣ App.css
 ┣ App.jsx
 ┣ index.css
 ┗ main.jsx