{"id":25492544,"url":"https://github.com/hfxbse/dhbw-web-engineering","last_synced_at":"2026-05-04T07:31:10.123Z","repository":{"id":176713402,"uuid":"652200960","full_name":"hfxbse/dhbw-web-engineering","owner":"hfxbse","description":"Project implementation for the 2023 \"Web-Engineering 1\" lecture held by Spörl","archived":false,"fork":false,"pushed_at":"2024-02-21T09:49:03.000Z","size":9845,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-18T22:47:29.050Z","etag":null,"topics":["dhbw","dhbw-stuttgart","web-components"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hfxbse.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-06-11T12:14:26.000Z","updated_at":"2025-01-09T12:03:57.000Z","dependencies_parsed_at":null,"dependency_job_id":"bf0421c3-8bec-4249-b416-bbbd99d4f508","html_url":"https://github.com/hfxbse/dhbw-web-engineering","commit_stats":null,"previous_names":["hfxbse/web-engineering-2023","hfxbse/dhbw-web-engineering"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hfxbse%2Fdhbw-web-engineering","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hfxbse%2Fdhbw-web-engineering/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hfxbse%2Fdhbw-web-engineering/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hfxbse%2Fdhbw-web-engineering/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hfxbse","download_url":"https://codeload.github.com/hfxbse/dhbw-web-engineering/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239565647,"owners_count":19660154,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dhbw","dhbw-stuttgart","web-components"],"created_at":"2025-02-18T22:47:35.278Z","updated_at":"2025-11-09T00:30:25.111Z","avatar_url":"https://github.com/hfxbse.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Web Engineering Project 2023\n\nProject implementation for the class \"Web Engineering 1\" held by Spörl. Neither the frontend nor the backend, \nespecially, is intended for deployment in a production environment.\n\nAs required, the frontend does not use any framework or library. Instead, it leverages native \n[web components](https://www.webcomponents.org/).\n\n\n\n## Installation\n\nStart the backend service via\n\n```bash\ndocker run -p 8080:8080 ghcr.io/hfxbse/web-engineering-2023/file-service:latest\n```\n\nand the frontend server via\n\n```bash\ndocker run -p \u003cany port you like\u003e:80 ghcr.io/hfxbse/web-engineering-2023/web-app:latest\n```\n\nThe website should now be reachable via\n[http://localhost:\\\u003cyour chosen port\\\u003e](http://localhost:\u003cyour%20chosen%20port\u003e).\n\nAs an alternative, you can build the Docker image for each service locally from the provided Docker \nfiles. If you choose to do so, I assume you know how to do that.\n\n\n\n## Browser compatibility list\n\n| Browser       | Version              |\n|---------------|----------------------| \n| Firefox       | 114.0.2 Linux        | \n| Google Chrome | 114.0.5735.133 Linux |\n\nThe content of the website scales down to about 600 pixels in width without issue.\n\n## Usage\n\nThe website provides a frontend for a file-storage service. The UI resamples elements commonly found on \nwebsites. A blue tone is used as a highlight color and red to indicate errors. Other elements are kept black.\n\n\n### Authentication\n\nTo log in, you first enter your username and then your password. Then you click on the blue\nbutton labeled \"Login\". If your credentials are incorrect, or you could not log in for any other reason, an error \nmessage is shown below the form, as shown in the picture.\n\n![Authentication page](docs/authentication.png)\n\nAfter successfully logging into the website, you will be redirected to the path you tried to visit before\ngetting redirected to the login page.\n\n\n### Control panel\n\nAt the bottom of every page, aside from the authentication page and the \"page not found\"-page, is a control panel.\nIt will show the location  you are currently at, prefixed by the username you logged in as. To go up the location path,\npress the arrow button to the left of it. If you are already at the content root, a home button will be shown instead. \nIn addition, the native browser navigation can be used.\n\n\nThe button on the far right side allows you to log out at any point. To the left of it, additional buttons will be\nshown depending on the content type at your current location. The actions those buttons represent always apply to your\ncurrent location.\n\n![Control panel](docs/controlPanel.png)\n\n#### Control panel buttons\n\n| Button                                         | Action description                                                                           | Display conditions                                      |\n|------------------------------------------------|----------------------------------------------------------------------------------------------|---------------------------------------------------------|\n| ![Logout](docs/control-buttons/logout.png)     | Logs the user you signed in as out.                                                          | A user is logged in.                                    |\n| ![Create](docs/control-buttons/creation.png)   | Opens the entry creation dialog.                                                             | The content is a directory.                             |\n| ![Delete](docs/control-buttons/delete.png)     | Deletes the content at the current path. Only empty directories can be deleted successfully. | The entry exists and is not the content root.           |\n| ![Download](docs/control-buttons/download.png) | Saves the file at the current location to disk.                                              | The entry exists and is not a directory.                |\n| ![Revert](docs/control-buttons/revert.png)     | Reverts the text file to the last saved state.                                               | The content is a text file to which changes were made.  |\n| ![Save](docs/control-buttons/save.png)         | Saves the changes made to the text file on the server.                                       | The content is a text file to which changes were made.  |\n| ![Upload](docs/control-buttons/upload.png)     | Uploads a file you select through your system's native file picker to the server.            | The content is a directory.                             |\n\n\n### Directories\n\nIf the content at your current location represents a directory, its content will be shown in a grid. Each entry\nhas a type represented by an icon. Below the icon, the name of the corresponding entry is shown.\n\n![Directory view](docs/directoryView.png)\n\n#### Entry-type icons\n\n| Icon                                                        | Type      | Navigation target                      |\n|-------------------------------------------------------------|-----------|----------------------------------------|\n| ![Directory icon](docs/mime-type-icons/directory.png)       | Directory | Location represented by the directory. |\n| ![Audio icon](docs/mime-type-icons/audio.png)               | Audio     | Media view for the matching audio.     |\n| ![Image icon](docs/mime-type-icons/image.png)               | Image     | Media view for the matching image.     |\n| ![Text icon](docs/mime-type-icons/text.png)                 | Text      | Text editor for the matching text.     |\n| ![Video icon](docs/mime-type-icons/video.png)               | Video     | Media view for the matching video.     |\n| ![Unknown data type icon](docs/mime-type-icons/unknown.png) | Unknown   | Download page for the matching file.   |\n\n\n### Media view\n\nAllows you to look at images, watch videos, or listen to audio right in the browser. The true size of the media is \nused, but no more than the maximal available height and height, preserving the aspect ratio. It gets centered on a \nblack background, to reduce distraction from it.\n\n![Media view](docs/mediaView.png)\n\n\n### Text editor\n\nDisplays the content of a text file in your browser. To edit it, click on the position in the text you want to modify \nand start typing. After you are done editing, you can either save your changes or revert to the last saved state of \nthe text file.\n\n![Text editor](docs/textEditor.png)\n\n\n### Other file types\n\nFor a file that is not text, audio, video, or image, no preview is displayed, but it can still be downloaded or deleted.\n\n![File without preview](docs/fileView.png)\n\n\n### Accessing a non-existing file\n\nIf no file or directory entry exists for the current location, an error message is displayed in the middle of the page.\nIt differs from trying to access a page of the website that does not exist by still displaying the control panel at the\nbottom of the page.\n\n![File not found page](docs/fileNotFound.png)\n\n\n### Accessing a page that is not part of the website\n\nIn case you try to access a page that is not part of the website, a simple \"404 - Page not found.\"-page is shown.\n\n![Page not found page](docs/pageNotFound.png)\n\n\n### Error dialog\n\nIf an action without a dialog, like the delete action or file upload, fails, an error dialog is displayed for it.\nIt can be closed by either clicking on the button labeled \"Ok\" or by pressing \"Esc\" on your keyboard.\n\n![Error dialog](docs/errorDialog.png)\n\n\n### Creation dialog\n\nTo create a new text file or directory, open the creation dialog. There, you enter the name of the entry you are trying\nto create. After that, you can choose to create a directory or a text file by selecting it. Finally, you click on the \nblue button labeled \"Save\". If you decide not to create a new entry, you can exit the dialog by clicking on the button\nlabeled \"Cancel\" or by pressing \"Esc\" on your keyboard.\n\nIf an error occurs, you will be informed below the dialog. An entry name cannot be  a singular dot (\".\"), two dots \n(\"..\") or contain slashes (\"/\").\n\n![Creation dialog](docs/creationDialog.png)\n\n\n\n## License\n\nThe license stated in the `LICENSE.md` applies to all files but those under `./file-service`, excluding \n`./file-service/Dockerfile`, to which it applies too.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhfxbse%2Fdhbw-web-engineering","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhfxbse%2Fdhbw-web-engineering","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhfxbse%2Fdhbw-web-engineering/lists"}