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:

<div style="padding: 20px; max-width: 1200px; margin: auto;">
  <table style="width: 100%; border-collapse: collapse; text-align: center;">
    <thead>
      <tr>
        <th colspan="3" style="font-size: 24px; padding: 10px;">Showcase</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <img src="showcase/01_api_unreachable.png" style="width: 250px; height: 140px;" alt="API Unreachable" />
          <p>Error screen, shown whenever the API becomes unreachable.</p>
        </td>
        <td>
          <img src="showcase/02_login.png" style="width: 250px; height: 140px;" alt="Login Screen" />
          <p>Login screen for user authentication.</p>
        </td>
        <td>
          <img src="showcase/02_login_base_url_change.png" style="width: 250px; height: 140px;" alt="Base URL Change" />
          <p>Screen to update the API base URL, available from the login, register & API unreachable pages.</p>
        </td>
      </tr>
      <tr>
        <td>
          <img src="showcase/03_register.png" style="width: 250px; height: 140px;" alt="Register Screen" />
          <p>User registration screen.</p>
        </td>
        <td>
          <img src="showcase/04_month_view.png" style="width: 250px; height: 140px;" alt="Month View" />
          <p>Monthly calendar view to browse events.</p>
        </td>
        <td>
          <img src="showcase/05_day_view.png" style="width: 250px; height: 140px;" alt="Day View" />
          <p>Daily event view with event details for that day.</p>
        </td>
      </tr>
      <tr>
        <td>
          <img src="showcase/06_duration_event_edit.png" style="width: 250px; height: 140px;" alt="Edit Duration Event" />
          <p>Edit screen for duration-based events.</p>
        </td>
        <td>
          <img src="showcase/07_instant_event_edit.png" style="width: 250px; height: 140px;" alt="Edit Instant Event" />
          <p>Edit screen for instant events.</p>
        </td>
        <td>
          <img src="showcase/08_invite_user_to_event.png" style="width: 250px; height: 140px;" alt="Invite User to Event" />
          <p>Interface for inviting users to an event.</p>
        </td>
      </tr>
      <tr>
        <td>
          <img src="showcase/09_duration_event_details.png" style="width: 250px; height: 140px;" alt="Duration Event Details" />
          <p>Detailed view of a duration-based event.</p>
        </td>
        <td>
          <img src="showcase/10_instant_event_details.png" style="width: 250px; height: 140px;" alt="Instant Event Details" />
          <p>Detailed view of an instant event.</p>
        </td>
        <td>
          <img src="showcase/11_categories.png" style="width: 250px; height: 140px;" alt="Categories Overview" />
          <p>List of event categories of the user.</p>
        </td>
      </tr>
      <tr>
        <td>
          <img src="showcase/12_new_category.png" style="width: 250px; height: 140px;" alt="Create New Category" />
          <p>Form to create a new category.</p>
        </td>
        <td>
          <img src="showcase/13_categories_with_new.png" style="width: 250px; height: 140px;" alt="Updated Categories" />
          <p>Updated list with a newly added category.</p>
        </td>
        <td>
          <img src="showcase/14_settings.png" style="width: 250px; height: 140px;" alt="Settings Screen" />
          <p>Settings menu for app configuration. Only available when logged in.</p>
        </td>
      </tr>
      <tr>
        <td>
          <img src="showcase/15_notification_invite_bob.png" style="width: 250px; height: 140px;" alt="Notification: Invite" />
          <p>Notification about an incoming event invite.</p>
        </td>
        <td>
          <img src="showcase/16_invite_event_details_preview.png" style="width: 250px; height: 140px;" alt="Invite Preview" />
          <p>Preview of the event from the invite.</p>
        </td>
        <td>
          <img src="showcase/17_notification_invite_accepted_bob.png" style="width: 250px; height: 140px;" alt="Notification: Invite Accepted" />
          <p>Notification for the incoming invite after accepting (already marked read).</p>
        </td>
      </tr>
      <tr>
        <td>
          <img src="showcase/18_day_view_invited_event_bob.png" style="width: 250px; height: 140px;" alt="Day View with Invite" />
          <p>Day view showing the invited event.</p>
        </td>
        <td>
          <img src="showcase/19_invited_event_details_bob.png" style="width: 250px; height: 140px;" alt="Invited Event Details" />
          <p>Details of an event the user was invited to.</p>
        </td>
        <td>
          <img src="showcase/20_notification_invite_accepted_john.png" style="width: 250px; height: 140px;" alt="Notification Accepted John" />
          <p>Notification about a user having accepted an outgoing invite (from the inviter's account).</p>
        </td>
      </tr>
      <tr>
        <td colspan="3">
          <img src="showcase/21_notifications_cleared.png" style="width: 250px; height: 140px;" alt="Notifications Cleared" />
          <p>Screen showing cleared notifications.</p>
        </td>
      </tr>
    </tbody>
  </table>
</div>