111 lines
4 KiB
Markdown
111 lines
4 KiB
Markdown
# 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 style="width: 100%; border-collapse: collapse; text-align: center; margin: auto; table-layout: fixed;">
|
|
<colgroup>
|
|
<col style="width: 33.33%;" />
|
|
<col style="width: 33.33%;" />
|
|
<col style="width: 33.33%;" />
|
|
</colgroup>
|
|
|
|
<!-- First Image Row -->
|
|
<tr>
|
|
<th>📶 API Unreachable</th>
|
|
<th>🔒 Login Screen</th>
|
|
<th>🔧 Base URL Change</th>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<img src="showcase/01_api_unreachable.png" alt="API Unreachable" style="max-width: 200; height: auto;" />
|
|
</td>
|
|
<td>
|
|
<img src="showcase/02_login.png" alt="Login Screen" style="max-width: 200; height: auto;" />
|
|
</td>
|
|
<td>
|
|
<img src="showcase/02_login_base_url_change.png" alt="Base URL Change" style="max-width: 200; height: auto;" />
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Error screen, shown whenever the API becomes unreachable.</td>
|
|
<td>Login screen for user authentication, first screen you will face when you start the app for the first time.</td>
|
|
<td>Screen to change the API base URL, available from login, register & API unreachable pages (doesn't require being signed in).</td>
|
|
</tr>
|
|
|
|
<!-- Second Image Row -->
|
|
<tr>
|
|
<th>📝 Register Screen</th>
|
|
<th>📆 Month View</th>
|
|
<th>📅 Day View</th>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<img src="showcase/03_register.png" alt="Register Screen" style="max-width: 200; height: auto;" />
|
|
</td>
|
|
<td>
|
|
<img src="showcase/04_month_view.png" alt="Month View" style="max-width: 200; height: auto;" />
|
|
</td>
|
|
<td>
|
|
<img src="showcase/05_day_view.png" alt="Day View" style="max-width: 200; height: auto;" />
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>User registration screen.</td>
|
|
<td>Monthly calendar view to browse events, the screen shown immediately after login.</td>
|
|
<td>Daily event view, listing the events for that day.</td>
|
|
</tr>
|
|
|
|
<!-- Add more rows as needed following the same structure -->
|
|
|
|
<!-- Final Row -->
|
|
<tr>
|
|
<th colspan="3">🗑️ Notifications Cleared</th>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="3">
|
|
<img src="showcase/21_notifications_cleared.png" alt="Notifications Cleared" style="max-width: 100%; height: auto;" />
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="3">Screen showing cleared notifications, after the user has swiped all the notifications to the right, deleting them.</td>
|
|
</tr>
|
|
</table>
|