jgkilian777.github.io

Project maintained by jgkilian777 Hosted on GitHub Pages — Theme by mattgraham

This is my first time using java, spring boot or angular. It was a personal project to learn some of the basics, as made clear by the very bland styles/UI components.
The idea behind this web app was to create a platform for groups of friends to store their memories in a central location rather than being lost on old phones or group chats across different platforms. Technologies:

Java
Spring Boot
MySQL
Angular
Typescript/Javascript
RxJS
Hibernate

Features:

Authentication/Authorisation with JWT tokens (had to follow a tutorial for this as I had no idea how to do it from scratch)
Fully functional drag and drop to move files/folders, with directory hierarchy tree stored as JSON
Users can create groups
Group owners have special permissions within their group (remove users, delete group, rename group, alter directory structure)
Users may invite other users to their group
Users can only view memories that are in a group that they are part of (unless it's their own memory which they can see at any time), this is enforced on both the front-end and back-end for security
Users can rename their memories, remove them from specific groups, or delete them altogether

Before I show the app in action, here are some of the design details:

Drag and drop JSON Directory tree

Although this seems like a small feature, it actually took quite a bit of time to create a working solution.
I ended up using 2 overlapping css grids with different z-indices. The front grid cells each contain a memory/file item and the back grid contains twice as many cells, one for each left/right side of the memory item. The back grid cells each have a unique id to identify which memory item it should be behind and which side of the memory item it represents. When a memory item is dragged, the z-index of the back grid is increased so that it moves in front, allowing the dragged item to be dropped on one of its cells. Once dropped, the JSON hierarchy is re-ordered to represent a memory item being moved and the front and back grid ids are updated as well. The JSON stored in the database is validated each time to ensure nothing malicious is being attempted or to verify nothing has gone wrong causing an invalid directory structure representation.

Database structure

Below is a visualisation generated by intellij IDEA showing the entities stored in the database and their relationships. The 3 tables at the bottom facilitate many-to-many relationships between users and usergroups, pendingusers and usergroups and lastly between memories and usergroups. There are many-to-one relationships from memories to users, and from usergroups to users (as admin/owner).
diagram visualisation of the database

Demonstrations

The left window is a user named John. The right window is a different user named Mark.

John creates a user group:

John invites Mark to the group, mark accepts the invite and is now part of the group:

John creates a new private memory on his memories page, then adds it to his and Mark's group, Mark can then view it:

Mark creates and adds a picture memory straight into the group from the group interface so that he and John can view it:

Mark renames his memory that he added to the group:

John (the group admin) moves files around, creates a new folder and moves a file into the folder then saves this new layout:

Mark views the video memory, then John removes him from the group. Mark can no longer view John's memory even if his page hasn't been refreshed yet to remove the group from his view: