https://github.com/nzhussup-studio/web-admin-panel
Frontend of admin panel
https://github.com/nzhussup-studio/web-admin-panel
bootstrap frontend react typescript
Last synced: 3 months ago
JSON representation
Frontend of admin panel
- Host: GitHub
- URL: https://github.com/nzhussup-studio/web-admin-panel
- Owner: nzhussup-studio
- Created: 2024-12-30T00:31:06.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2026-04-02T21:00:56.000Z (3 months ago)
- Last Synced: 2026-04-03T02:36:56.196Z (3 months ago)
- Topics: bootstrap, frontend, react, typescript
- Language: TypeScript
- Homepage: https://admin.nzhussup.dev
- Size: 77.6 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# Web Admin Panel
[](https://react.dev/)
[](https://www.typescriptlang.org/)
[](https://vite.dev/)
[](https://jestjs.io/)
[](https://getbootstrap.com/)
[](https://www.docker.com/)
[](https://github.com/features/actions)
[](https://www.openapis.org/)
Admin Panel Screenshots
This link opens a public album with screenshots of the admin panel so you can quickly review the interface and overall flow.
Open the public screenshot album
Want to see how it is implemented? Browse the screenshots first, then use this README to understand the project structure, runtime setup, and local development commands.
## Overview
This repository contains the web-based administration interface for managing the content behind `nzhussup.dev`. It is intended for authenticated internal use and provides a single place to create, update, organize, and remove structured data that is later consumed by the public-facing website and related services.
The project focuses on operational content management rather than public presentation. Its purpose is to reduce manual data maintenance, standardize editing workflows, and provide a stable UI for administrative tasks across multiple content domains.
## Scope
The admin panel currently covers these areas:
- Keycloak-based authentication and protected access for administrative users
- project management
- CV data management, including work experience, education, skills, and certifications
- album and image management
- navigation into Keycloak for user and realm-level account administration
- CV generation workflows based on maintained data
## Technology Stack
The application is built as a frontend SPA with the following main technologies:
- React 18 for the UI layer
- TypeScript for application code and typing
- Vite for local development and production builds
- React Router for navigation
- Bootstrap and React Bootstrap for layout and components
- Axios-based API clients generated from OpenAPI definitions
- Jest and Testing Library for automated tests
## Repository Structure
```text
.
├── admin-panel/ # Frontend application source code
├── .github/workflows/ # CI/CD and release workflows
├── CHANGELOG.md # Release history
└── RELEASE_GUIDE.md # Release process and versioning notes
```
Within `admin-panel/`, the codebase is organized into pages, reusable components, hooks, providers, generated API clients, and test suites.
## Purpose in the Overall System
This repository contains only the web admin client. It is one part of a larger system and communicates with backend APIs that are maintained separately. The panel itself is responsible for:
- presenting administrative workflows in the browser
- validating and submitting user input
- calling backend endpoints for CRUD operations
- enforcing authenticated access on the client side with Keycloak redirects
- supporting deployment through container-based CI/CD workflows
## Local Development
```bash
cd admin-panel
npm ci
npm run dev
```
The app expects these runtime values in development or CI builds:
```bash
VITE_API_BASE=http://localhost:8082
VITE_KEYCLOAK_URL=http://localhost:8081
VITE_KEYCLOAK_REALM=backend-auth-dev
VITE_KEYCLOAK_CLIENT_ID=frontend-admin-auth-client
```
Useful commands:
```bash
npm test
npm run build
npm run typecheck
npm run lint
```
## CI/CD
GitHub Actions workflows in `.github/workflows/` are used for:
- running automated tests
- building the production image
- publishing tagged releases
- deploying the application
## Related Documentation
- [Release Guide](./RELEASE_GUIDE.md)
- [Changelog](./CHANGELOG.md)