chore: Improve readme UI, use raw HTML for the table

This commit is contained in:
Peter Vacho 2025-01-05 17:21:30 +01:00
parent 2a1d1f9ef6
commit 5e23afde30
Signed by: school
GPG key ID: 8CFC3837052871B4

View file

@ -40,34 +40,37 @@ Repository](https://git.itsdrike.com/ap7pd/event-management-backend).
Below is a showcase of key features and screens in the application: 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) | | 📶 API Unreachable | 🔒 Login Screen | 🔧 Base URL Change |
| --------------------------------------------------------- | -------------------------------------- | ---------------------------------------------------------------------------------------------- | | --------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
| Error screen, shown 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. | | ![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, shown whenever the API becomes unreachable. | Login screen for user authentication, first screen you will face when you start the app for the first time. | Screen to change the API base URL, available from login, register & API unreachable pages (doesn't require being signed in). |
| ![Register Screen](showcase/03_register.png) | ![Month View](showcase/04_month_view.png) | ![Day View](showcase/05_day_view.png) | | 📝 Register Screen | 📆 Month View | 📅 Day View |
| -------------------------------------------- | ----------------------------------------- | ------------------------------------------------- | | -------------------------------------------- | --------------------------------------------------------------------------------- | -------------------------------------------------- |
| User registration screen. | Monthly calendar view to browse events. | Daily event view with event details for that day. | | ![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, the screen shown immediately after login. | Daily event view, listing the events 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 Duration Event | ⚡ Edit Instant Event | 📨 Invite User to Event |
| ----------------------------------------------------------- | --------------------------------------------------------- | ------------------------------------------------------------- | | ----------------------------------------------------------- | --------------------------------------------------------- | ------------------------------------------------------------- |
| ![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. | | 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) | | ⏱️ Duration Event Details | 🔍 Instant Event Details | 📂 Categories Overview |
| ----------------------------------------------------------------- | --------------------------------------------------------------- | -------------------------------------------------- | | ----------------------------------------------------------------- | --------------------------------------------------------------- | -------------------------------------------------- |
| ![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. | | 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) | | Create New Category | 🆕 Updated Categories Overview | ⚙️ Settings Screen |
| ---------------------------------------------------- | ---------------------------------------------------------- | ------------------------------------------------------------------- | | ------------------------------------------------------ | ---------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ |
| Form to create a new category. | Updated list with a newly added category. | Settings menu for app configuration. Only available when logged in. | | ![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 or edit an existing one. | Updated list with a newly added category. | Settings menu for configuring user details & the base URL. This screen is only available to logged in users. |
| ![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: Invite | 👀 Invite Preview | ✅ Notification: Accepted |
| ---------------------------------------------------------------- | --------------------------------------------------------------- | ---------------------------------------------------------------------------------- | | ---------------------------------------------------------------- | --------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
| Notification about an (incomming) event invite. | Preview of the event from the invite. | Notification for the (incomming) invite after accepting (already marked read). | | ![Notification: Invite](showcase/15_notification_invite_bob.png) | ![Invite Preview](showcase/16_invite_event_details_preview.png) | ![Notification: Accepted](showcase/17_notification_invite_accepted_bob.png) |
| Notification about an incoming event invite. | Preview of the event from the invite (after clicking the eye button). | 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. |
| ![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) | | 🗑️ Notifications Cleared | | |
| ------------------------------------------------------------------- | ------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- | | ------------------------------------------------------------------------------------------------------------------ | --- | --- |
| 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, after the user has swiped all the notifications to the right, deleting them. | | |
| ![Notifications Cleared](showcase/21_notifications_cleared.png) |
| --------------------------------------------------------------- |
| Screen showing cleared notifications. |