Trigger

Forward

This project began a fork of sui, an open source home page designed as a simple landing page with applications and bookmarks. As I started using it, it became clear that longer use would be made tedious by having to manually update JSON files every time I wanted to add something. An updated project, flame, exists; however, flame is intended to run on docker, which I am not a fan of in my environment. I also had a need to learn React, and so I started on my own version. I began then rewriting sui in React with TypeScript instead of it's native JavaScript, and added a MariaDB component for storage. The result was a highly customizable home page for any browser or device.

Technologies Used

-React/TS with various packages
-Vite
-Nodejs + NPM
-Mantine Component Library
-MariaDB server
-pm2
-VSCode
-NGINX
-Git/Gitea

Features

Responsive search bar with history and items from Applications and Bookmarks
Different providers can be configured to use in the search bar with a prefix
Search history management built on TanStack Table and Query
Welcome messages greet the user based on time of day, and custom messages can be added which are displayed at random. Weather information comes from the weather.gov API, and requires no key or additional setup other than the user's preferred address.
Clicking on the temperature in the header or typing !weather into the search bar will present the user with more detailed weather information

Applications

The application section is configured from the settings page, which shares this AppItem component. The density and size of the component can be changed for user customization, as well as reuse in code.
These are the same component as the image above

Bookmarks

The bookmark section is configured from the settings page as well, but Bookmarks are further categorized into Groups. This allows for granular filtering and sorting for user customization.
Users are able to add bookmarks and rearrange items in the groups, and the groups themselves

Settings Button

The user can save themes to the database in playlists for convenient use later. The component on the right side controls the layout of the application and bookmark sections of the main home page. Changes to preferences here are stored in local storage to persist between sessions.

Theming

One of the biggest challenges with sui and flame was customization and theming. I wanted to solve both of those issues going in, which resulted in a fully fledged theme builder and playlist management. While somewhat basic, it allows for fairly great expression of creativity.

Themes are shown as in the "background" when they are not part of the current playlist - themes are grayscale if they have been removed from the shuffle of the All Themes playlist
The theme builder modal
Backgrounds can be uploaded and managed, and are stored on the disk through the Node back end
Playlists define which themes are displayed at random when the home page loads

Technical

The page is being served through an NGINX reverse proxy, and the back end API server has been separated into it's own package so that it can be located on a different server if necessary. Relevant connection details are in .env files for the user to configure.

The user has the option to change the base url of the server so that they may choose to either serve it at the root of the domain, a subdomain, or a URI slug.

The page does not handle authentication directly, and relies on NGINX to handle an auth-request to allow a user to reach the page. If they do not have authorization, they are redirected to a 401.

The back end Node.js server and front end Vite project have both been setup to run using pm2 as services.

When used together you can make a very useful and easy to change home page.

Screenshots