HPL Portal
| Year | 2023 |
|---|---|
| Client | HPL |
| Made at | iO |
| Technologies | |
| TypeScriptNext.jsStorybookReactHTML & CSS | |
During my time working at iO I spent a lot of time working for a client named High Profile Locaties (HPL). Who wanted to create a platform where users can find venues for all sort of occasions, somewhat similar to Airbnb.
Mostly worked on the venueholder portal, the place where the venueholders can create and manage their venues. So as you can imagine, this was all about data; making sure the venueholders whould fill in all the necessary data, helping the user to display his venue as complete and professional as possible.
I've worked on a lot of different features, that sadly at the moment I did not document well enough to showcase all in screenshots. Features such as: overview pages for rooms and spaces, a lot of different forms, different dialogs (tutorial dialog, progress dialog, create/edit dialog), in page anchor menu, mobile navigation, rich text editor from tinymce, live chat integration and to top it all of an confetti animation using GSAP. Apart from these awesome features I helped out with a lot of bug fixing and quality assurance (QA). Unfortunately I have no longer access to the portal so I was only permitted to showcase the following screenshots bellow. They will hopefully give a glimpse of all the work I did for HPL.
Screenshots
Venue manage page
This screenshot displays the venue manage page, where the most important information is manageable. You can see the anchor menu (below the title) which I've made and the little information button next to the title. Also clearly visible is the chat service in the right corner which I've implemented. And then the overal display of the data inside the card with the collapsible description which I've worked on.
Indoor spaces overview page
This is the indoor spaces overview page where the venueholder can create new spaces for it's venue. I've created this list display of spaces, with the create/edit dialog.
Facilities page with anchor menu
With this screenshot you can now see the anchor menu in action; it stays sticky under the black main navigation. Apart from that I created this page of facilities; all the messages, dialogs, forms, buttons and styling.
Tutorial dialog step 1
This tutorial dialog is the one created for venues, so it will only show when it's the first time a user creates a venue or when the users hits the help button. To know it's the first time opening the venue a variable is stored in the local storage of the users browser.
Tutorial dialog step 2
This is the next step within the venue tutorial, with an interactive image that changes automatically.
Tutotrial dialog step 3
For the last step, publishing is important so I added the sticky progress block (which is normally seen in the left corner) inside the dialog and made this interactive (not just a static image).
Progression dialog
This shows the progression dialog that indicates how far the user is to publishing it's venue. If there is information missing it will show the percentage it needs to complete it. The edit buttons will then open the relavant edit dialog, which I remember was a pain because not all the data was always available on every page and the progress block was is visible on every page, so it needed the data from all the other forms.
Category Page
Sometimes I would be asked to help the frontend (locaties.nl, so not the portal). For example I was asked to create the category page, so I worked on the layout of the venue cards and also the buttons for pagination, filtering and showing the map.