Design Architecture - Durjoy01/Cholo_jai GitHub Wiki

Understanding the MVC Design Pattern and Its Application in Our Project

What is MVC?

MVC (Model-View-Controller) is a design pattern commonly used for developing software applications. It separates an application into three interconnected components:

  1. Model: Represents the data and the business logic of the application. It is responsible for: o Managing and retrieving data from databases. o Applying business rules and validations. o Handling updates and synchronization between data and the controller.
  2. View: This layer handles the presentation of data to the user. It is responsible for: o Displaying data provided by the controller. o Ensuring a user-friendly interface. o Remaining decoupled from the business logic.
  3. Controller: Acts as an intermediary between the model and the view. It is responsible for: o Handling user input. o Requesting data from the model and passing it to the view. o Updating the model or view based on user actions. MVC Flow: User Input → Controller → Model → View → User

How Our Project Follows the MVC Design Pattern Project Overview Our project is a full-stack application with separate backend and frontend components, and it follows the MVC architecture on the backend. Here’s a breakdown of how each part of the system fits into the MVC pattern:

  1. Model Layer (backend/models) • The models directory in our backend contains the definitions for the data structures. These are mapped to database tables and represent core entities in the application.

  2. View Layer (frontend) • Frontend: The frontend folder is responsible for the user interface. It interacts with the backend through APIs but does not contain business logic, adhering to the separation of concerns principle.

  3. Controller Layer (backend/controllers) • The controllers directory contains logic to process requests, interact with models, and return appropriate responses. Controllers handle API endpoints and direct incoming requests to the correct services.

Example Flow in Our Application Scenario: User searches available tickets

  1. User Interaction (Frontend): The user clicks on the "search" button on the home page.
  2. Controller Handling (Backend): The request is sent to a method named “searchTickets” in the controllers. This controller interacts with the “ticket.moels.js” in models.
  3. Model Update (Backend): Tickets is searched and if found, the model updates the database.
  4. Response (Frontend): The controller returns a response, and the frontend updates the cart UI to reflect found ticket.