MAD2-Flask-Security

 Session-Based Authentication

User logs in → server generates a session ID → stores it in the database.

The session ID is sent to the client as a cookie, which is sent with every request to authenticate the user.

Session data is stored on the server (in memory or a database).

As the user base grows, managing and maintaining sessions becomes resource-intensive.

Sessions require state to be maintained on the server

Cookies have limitations with CORS (Cross-Origin Resource Sharing), which can make session-based authentication difficult for APIs consumed by different domain clients.

Token-Based Authentication

User logs in → server generates a token (e.g., JWT, Authentication-token) → sends it to the client.

The client stores the token (in local storage, session storage, or cookies) and includes it in the header (e.g., Authorization: Bearer <token>,Authentication-Token:<token>) for every request.
Advantages of token based authentication:

stateless, more flexible and scalable

support cross-platform 

MAD2-Viva-DataBase

 Questions Related to DataBase

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.

MAD2-Backend-Jobs

 Questions related to backend jobs

1. SMTP (Simple Mail Transfer Protocol)?

SMTP is a communication protocol used to send emails over the Internet. It works by transferring email messages between mail servers or from a client (e.g., your email application) to a mail server.

SMTP operates on the Application Layer and uses a store-and-forward mechanism

Email message consists of a header (e.g., sender, recipient, subject) and body (the email content).

Using MailHog to Send Emails via SMTP

MailHog is a free email testing tool that acts as a fake SMTP server for testing emails locally. It's especially useful during development to test email functionality without sending real emails.

MAD2-Viva5

 Component Basics: Explanation of any  one of the vue.js component ?

export default {}
This exports the Vue component definition as the default export, making it reusable in other parts of the application

name: "MyServices",

The component's name is MyServices, helpful for debugging tools and readability.

data() { return { myServices: [] }; }

• data(): A function returning the reactive state of the component.
• myServices: An array initialized as empty, meant to store a list of service requests fetched from the API.

methods: {}

MAD2-Viva4

 How are you rendering the charts in your app? 

To generate statistical visualizations and metrics for an admin using Matplotlib and Flask. It combines Flask routes and SQLAlchemy queries to retrieve data from the database, processes it, and uses Matplotlib to create charts. The charts are converted into Base64 strings to be sent to the frontend for rendering.

Base64:

• Encodes the binary PNG images into strings that can be sent over HTTP to the frontend.

Matplotlib:

• A Python plotting library used for creating the charts (bar charts in this case).

BytesIO:

• An in-memory buffer that holds binary data for saving plots as PNG images.

Matplotlib Features:

• plt.bar: Creates the bar chart.
• plt.text: Adds labels above each bar.

How to Create Bar Chart: Request Distribution by Services

This chart shows the number of requests for each service.

Code Section:

plt.figure(figsize=(5, 5))

plt.bar(service_counts.keys(), service_counts.values(), color='green')

plt.xlabel('Service')

plt.ylabel('Number of Requests')

plt.title('Request Distribution by Services')

plt.xticks(rotation=90)

# Convert  plot to base64

buffer1 = BytesIO()

plt.tight_layout()

plt.savefig(buffer1, format='png')

buffer1.seek(0)

plot_data_service = base64.b64encode(buffer1.getvalue()).decode()

plt.close()

1. plt.bar: Creates the bar chart with service names as keys and request counts as values.
2. buffer1 = BytesIO(): Creates an in-memory buffer to store the chart as an image.
3. plt.savefig(buffer1, format='png'): Saves the chart in PNG format to the buffer.
4. base64.b64encode(buffer1.getvalue()).decode(): Encodes the chart as a Base64 string for frontend use.

Base64 Encoding

• After generating charts using Matplotlib, the code converts them to PNG format and encodes them into Base64 strings using:

  buffer = BytesIO()
  plt.savefig(buffer, format='png', bbox_inches='tight')
  buffer.seek(0)
  base64.b64encode(buffer.getvalue()).decode()
  

• These strings can then be sent as JSON and rendered in the frontend.

MAD2-Viva2

 What are Vue life cycles ? Which all you used?

In Vue.js, lifecycle hooks are functions that allow developers to run code at specific stages of a Vue component's lifecycle. These hooks provide control over how the component is initialized, updated, or destroyed.

Lifecycle Phases

1. Creation Phase:
   • Before the component is added to the DOM.
2. Mounting Phase:
   • When the component is inserted into the DOM.
3. Updating Phase:
   • When the component's reactive data changes, triggering re-rendering.
4. Destruction Phase:
• When the component is removed from the DOM.

Common Lifecycle Hooks

Below is a categorized list of hooks with their purpose:

1. Creation Phase

• beforeCreate():

  • Called after the component instance is initialized but before data observation and events setup.
  • Rarely used.

• created():

• Called after the component is initialized, reactive data and events are set up, but the DOM is not yet available.
• Useful for fetching data or initializing logic.

2. Mounting Phase

• beforeMount():

  • Called before the component is added to the DOM.

• mounted():

• Called after the component is mounted in the DOM.
• Ideal for interacting with the DOM or initializing third-party libraries.

3. Updating Phase

• beforeUpdate():

  • Called before the DOM is updated when reactive data changes.

• updated():

• Called after the DOM is updated.
• Avoid heavy computations here as they might cause re-rendering.

4. Destruction Phase

• beforeUnmount() (formerly beforeDestroy in Vue 2):

  • Called right before the component is removed from the DOM.

• unmounted() (formerly destroyed in Vue 2):

• Called after the component is completely removed.
• Ideal for cleanup tasks (e.g., removing event listeners or stopping intervals).

created() for fetching data.

mounted() for DOM-related tasks.

beforeUnmount() for cleanup operations.

MAD2-preparation

 Explain the significance of fs_uniquifier in your project (if applicable)?

fs_uniquifier is typically used for generating unique identifiers for resources

 fs_uniquifier = db.Column(db.String(255), unique=True, nullable=False)#Unique identifier for Flask Security

Since the fs_uniquifier is stored as part of the user record in the database, revoking a token simply involves changing its value.

It eliminates the need to maintain a separate database table for token invalidation, simplifying implementation.

When Flask-Security generates or verifies tokens, it automatically uses the fs_uniquifier.

 Where fs_uniquifier is Useful

• Password Resets: Changing the fs_uniquifier during a password reset invalidates any prior reset or login tokens.
• Account Takeovers: In case of suspicious activity, regenerating the fs_uniquifier revokes all active tokens for the account.
• Email Change or Deletion: Updating the fs_uniquifier ensures no token tied to the old email or user account remains valid.
  fs_uniquifier adds an essential layer of security to ensure that tokens are managed effectively.

MAD2-Viva-Preparation1

 "MAD2 Viva - Preparations: Tips, Resources, and Strategies"

"Preparing for the MAD2 Viva can feel overwhelming, but with the right strategies and resources, you can approach it with confidence. This post covers essential tips, key topics, and effective preparation techniques."

MAD2-Viva -preparations

 MAD2 Viva - Preparations: Tips, Resources, and Strategies

"A complete guide to acing your Modern Applications Development 2 Viva for IITM BS Degree."

"Preparing for the MAD2 Viva can feel overwhelming, but with the right strategies and resources, you can approach it with confidence. This post covers essential tips, key topics, and effective preparation techniques."

a. Preparation Checklist

• Content Example:
  • ✅ Revise all assignments and projects
  • ✅ Understand Flask basics
  • ✅ Practice REST API concepts
  • ✅ Be ready to explain your project in detail
  • ✅ Prepare for common Viva questions

Key Topics to Focus On

• Example:
• Flask Basics: Understand routing, request handling, and templates.
• SQLAlchemy: Be clear on models and relationships.
• API Development: Know how REST APIs work and how you implemented them in your project.
• Frontend Basics: Be ready to explain any Vue.js/HTML/CSS integration