ap7pd/event-management-frontend
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: ap7pd:a526bf427341d82daa1228886fdce9cca6a28c48
Branches Tags
ap7pd:main
ap7pd:ap7mt
ap7pd:ap7pd
..
compare: ap7pd:57d4573b9dcfd0bbd7bd32f462d1d166116d0eda
Branches Tags
ap7pd:main
ap7pd:ap7mt
ap7pd:ap7pd

2 commits
a526bf4273 ... 57d4573b9d

Author SHA1 Message Date
Peter Vacho 57d4573b9d
chore: Improve readme UI, use raw HTML for the table 2025-01-05 17:21:30 +01:00
Peter Vacho 2a1d1f9ef6
feat: Add showcase images to readme 2025-01-05 17:21:11 +01:00
1 changed files with 96 additions and 30 deletions
Show stats Expand all files Collapse all files

126
README.md
View file

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