Victory Center

This repo contains the front-end part of the Victory Center project.

Main structure of this project:


victory-center-client
├───.github
│   ├───ISSUE_TEMPLATE
│   ├───PULL_REQUEST_TEMPLATE
│   ├───workflows
│   └───CODEOWNERS
├───nginx
├───public
├───scripts
├───src
│   ├───__mocks__
│   ├───assets
│   │   ├───fonts
│   │   ├───icons
│   │   ├───images
│   │   │   ├───admin
│   │   │   │   └───home
│   │   │   ├───common
│   │   │   └───public
│   │   │       ├───about-us-page
│   │   │       ├───partners-page
│   │   │       ├───programs-page
│   │   │       └───team-page
│   │   ├───sass
│   │   │   ├───mixins
│   │   │   └───variables
│   │   └───videos
│   │       ├───admin
│   │       ├───common
│   │       └───public
│   │           ├───partners-page
│   │           ├───programs-page
│   │           └───team-page
│   ├───components
│   │   ├───admin
│   │   │   ├───admin-context-wrapper
│   │   │   ├───admin-navigation
│   │   │   ├───admin-panel-toolbar
│   │   │   ├───button
│   │   │   ├───button-tooltip
│   │   │   ├───category-bar
│   │   │   ├───confirmation-modal
│   │   │   ├───context-menu-button
│   │   │   ├───draggable-list-item
│   │   │   ├───drag-preview
│   │   │   ├───generic-modal-wrapper
│   │   │   ├───hint-box
│   │   │   ├───image-input
│   │   │   ├───infinite-scroll-list
│   │   │   ├───input-error
│   │   │   ├───input-groups
│   │   │   │   ├───input-with-character-limit-group
│   │   │   │   ├───multi-select-input-group
│   │   │   │   ├───photo-input-group
│   │   │   │   ├───single-select-input-group
│   │   │   │   └───text-area-with-character-limit-group
│   │   │   ├───input-label
│   │   │   ├───input-with-character-limit
│   │   │   ├───multi-select-input
│   │   │   ├───private-route
│   │   │   ├───public-route
│   │   │   ├───search-bar
│   │   │   │   ├───search-item-wrapper
│   │   │   │   └───text-search-item
│   │   │   ├───status-filter-dropdown
│   │   │   ├───textarea-with-character-limit
│   │   │   ├───toast
│   │   │   │   ├───toast-container
│   │   │   │   └───toast-item
│   │   │   ├───tooltip
│   │   │   └───visibility-status-label
│   │   ├───common
│   │   │   ├───inline-loader
│   │   │   ├───modal
│   │   │   ├───page-loader
│   │   │   ├───partners
│   │   │   ├───select
│   │   │   ├───single-select-input
│   │   │   └───tabs
│   │   └───public
│   │       ├───dropdown-menu
│   │       ├───faq-section
│   │       │   └───faq-card
│   │       ├───footer
│   │       ├───header
│   │       └───language-switcher
│   ├───const
│   │   ├───admin
│   │   ├───common
│   │   │   └───api-routes
│   │   ├───public
│   │   └───routers
│   ├───contexts
│   │   ├───admin
│   │   │   ├───admin-context-provider
│   │   │   ├───toast-context-provider
│   │   │   └───visitor-pages-provider
│   │   └───public
│   ├───hooks
│   │   ├───admin
│   │   │   ├───fetch
│   │   │   │   └───use-data-pagination-fetch
│   │   │   ├───use-admin-client
│   │   │   ├───use-categories-counter
│   │   │   ├───use-form-manager
│   │   │   ├───use-generic-modal
│   │   │   └───use-modals-state
│   │   └───common
│   │       ├───use-container-size-from-children
│   │       ├───use-data-fetch
│   │       ├───use-debounced-value-callback
│   │       ├───use-observe-element-size
│   │       ├───use-on-click-outside
│   │       ├───use-on-mount-unsafe
│   │       └───use-scroll-handler
│   ├───jest
│   ├───layouts
│   │   ├───admin-layout
│   │   └───public-layout
│   ├───locales
│   │   ├───en
│   │   └───uk
│   ├───pages
│   │   ├───admin
│   │   │   ├───faq
│   │   │   │   └───components
│   │   │   │       ├───faq-component
│   │   │   │       ├───faq-form
│   │   │   │       ├───faq-modals
│   │   │   │       │   ├───delete-faq-modal
│   │   │   │       │   └───faq-modal
│   │   │   │       ├───faq-panel-content
│   │   │   │       └───faq-search-item
│   │   │   ├───home
│   │   │   ├───login
│   │   │   │   └───login-form
│   │   │   ├───programs
│   │   │   │   └───components
│   │   │   │       ├───program-category-modals
│   │   │   │       ├───program-form
│   │   │   │       ├───program-list-item
│   │   │   │       ├───program-search-item
│   │   │   │       ├───programs-page-content
│   │   │   │       ├───programs-page-modals
│   │   │   │       │   ├───delete-program-modal
│   │   │   │       │   └───program-modal
│   │   │   │       └───programs-page-toolbar
│   │   │   └───team
│   │   │       └───components
│   │   │           ├───delete-team-category-modal
│   │   │           ├───delete-team-member-modal
│   │   │           ├───member-component
│   │   │           ├───member-form
│   │   │           ├───team-category-modal
│   │   │           ├───team-member-modal
│   │   │           ├───team-page-content
│   │   │           ├───team-page-modals
│   │   │           └───team-page-toolbar
│   │   └───public
│   │       ├───about-us-page
│   │       │   ├───company-values
│   │       │   ├───donate-section
│   │       │   ├───intro-section
│   │       │   ├───main-value
│   │       │   ├───our-mission
│   │       │   │   └───scrollable-frame
│   │       │   ├───our-team-section
│   │       │   └───support-section
│   │       ├───donate-page
│   │       │   ├───copy-text-button
│   │       │   ├───donate-page-intro
│   │       │   ├───donate-section
│   │       │   └───right-section
│   │       │       ├───abroad-payment-details
│   │       │       ├───alternative-support-ways
│   │       │       └───ukraine-payment-details
│   │       ├───not-found-page
│   │       │   ├───not-found-intro
│   │       │   └───not-found-message
│   │       ├───partners-page
│   │       │   └───partners-sections
│   │       │       ├───intro-section
│   │       │       └───outro-section
│   │       ├───programs-page
│   │       │   ├───contact-section
│   │       │   ├───intro-section
│   │       │   └───programs-section
│   │       │       └───program-card
│   │       └───team-page
│   │           └───team-member-card
│   ├───routes
│   │   └───app-router
│   ├───services
│   │   ├───api
│   │   │   ├───admin
│   │   │   │   ├───faq
│   │   │   │   ├───image
│   │   │   │   ├───login
│   │   │   │   ├───programs
│   │   │   │   └───team
│   │   │   │       ├───team-categories
│   │   │   │       └───team-members
│   │   │   └───public
│   │   │       ├───faq
│   │   │       ├───programs
│   │   │       └───team
│   │   └───auth
│   │       ├───auth-service
│   │       ├───create-admin-client
│   │       └───resolve-with-new-token
│   ├───types
│   │   ├───admin
│   │   ├───common
│   │   └───public
│   ├───utils
│   │   ├───functions
│   │   │   ├───get-env-variable
│   │   │   ├───mappers
│   │   │   │   ├───admin
│   │   │   │   ├───common
│   │   │   │   └───public
│   │   │   └───test-helpers
│   │   └───mock-data
│   │       ├───admin
│   │       └───public
│   ├───validation
│   │   ├───admin
│   │   │   ├───faq-schema
│   │   │   ├───program-category-schema
│   │   │   ├───program-schema
│   │   │   ├───team-category-schema
│   │   │   └───team-member-schema
│   │   └───public
│   ├───index.tsx                           # Entry point (ReactDOM.createRoot)
│   ├───index.css                           # Global styles (normalizer)
│   ├───react-app-env.d.ts
│   ├───reportWebVitals.ts
│   ├───setupProxy.ts
│   └───setupTests.ts
├───.coderabbit.yaml
├───.dockerignore
├───.env.development
├───.gitignore
├───Dockerfile
├───LICENSE
├───package-lock.json
├───package.json
├───README.md
└───tsconfig.json

For more on these wonderful badges, refer to shields.io.

Available Scripts

`npm start`

Runs the app in the development mode.
Open https://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

`npm run start-with-cert`

Runs the app in development mode over HTTPS, generating and trusting a local SSL certificate.
Open https://localhost:3000 to view it in the browser without certificate warnings.
The page will reload if you make edits.
You will also see any lint errors in the console.

`npm test`

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

`npm run test:cover`

Launches the test runnner that will collect coverage info
and present it in a form of a table in terminal.

`npm run lint`

Launches the lint check that will allow to debug lint errors locally.

`npm run format`

Lunches code formating process

`npm run build`

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

`npm run eject`

Note: this is a one-way operation. Once you eject, you can’t go back!

Installation

Ensure you have installed the back-end project and the following prerequisites:

Required to install

Node.js (24.0.0) or higher
npm (11.4.2) or higher (installed with Node.js)

Clone

Clone this repo to your local machine using:

git clone https://github.com/ita-social-projects/VictoryCenter-Client

Setup

To setup this project use this command in project folder:

npm install

To enable HTTPS locally, you have two options:

Either install OpenSSL, add it to your PATH and use this command to handle configuration for you and start the project:

npm run start-with-cert

Or if you have any troubles, we have a few manual setup steps. Follow these instructions carefully:

Prerequisites

Before proceeding, ensure you have mkcert installed on your system.

Installation Steps

Create a certs folder in the root directory of cloned project.
Navigate to the certs folder in your console.
Run the following command to install local certificate authority:

mkcert -install

Run the following command to configure SSL certificates:

mkcert -key-file localhost-key.pem -cert-file localhost-cert.pem localhost 127.0.0.1 ::1

Environment

environmental variables (already set in .env.development)

HTTPS=true
SSL_KEY_FILE=certs/localhost-key.pem
SSL_CRT_FILE=certs/localhost-cert.pem
REACT_APP_PROXY_TARGET=https://backend.historycode.online/api
REACT_APP_BACKEND_URL=/api
REACT_APP_SIGNALR_PDF_REPORTS_URL=https://backend.victorycenter.online/hubs/reports

AI Assistant Setup

This project includes configurations for Claude Code and GitHub Copilot to enhance your development experience with AI-powered assistance.

Quick Start

For Claude Code

# Add GitHub MCP integration
claude mcp add github --scope user

# Authenticate
# Run /mcp in Claude Code and authenticate with GitHub

For GitHub Copilot

No setup needed! Use @github in Copilot Chat for repository operations:

@github list recent pull requests
@github create an issue titled "Bug fix"

Available AI Features

Agent Skills: Custom skills for Victory Center project
- /victory-center-docs - Search project documentation
- /victory-center-structure - Navigate codebase
- /victory-center-api - API endpoints help
- /victory-center-components - Component patterns
- /victory-center-forms - Forms & validation
MCP Integration: Connect to GitHub for repository operations
- Create/manage issues and pull requests
- Search code across repository
- View file contents and commits
- Manage repository settings

Documentation

CLAUDE.md - Concise project overview for AI assistants
AGENTS.md - Detailed coding guidelines for AI agents
MCP_SETUP.md - Complete MCP setup guide
.claude/skills/ - Claude Code Agent Skills
.github/skills/ - GitHub Copilot Agent Skills
.github/copilot-instructions.md - Always-on Copilot guidance

Learn More

See MCP_SETUP.md for detailed setup instructions for both Claude Code and GitHub Copilot.

Contributing

Git flow

To get started...

Step 1

Option 1
- 🍴 Fork this repo!
Option 2
- 👯 Clone this repo to your local machine using https://github.com/ita-social-projects/VictoryCenter-Client

Step 2

HACK AWAY! 🔨🔨🔨

Step 3

🔃 Create a new pull request using github.com/ita-social-projects/VictoryCenter-Client/compare.

Issue flow

Team

Or Contributors/People

Support

Reach out to us at one of the following places!

Discord at ira_zavushchak
Telegram at Iryna Zavushchak

License

MIT license

Name		Name	Last commit message	Last commit date
.anima		.anima
.claude/skills		.claude/skills
.codex		.codex
.github		.github
mcp_config_files_examples		mcp_config_files_examples
nginx		nginx
public		public
scripts		scripts
src		src
.browserslistrc		.browserslistrc
.coderabbit.yaml		.coderabbit.yaml
.dockerignore		.dockerignore
.env.development		.env.development
.eslintignore		.eslintignore
.eslintrc.json		.eslintrc.json
.gitignore		.gitignore
.prettierignore		.prettierignore
.prettierrc		.prettierrc
AGENTS.md		AGENTS.md
CLAUDE.md		CLAUDE.md
CONTRIBUTING.md		CONTRIBUTING.md
Dockerfile		Dockerfile
LICENSE		LICENSE
MCP_SETUP.md		MCP_SETUP.md
README.md		README.md
THIRD_PARTY_LICENSES.md		THIRD_PARTY_LICENSES.md
craco.config.js		craco.config.js
jest.config.js		jest.config.js
package-lock.json		package-lock.json
package.json		package.json
tsconfig.json		tsconfig.json

Uh oh!

Latest commit

History

Folders and files

Repository files navigation

Victory Center

Available Scripts

npm start

npm run start-with-cert

npm test

npm run test:cover

npm run lint

npm run format

npm run build

npm run eject

Installation

Required to install

Clone

Setup

Prerequisites

Installation Steps

Environment

AI Assistant Setup

Quick Start

For Claude Code

For GitHub Copilot

Available AI Features

Documentation

Learn More

Contributing

Git flow

Step 1

Step 2

Step 3

Issue flow

Team

Support

License

About

Resources

Contributing

Stars

Watchers

Forks

Releases

Packages

Used by

Contributors

Languages

`npm start`

`npm run start-with-cert`

`npm test`

`npm run test:cover`

`npm run lint`

`npm run format`

`npm run build`

`npm run eject`