diff --git a/README.md b/README.md index 2a2579765e9f3dfc9967d65ccd6dfbcd540014c5..e872253d0140ff9c1e9ff9c9721f9b889b258ffe 100644 --- a/README.md +++ b/README.md @@ -1 +1,39 @@ -# Self Service Frontend +# Self-Service Frontend + +The frontend of the new faculty-wide User Self-Service, FSI Self-Service (FSI = Fachschaften der Fakultät für Informatik)! + +The FSI Self-Service allows you to view and, partially, change some basic information about your FSI account, such as your name, major, and assigned groups. +Notably, it also allows you to link your [Discord](https://fsi.rub.de/links/)-Account to your FSI account, granting you extended access to our Discord servers. + +It is planned to be available at [account.fsi.rub.de](https://account.fsi.rub.de/), but due to internal scheduling reasons, it unfortunately isn't live yet. +The backend is available [here](https://gitlab.ruhr-uni-bochum.de/fsi/idm/self-service-backend) (you may need to be logged in to view this link). + +## How it works + +- Single-page application powered by [React](https://react.dev/) and [TypeScript](https://www.typescriptlang.org/) +- Styling using [Tailwind CSS](https://tailwindcss.com/) +- [React Hook Form](https://react-hook-form.com/) for interative forms and input validation +- Keeping track of state using [zustand](https://github.com/pmndrs/zustand) +- Translation support using [FormatJS](https://formatjs.io/) +- API Response validation using the slim [Valibot](https://valibot.dev/) library +- [Vite](https://vitejs.dev/) as the build system, bundler, and tree-shaker 🌴 +- Code formatting and linting using [Prettier](https://prettier.io/) and [ESLint](https://eslint.org/) +- Native [View Transitions](https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API) thanks to [React Router](https://reactrouter.com/) + +## Showcase + +### Dark Mode Toggle + + + +### Language Toggle + + + +### View Transitions + + + +### Mobile Navigation + + diff --git a/readme_files/dark_mode.mp4 b/readme_files/dark_mode.mp4 new file mode 100644 index 0000000000000000000000000000000000000000..437d5f1b17c72a43c3e64d5f759bc816dde29a30 Binary files /dev/null and b/readme_files/dark_mode.mp4 differ diff --git a/readme_files/language_toggle.mp4 b/readme_files/language_toggle.mp4 new file mode 100644 index 0000000000000000000000000000000000000000..dba3ed5d9152ede05cbd01d1f8e83e55f17909b2 Binary files /dev/null and b/readme_files/language_toggle.mp4 differ diff --git a/readme_files/mobile_navigation.mp4 b/readme_files/mobile_navigation.mp4 new file mode 100644 index 0000000000000000000000000000000000000000..31924f9c71f9671decc1f78e3e62e46229309ff2 Binary files /dev/null and b/readme_files/mobile_navigation.mp4 differ diff --git a/readme_files/view_transitions.mp4 b/readme_files/view_transitions.mp4 new file mode 100644 index 0000000000000000000000000000000000000000..2ba419dd8877718ce8eddbd8cf4ca7712904608f Binary files /dev/null and b/readme_files/view_transitions.mp4 differ