2024-12-30 14:14:43 +00:00
# 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
2025-01-03 16:46:36 +00:00
> 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.
2025-01-05 16:09:28 +00:00
## Showcase
Below is a showcase of key features and screens in the application:
2025-01-05 16:21:30 +00:00
< table style = "width: 100%; border-collapse: collapse; text-align: center; margin: auto;" >
<!-- 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 = "width: 200px; height: 450px;" / >
< / td >
< td >
< img src = "showcase/02_login.png" alt = "Login Screen" style = "width: 200px; height: 450px;" / >
< / td >
< td >
< img src = "showcase/02_login_base_url_change.png" alt = "Base URL Change" style = "width: 200px; height: 450px;" / >
< / 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 = "width: 200px; height: 450px;" / >
< / td >
< td >
< img src = "showcase/04_month_view.png" alt = "Month View" style = "width: 200px; height: 450px;" / >
< / td >
< td >
< img src = "showcase/05_day_view.png" alt = "Day View" style = "width: 200px; height: 450px;" / >
< / 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 >
<!-- Third Image Row -->
< tr >
< th > ⏳ Edit Duration Event< / th >
< th > ⚡ Edit Instant Event< / th >
< th > 📨 Invite User to Event< / th >
< / tr >
< tr >
< td >
< img src = "showcase/06_duration_event_edit.png" alt = "Edit Duration Event" style = "width: 200px; height: 450px;" / >
< / td >
< td >
< img src = "showcase/07_instant_event_edit.png" alt = "Edit Instant Event" style = "width: 200px; height: 450px;" / >
< / td >
< td >
< img src = "showcase/08_invite_user_to_event.png" alt = "Invite User to Event" style = "width: 200px; height: 450px;" / >
< / td >
< / tr >
< tr >
< td > Edit screen for duration-based events.< / td >
< td > Edit screen for instant events.< / td >
< td > Interface for inviting users to an event.< / td >
< / tr >
<!-- Fourth Image Row -->
< tr >
< th > ⏱️ Duration Event Details< / th >
< th > 🔍 Instant Event Details< / th >
< th > 📂 Categories Overview< / th >
< / tr >
< tr >
< td >
< img src = "showcase/09_duration_event_details.png" alt = "Duration Event Details" style = "width: 200px; height: 450px;" / >
< / td >
< td >
< img src = "showcase/10_instant_event_details.png" alt = "Instant Event Details" style = "width: 200px; height: 450px;" / >
< / td >
< td >
< img src = "showcase/11_categories.png" alt = "Categories Overview" style = "width: 200px; height: 450px;" / >
< / td >
< / tr >
< tr >
< td > Detailed view of a duration-based event.< / td >
< td > Detailed view of an instant event.< / td >
< td > List of event categories of the user.< / td >
< / tr >
<!-- Fifth Image Row -->
< tr >
< th > ➕ < / th >
< th > 🆕 Updated Categories Overview< / th >
< th > ⚙️ Settings Screen< / th >
< / tr >
< tr >
< td >
< img src = "showcase/12_new_category.png" alt = "Create New Category" style = "width: 200px; height: 450px;" / >
< / td >
< td >
< img src = "showcase/13_categories_with_new.png" alt = "Updated Categories" style = "width: 200px; height: 450px;" / >
< / td >
< td >
< img src = "showcase/14_settings.png" alt = "Settings Screen" style = "width: 200px; height: 450px;" / >
< / td >
< / tr >
< tr >
< td > Form to create a new category or edit an existing one.< / td >
< td > Updated list with a newly added category.< / td >
< td > Settings menu for configuring user details & the base url. This screen is only available to logged in users.< / td >
< / tr >
<!-- Sixth Image Row -->
< tr >
< th > 🔔 Notification: Invite< / th >
< th > 👀 Invite Preview< / th >
< th > ✅ Notification: Accepted< / th >
< / tr >
< tr >
< td >
< img src = "showcase/15_notification_invite_bob.png" alt = "Notification: Invite" style = "width: 200px; height: 450px;" / >
< / td >
< td >
< img src = "showcase/16_invite_event_details_preview.png" alt = "Invite Preview" style = "width: 200px; height: 450px;" / >
< / td >
< td >
< img src = "showcase/17_notification_invite_accepted_bob.png" alt = "Notification: Accepted" style = "width: 200px; height: 450px;" / >
< / td >
< / tr >
< tr >
< td > Notification about an incoming event invite.< / td >
< td > Preview of the event from the invite (after clicking the eye button).< / td >
< td > 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.< / td >
< / tr >
<!-- 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 = "width: 200px; height: 450px;" / >
< / 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 >
