Hermes

Shopping list and expenses tracker*

^{*Expenses tracker not included (coming soon™️)}

Table of Contents

1. Features
2. Technologies
   • Language
   • Framework
   • Styling & Components
   • Secured by
   • Database
   • Hosted on
3. Screenshots
   • Workspaces
   • Workspace overview
   • Lists
   • Invites
   • Profile
   • View transitions

About the project

Hermes is a shopping list app that allows you to create different workspaces for different households. You can then create multiple lists inside these workspaces. This allows you to have a list for your weekly groceries, and a list for your monthly groceries, for example.

It was created as a successor to my other shopping list app, which in turn is a successor for the first ever real project I did together with my brother.

My goal for the project is to create a fully functional, production-ready app that I can use in my daily life. I also wanted to focus on the UX of the app, which is why I spent a lot of time on user flows and little niceties within the app.

Features

• Different workspaces for different households
• Multiple lists per workspace
• Join workspaces with an invite code
• Loyalty cards
• Dark mode
• Swipe to check and delete items
• Cutting edge new features (View transitions)
• Expenses tracker
• Bugs (hopefully)

Technologies

Created using the

The project uses the following technologies:

Language:

Framework:

Styling & Components:

Secured by:

Currently:

Previously:

Database:

Hosted On:

Screenshots

Workspaces

You can have different workspaces for different households. There is a clear distinction between workspaces you own and workspaces you are a member of.

Workspace overview

Inside your workspace you can see all of your lists. You can also see your loyalty cards and the members of the workspace.

Clicking on the gear icon in the top right opens the workspace settings modal. This is one I'm particularly proud of. It allows you to change the workspace name, delete it, set a default list, kick collaborators, and copy, delete, and refresh the invite code.

Lists

On the list page you can make your shopping list. Items can be added through the FAB (floating action button). This opens a modal where you can enter the name, price, amount, and URL of the item. URL's can be used to clarify which type of cookies you mean specifically.

Items can be checked off by swiping. The same thing goes for unchecking and deleting items.

Featuring mobile-like animations!

The loyalty card button is used to show your default loyalty card for this list. This is useful when you're in the store, since you don't have to switch to a different app to scan your loyalty card. The modal can be closed using the browser's (or your phone's) back button (Which took me a whole night to get working properly).

The list menu can be opened by clicking the three dots in the top right. This menu allows you to access the list settings, delete checked items, and delete all items.

It also allows you to turn on Reordering mode.

Invites

Invites allow other users to join your workspace. The code / link can be found in the workspace settings modal. Users that click your link are treated with the above screen. Clicking Accept invite adds them to the workspace, and redirects them to the workspace overview.

Profile

Finally, we have the profile page. This page shows your name, email, and profile picture. It allows you to change your username (if you've logged in with Discord), and your email (if you signed up with email/password). Updating your profile here will also update it in Auth0.

View transitions

Hermes uses a brand-new API called view transitions to make page transitions look better. It animates a fade from the previous page to the next page, and animates the movement of certain elements like the workspace title.

Note

This currently only works in Google Chrome (and Chromium based browsers like Edge), and not in Firefox.