event-management-frontend/README.md

# Event Management Frontend

The Event Management Frontend is a native Android application developed in
Kotlin. This app provides a comprehensive calendar-based event management
system designed for seamless user interaction.

This project was created as the final assignment for **AP7PD** and **AP7MP** subjects.

It integrates with a custom backend REST API to manage users, events,
attendees, and categories effectively.

## Overview / Key Features

- **Monthly Calendar View**: View events in a grid layout by weeks and days.
- **Daily View**: Easily browse and manage daily events.
- **Event Management**: Create, edit, and delete events with support for categories and attendees.
- **User Authentication**: Register and log in with robust access and refresh
  token support, ensuring secure and seamless user sessions.
- **Error Handling**: Gracefully handles API errors, including scenarios where
  the backend is unreachable.

## Backend requirements

The application requires a running backend API for full functionality. The
backend is implemented using FastAPI in Python.

You can find the source code and detailed deployment instructions for the
backend API at: [Event Management Backend
Repository](https://git.itsdrike.com/ap7pd/event-management-backend).

> [!TIP]
> The app supports dynamic configuration of the API base URL, allowing you to
> deploy the backend on any server or cloud provider of your choice. If you
> wish to test the app from android studio, you can deploy the backend locally
> (<http://localhost:8000>) and set the base URL to `http://10.0.2.2:8000`.
> This will allow the Android emulator to access the local backend server. Note
> that this is also the default value.

## Showcase

Below is a showcase of key features and screens in the application:

<table>
  <!-- First Image Row -->
  <tr>
    <th>
      <details>
        <summary>📶 API Unreachable</summary>
        Error screen, shown whenever the API becomes unreachable.
      </details>
    </th>
    <th>
      <details>
        <summary>🔒 Login Screen</summary>
        Login screen for user authentication, first screen you will face when you start the app for the first time.
      </details>
    </th>
    <th>
      <details>
        <summary>🔧 Base URL Change</summary>
        Screen to change the API base URL, available from login, register & API unreachable pages (doesn't require being signed in).
      </details>
    </th>
  </tr>
  <tr>
    <td>
      <img src="showcase/01_api_unreachable.png" alt="API Unreachable" />
    </td>
    <td>
      <img src="showcase/02_login.png" alt="Login Screen" />
    </td>
    <td>
      <img src="showcase/02_login_base_url_change.png" alt="Base URL Change" />
    </td>
  </tr>

  <!-- Second Image Row -->
  <tr>
    <th>
      <details>
        <summary>📝 Register Screen</summary>
        User registration screen.
      </details>
    </th>
    <th>
      <details>
        <summary>📆 Month View</summary>
        Monthly calendar view to browse events, the screen shown immediately after login.
      </details>
    </th>
    <th>
      <details>
        <summary>📅 Day View</summary>
        Daily event view, listing the events for that day.
      </details>
    </th>
  </tr>
  <tr>
    <td>
      <img src="showcase/03_register.png" alt="Register Screen" />
    </td>
    <td>
      <img src="showcase/04_month_view.png" alt="Month View" />
    </td>
    <td>
      <img src="showcase/05_day_view.png" alt="Day View" />
    </td>
  </tr>

  <!-- Third Image Row -->
  <tr>
    <th>
      <details>
        <summary>⏳ Edit Duration Event</summary>
        Edit screen for duration-based events.
      </details>
    </th>
    <th>
      <details>
        <summary>⚡ Edit Instant Event</summary>
        Edit screen for instant events.
      </details>
    </th>
    <th>
      <details>
        <summary>📨 Invite User to Event</summary>
        Interface for inviting users to an event.
      </details>
    </th>
  </tr>
  <tr>
    <td>
      <img src="showcase/06_duration_event_edit.png" alt="Edit Duration Event" />
    </td>
    <td>
      <img src="showcase/07_instant_event_edit.png" alt="Edit Instant Event" />
    </td>
    <td>
      <img src="showcase/08_invite_user_to_event.png" alt="Invite User to Event" />
    </td>
  </tr>

  <!-- Fourth Image Row -->
  <tr>
    <th>
      <details>
        <summary>⏱️ Duration Event Details</summary>
        Detailed view of a duration-based event.
      </details>
    </th>
    <th>
      <details>
        <summary>🔍 Instant Event Details</summary>
        Detailed view of an instant event.
      </details>
    </th>
    <th>
      <details>
        <summary>📂 Categories Overview</summary>
        List of event categories of the user.
      </details>
    </th>
  </tr>
  <tr>
    <td>
      <img src="showcase/09_duration_event_details.png" alt="Duration Event Details" />
    </td>
    <td>
      <img src="showcase/10_instant_event_details.png" alt="Instant Event Details" />
    </td>
    <td>
      <img src="showcase/11_categories.png" alt="Categories Overview" />
    </td>
  </tr>

  <!-- Fifth Image Row -->
  <tr>
    <th>
      <details>
        <summary>➕ Create New Category</summary>
        Form to create a new category or edit an existing one.
      </details>
    </th>
    <th>
      <details>
        <summary>🆕 Updated Categories Overview</summary>
        Updated list with a newly added category.
      </details>
    </th>
    <th>
      <details>
        <summary>⚙️ Settings Screen</summary>
        Settings menu for configuring user details & the base url. This screen is only available to logged in users.
      </details>
    </th>
  </tr>
  <tr>
    <td>
      <img src="showcase/12_new_category.png" alt="Create New Category" />
    </td>
    <td>
      <img src="showcase/13_categories_with_new.png" alt="Updated Categories" />
    </td>
    <td>
      <img src="showcase/14_settings.png" alt="Settings Screen" />
    </td>
  </tr>

  <!-- Sixth Image Row -->
  <tr>
    <th>
      <details>
        <summary>🔔 Notification: Invite</summary>
        Notification about an incoming event invite.
      </details>
    </th>
    <th>
      <details>
        <summary>👀 Invite Preview</summary>
        Preview of the event from the invite (after clicking the eye button).
      </details>
    </th>
    <th>
      <details>
        <summary>✅ Notification: Accepted</summary>
        That same notification for the invite, after acceptance. This notification also doesn't have the orange bar on the left, meaning it's marked as read.
      </details>
    </th>
  </tr>
  <tr>
    <td>
      <img src="showcase/15_notification_invite_bob.png" alt="Notification: Invite" />
    </td>
    <td>
      <img src="showcase/16_invite_event_details_preview.png" alt="Invite Preview" />
    </td>
    <td>
      <img src="showcase/17_notification_invite_accepted_bob.png" alt="Notification: Accepted" />
    </td>
  </tr>

  <!-- Final Row -->
  <tr>
    <th colspan="3">
      <details>
        <summary>🗑️ Notifications Cleared</summary>
        Screen showing cleared notifications, after the user has swiped all the notifications to the right, deleting them.
      </details>
    </th>
  </tr>
  <tr>
    <td colspan="3">
      <img src="showcase/21_notifications_cleared.png" alt="Notifications Cleared" />
    </td>
  </tr>
</table>