MAD2-Viva3

 Explain the Components in your code?

Vue components used to structure the front end of your application(UI).Each component serves a specific role in the app's architecture, enabling a modular and maintainable structure

Components Overview

1. AdminStats.js

• Likely displays administrative statistics, such as total service requests, users, or system performance metrics.
• Could be part of the admin dashboard for monitoring key metrics.

2. AllRequests.js

• Probably shows a list of all service requests in the system.
• May include filtering or sorting options for requests by status, date, or customer.

3. AllServices.js

• Likely lists all available services that customers can book.
• May include details like service name, price, and ratings.

4. AvailableServices.js

• Focuses on services that are currently available for booking.
• Could be filtered based on location or category.

5. ClosedServices.js

• Displays services that have been completed or closed.
• Might include feedback or review options for completed services.

6. CustomerRegister.js

• A registration form for customers to create accounts on the platform.
• Likely includes fields like name, email, password, and address.

7. EditRequest.js

• Allows users (customers or admins) to edit an existing service request.
• Could involve updating service details, dates, or status.

8. EditService.js

• Used by admins or professionals to edit the details of a service.
• Fields might include service name, price, description, or availability.

9. Home.js

• Serves as the landing page for the application.
• Likely includes an overview of the services offered and navigation to other sections.

10. Login.js

• Implements the login functionality for users (admin, professionals, customers).
• Includes fields for username and password.

11. MyRequests.js

• Displays a list of service requests specific to the currently logged-in customer.
• Customers can view the status of their requests or take actions like canceling or rescheduling.

12. MyServices.js

• Intended for service professionals to view service requests assigned to them.
• Professionals can accept, reject, or update the status of a service request.

13. NavBar.js

• Implements the navigation bar for the application.
• Likely includes links to major sections like "Home," "My Services," "Requests," and "Profile."

14. ProfessionalRegister.js

• A registration form for service professionals to sign up.
• Fields might include name, contact info, area of expertise, and years of experience.

15. Professionals.js

• Displays a list of all registered service professionals.
• Admin might use this to manage professionals (approve, block, etc.), and customers may use it to find professionals.

16. Profile.js

• Handles user profile functionality.
• Allows users to view and edit their account details.

17. SearchResult.js

• Displays search results for queries made by users.
• Could show professionals or services based on the search parameters (e.g., location or service name).

Folder Structure: Partials

The Partials subdirectory may contain smaller, reusable components shared across multiple pages. 

Usage in the Application

• Customer Role: Components like CustomerRegister.js, MyRequests.js, and SearchResult.js are tailored for customers to manage their service interactions.

• Service Professional Role: Components like ProfessionalRegister.js, MyServices.js, and Professionals.js are designed for professionals to manage their services and requests.

• Admin Role: Admins use components like AdminStats.js, AllRequests.js, and ClosedServices.js to oversee the system.

what is a component in vue2 explain?

Vue components are the building blocks of any Vue application, allowing developers to create dynamic, reusable, and maintainable UI elements

 component is a reusable and self-contained block of code that encapsulates HTML, CSS, and JavaScript to build the user interface of your application. Components help break down a complex application into smaller, manageable pieces, each responsible for a specific functionality of UI.

Key Features of a Vue Component

1. Reusability:
   • Components can be reused across different parts of the application, reducing redundancy(repetition).
2. Encapsulation:
   • Each component has its own logic, template, and styles, keeping the code modular.
3. Communication:
• Components can communicate with each other using props, events, or state management.

A Vue component typically has three sections:

1. Template (<template>):
   • The HTML structure of the component.(only one root  div element) 
2. Script (<script>):
   • Contains the JavaScript logic, props, data, methods, etc.
3. Style (<style>):
   • The CSS styles specific to the component.

example:

             export default { 

                      name: "GreetingComponent", // Component name

                      props: ["name"], // Props to accept data from parent components 

                      methods: { 

                                        changeName() 

                                                 { 

                                                      this.$emit("update:name", "New Name"); // Emits an event to update                                                    } 

                       } ,

                   template:`

                            <div>

                             </div>

                      `,

         };

template code:

           

Contains the HTML structure of the component.

This defines what will be displayed in the DOM when the component is rendered.
Script :
Holds the component's JavaScript logic, including:

• Name: A unique name to identify the component.
• Props: Accepts data from a parent component.
• Methods: Defines methods to handle logic and  user actions or events.
• Emit: Used to send events or data to the parent component.

A component is local/global 

Imported and registered in the parent component - local component

Registered globally using Vue.component - global component



Single function component?

A single-function component refers to a component that consists of a single, self-contained function, typically used to render some UI or perform a specific task in a reusable way. 

this component only renders UI and doesn’t manage state, lifecycle hooks, or use reactive properties.

1.Stateless and instanceless for better performance.

2.Accepts props directly in the template.

3.uses - When the component is simple and only responsible for rendering UI.

<template>

  <Greeting name="John" /> //accept name property directly in template

</template>

<script>

import Greeting from './Greeting.vue';

export default {

  components: { Greeting }

};

</script>

Difference between Flex box and Grid ?

Flexbox and CSS Grid are two powerful layout systems in CSS, each designed for arranging elements on a page.

Flexbox  is a one-dimensional layout system that arranges items in a single row(horizontal) or column(vertical).Handles item spacing dynamically, even when resizing the container. (e.g., center, space-between)

 This works in one direction aligning items along one axis.

used in-Navigation bars, Aligning buttons in a form, Centering elements vertically and horizontally.

.container {

  display: flex; /* Enables Flexbox */

  justify-content: center; /* Aligns items horizontally to the center */

  align-items: center; /* Aligns items vertically to the center */

  height: 100vh; /* Makes container full height */

}

CSS Grid Layout is a two-dimensional layout system that works with rows and column simultaneously .Align items precisely within specific cells ,used for complex layouts like dashboards or entire web pages. Define grid areas explicitly using grid-template-rows and grid-template-columns

uses - Gallery-style layouts, Complex UI structures, Page layouts with headers, sidebars, and footers.

.container {

  display: grid;

  grid-template-columns: 1fr 1fr; /* Two equal columns */

  grid-template-rows: auto;      /* Adjust rows automatically */

  gap: 10px;                     /* Space between grid items */

}

Used Local API or Rest API ?

Local API and REST API are terms related to building and using application programming interfaces (APIs). They differ based on their scope and purpose.

A Local API refers to an API that operates within a single system or application. It allows different parts or modules of the same system to communicate with each other.A backend service exposing an API for its own frontend.

ex: 

Imagine a desktop application with a weather module. The module might use a local API to fetch weather data from a locally running backend.

A REST API (Representational State Transfer API) is a web-based API design pattern used for communication between clients and servers over HTTP.

used for communication over the internet, enabling interaction between distributed systems.

ex:

A weather service that provides weather data through a public REST API. Clients can request weather data using an endpoint like:

GET https://api.weather.com/current?location=NewDelhi

what is vue? why did you use vue?

Vue is a progressive JavaScript framework used for building user interfaces(UI) and single-page applications (SPAs).

Vue simplifies data management with two-way data binding. Changes to the UI (frontend)elements are reflected in the data model(backend), and vice versa. This eliminates the need for manual DOM manipulation

Reactive Data Binding: The data model automatically syncs with the UI.

Component-Based Architecture: UI elements are broken into reusable, encapsulated components.

Directives: Special attributes (like v-for and v-if) for efficient DOM manipulation.

Virtual DOM: Ensures fast rendering of dynamic content.

Flexibility: Works well with other tools, and you can integrate it into existing projects.

Vue CLI simplifies project setup 

Why Did I Use Vue?

Vue.js is perfect for building interactive and dynamic interfaces

It simplifies data binding and user interaction while ensuring responsive performance.

Integration with Flask:

• Vue.js works well with a Flask backend by consuming REST APIs, offering a clear separation of frontend and backend concerns.

Component-Based Development, Efficient UI State Management, Scalability, Lightweight and Fast

what all frameworks you used in your project?

Frontend Frameworks:

1. Vue.js (including Vue Router for navigation)-Javascript framework

Backend Frameworks:

2. Flask (with Flask-RESTful for API development)

Task Management and Caching Frameworks:

3. Celery (for background jobs)
4. Redis (for caching and as a message broker)
   

Redis is an open source data structure server. It belongs to the class of NoSQL databases known as key/value stores. Keys are unique identifiers, whose value can be one of the data types that Redis supports. These data types range from simple Strings, to Linked Lists, Sets and even Streams.

Celery is an open source asynchronous task queue or job queue which is based on distributed message passing. While it supports scheduling, its focus is on operations in real time.

Styling Framework:

5. Bootstrap

Bootstrap is a free, open source front-end development framework for the creation of websites and web apps. Designed to enable responsive development of mobile-first websites, Bootstrap provides a collection of syntax for template designs.

Is your project responsive ?

What Does Responsive Mean?

A responsive project adjusts its layout and elements automatically to look good on various screen sizes and devices, such as desktops, tablets, and mobile phones.

Flexible Layouts with Flexbox or Grid:Use Flexbox or CSS Grid for adaptable layouts.

Responsive Frameworks:Use frameworks like Bootstrap or 
Tailwind CSS that provide pre-built responsive components.
Test Responsiveness:
Use browser developer tools to test your project on different devices and resolutions.
Right-click on the page → Inspect → Toggle device toolbar (Ctrl+Shift+M / Cmd+Shift+M).
Did you use slots in your app?
Slots are placeholders inside a component where you can dynamically insert content when using
the component. They act as a mechanism for composing components and passing custom content to 
them from the parent.

1.To create reusable components while allowing custom content.

2.To provide a default structure for a component while allowing flexibility for different use cases

Types of slots

1.Default Slot-A basic placeholder for content.

<!-- Child Component -->

<template>

  <div class="box">

    <slot></slot> <!-- Placeholder for content -->

  </div>

</template>

<!-- Parent Component -->

<template>

  <ChildComponent>

    <p>This is passed to the default slot.</p>

  </ChildComponent>

</template>

2.Named Slot-Multiple slots with names to pass specific content into specific placeholders.

<!-- Child Component -->

<template>

  <header><slot name="header"></slot></header>

  <main><slot></slot></main> <!-- Default slot -->

  <footer><slot name="footer"></slot></footer>

</template>

<!-- Parent Component -->

<template>

  <ChildComponent>

    <template v-slot:header><h1>Header Content</h1></template>

    <p>Main Content for Default Slot</p>

    <template v-slot:footer><p>Footer Content</p></template>

  </ChildComponent>

</template>

3.Scoped Slots-Allows passing data from the child component to the parent using slots

<!-- Child Component -->

<template>

  <div>

    <slot :user="user"></slot> <!-- Passing data -->

  </div>

</template>

<script>

export default {

  data() {

    return { user: { name: "Alice", age: 25 } };

  },

};

</script>

<!-- Parent Component -->

<template>

  <ChildComponent v-slot="{ user }">

    <p>User Name: {{ user.name }}</p>

    <p>User Age: {{ user.age }}</p>

  </ChildComponent>

</template>

Async Function?

Is defined with the "async" keyword, An async function always returns a promise, even if the function doesn't explicitly return one.

await keyword is used inside the async functions to pause the execution of the function until a promise is resolved or rejected.

Use  try ........catch blocks to handle errors in async functions.

You cannot use await outside of an async function.

If you use await on a rejected promise and don't handle it with try...catch, the function will throw an error.