Skip to content

Latest commit

 

History

History
114 lines (105 loc) · 5.31 KB

design-8.md

File metadata and controls

114 lines (105 loc) · 5.31 KB

Part I. Architectural Design

Architectural Overview

+---------------------------------------------------+
|                       App.vue                     |
| +------------+ +--------------+ +--------------+ |
| | Navbar.vue | | UserProfile  | | Reminders.vue| |
| +------------+ +--------------+ +--------------+ |
+---------------------------------------------------+
        |                |                |
+------------+    +-------------+   +---------------+
| EventsPage |    | Community   |   | EventBooking  |
| .vue       |    | Page.vue    |   | .vue          |
+------------+    +-------------+   +---------------+
        |                |                |
+-----------+   +---------------+    +----------------+
| Footer.vue|   | InfoDisplay   |    | Recommendations|
|           |   | .vue          |    | .vue           |
+-----------+   +---------------+    +----------------+

Description of the Architecture

Our project employs a typical frontend-backend separation architecture:

  • Frontend (App.vue and components): Manages the user interface and frontend logic, integrating multiple Vue components such as Navbar.vue, UserProfile.vue, etc.
  • Backend: Provides RESTful APIs for data retrieval and operations.
  • Database: Stores user data, events data, and more. The frontend communicates with the backend via HTTP requests, which in turn interacts with the database to fetch or update data.

Reasoning: This architecture is chosen for its flexibility and maintainability, allowing for independent development and deployment of frontend and backend components.

Part II. UI Design

Before implementation, having a detailed UI design is crucial. Below are ASCII representations of the primary user interfaces for our system.

Home Page UI

+--------------------------------------------------+
| [Navbar]                                         |
|                                                  |
| [Logo]     [Search Bar]        [Login/Signup]    |
|                                                  |
| +------------------+ +-------------------------+ |
| | Featured Event   | | Upcoming Events         | |
| +------------------+ +-------------------------+ |
|                                                  |
| +----------------------------------------------+ |
| | Recommended Events                           | |
| +----------------------------------------------+ |
|                                                  |
| [Footer]                                        |
+--------------------------------------------------+

Events Page UI

+--------------------------------------------------+
| [Navbar]                                         |
|                                                  |
|    Upcoming Events                               |
| +-----------+  +-----------+  +----------------+ |
| | Event 1   |  | Event 2   |  | Event 3        | |
| +-----------+  +-----------+  +----------------+ |
|                                                  |
|    Event Booking                                  |
| +----------------+  +--------------------------+ |
| | Book Event 1   |  | Book Event 2             | |
| +----------------+  +--------------------------+ |
|                                                  |
| [Footer]                                        |
+--------------------------------------------------+

User Profile UI

+--------------------------------------------------+
| [Navbar]                                         |
|                                                  |
| User Profile:                                    |
| +----------------------------------------------+ |
| | Name: [Text Field]                           | |
| | Email: [Text Field]                          | |
| | [Save Button]                                | |
| +----------------------------------------------+ |
|                                                  |
| +----------------------------------------------+ |
| | Change Password                              | |
| | Old: [Password Field] New: [Password Field]  | |
| | [Update Button]                              | |
| +----------------------------------------------+ |
|                                                  |
| [Footer]                                        |
+--------------------------------------------------+

Reminders UI

+--------------------------------------------------+
| [Navbar]                                         |
|                                                  |
| Reminders:                                       |
| +----------------------------------------------+ |
| | - Event 1 at [time/date]                     | |
| | - Event 2 at [time/date]                     | |
| +----------------------------------------------+ |
|                                                  |
| Notifications:                                   |
| [ ] Enable Notifications                        |
|                                                  |
| [Footer]                                        |
+--------------------------------------------------+

This report outlines the software architecture and key UI designs for our project, facilitating development and team communication. The clear architectural design and detailed UI previews ensure that each feature and interface can be developed effectively to meet our goals.