This is a website that allows users to keep track of a collection of theirs. This collection can consist of anything; for example, the user could be into coin collecting. They could use this website to keep track of what coins they already have, and which ones they still need to complete the collection. The website has two main themes along with six separate accent colors, four of which are shown below. Because the entire site uses CSS variables as its colors, it's incredibly easy for new colors to be added.
The image above shows four accent colors, two of them being used with the dark theme. The website's UI and UX will be described below later on.
The login screen consists of a welcome message, along with two input fields for the user's username and password. It also features a "remember me" feature that will keep the user logged in using a cookie. This cookie consists of a unique token that is generated upon a successful login with the "remember me" feature activated. The token changes every 2 weeks for security, so the user will have to login at least once every 2 weeks. Logging out also changes the token, so if the user is worried about someone having hijacked the token, they can simply logout and log back in to prevent an unauthorized user from accessing their account. They can then change their password in the settings section.
The image above shows the main screen of the website. It has a navigation bar at the top with a menu button on the top left. It also features a search bar that allows users to search through their collection to find items faster. There is an add button that lets users add items to their collection. Next to it is an example of an item that has been added to the collection, but it doesn't have an image, so a placeholder icon is used. The user can click on this item to modify it and add an image, rename it, or delete it. Items are saved in JSON format in a configuration file. Clicking the add button opens up a pane that is shown below.
This pane allows the user to add an item to their collection. They can choose a square image, this image is then shown as a preview, and the user can enter a name for the item. If a name isn't entered, then the item will just have an undefined title. Clicking "Confirm" adds the item to their collection.
The settings pane lets the user change the website's theme and accent color through the "Appearance" tab. The "Options" tab lets the user make their collection private, which means only they can view it. By default, anyone can access their collection and view it (without being able to modify it of course). This is useful in case the user wants to share their collection with their friends and such by just sending a link to it. The "Account" tab lets the user change their username and password or logout. The password is stored in a configuration file and is hashed using BCrypt. The "Backup" tab takes the user to a page where their entire collection is loaded and the user can save the page to have an offline copy of their collection.
The image above shows how the purple accent color looks.
The accent color affects all parts of the website, including the settings page, login page etc.
The dark theme with a blue accent color.
The dark theme with a pink accent color.
Login details for the demo: