Hafid NurandGitHub 0c7887268c feat(backoffice): FE integration (data fetch) for dashboard, teams, submission, and user management page (#70)
* feat(backoffice): create a boilerplate page for Hackathon dashboard

- Create an empty page for Hackathon dashboard
- Comment out and hide the existing backoffice sidebar

* feat(backoffice): Create a nested/dropdown sidebar list

- Create a dropdown sidebar list
- Show back the old navigation and group them
- Make the sidebar responsive for mobile view

* test datatable with mock data

* base UI for Hackathon backoffice

TODO:
- Organize table schema for users, teams, and submissions management
- Create API Contract for additional back-end endpoint

* feat(hackathon): draft data table column & API Contract

* update endpoint

* feat(backoffice): update page hackathon user management

- update data table component
- update filtering & pagination
- add modal display to edit and add user
- hide notification icon in backoffice wrapper

* feat(backoffice): add API contract for hackathon users

* feat(backoffice): little adjustment in hackathon users management UI and API contract

* feat(backoffice): update hackathon team management page

- add modal for manage team, add new team, and view project submission
- reorganize the table column and data table

* feat(backoffice): add searchable city filter

- add component for city filter
- apply to user management and team management pages

* feat(backoffice): improve hackathon team modal UI and add API contract

- Add feature to select city in team detail modal using CityFilterSelect component
- Add feature to change team logo and banner
- Add API contract documentation for hackathon teams in backoffice

* feat(backoffice): authentication middleware, error pages, and 404 page

* feat(backoffice): hackathon dashboard integration

* feat(backoffice): users page integration

- Get users data from API
- Set up server-side pagination and match URL params
- Hide filter that doesn't exist in back-end

* feat(backoffice): teams page integration

- Get teams data from API
- Hide filter that doesn't exists in back-end
- Simplify modal according to the back-end

* feat(backoffice): submission page integration

- Fetch submissions data from API
- Move submission modal to hackathon-submissions page
2025-12-10 08:41:30 +07:00
2025-03-13 02:03:13 +07:00
2025-04-26 20:32:58 +07:00
2025-11-24 12:51:41 +07:00
2025-03-13 00:50:45 +07:00
2025-11-25 01:47:56 +07:00
2025-11-25 01:47:56 +07:00
2025-03-13 00:50:45 +07:00
2025-03-13 00:50:45 +07:00
2025-12-09 14:15:23 +07:00
2025-11-25 01:47:56 +07:00
2025-11-24 10:48:09 +07:00
2025-11-24 11:21:29 +07:00
2025-12-09 16:28:32 +07:00
2025-12-09 16:28:32 +07:00
2025-03-13 02:03:13 +07:00
2025-05-20 11:09:14 +07:00
2025-05-22 22:31:04 +07:00
2025-03-13 00:50:45 +07:00

IMPHNEN Frontend Service

IMPHNEN

This repository is a monorepo for all frontend services of IMPHNEN. The monorepo includes three main applications:

  1. Gacha - Application for Gacha Website.
  2. Backoffice - Application for Internal Management Website.
  3. Dimentorin - Application for Mentoring Service.
  4. Landing Page - Application for Landing Page.

How to install

  1. Clone this repository:
    git clone https://github.com/IMPHNEN/imphnen-frontend-service.git
    cd imphnen-frontend-service
    
  2. Install all dependencies:
    npm install
    

How to run

Setup Environment Variables

Before running the applications, you need to set up the environment variables. You can do this by copying the .env.example file to .env and modifying the values according to your needs.

cd apps/{appname}
cp .env.example .env

Development

Use the following commands to run in development mode:

  • Gacha:
    npm run gacha:dev
    
  • Backoffice:
    npm run backoffice:dev
    
  • Dimentorin:
    npm run dimentorin:dev
    
  • Landing Page:
    npm run landing:dev
    

Build

Use the following commands to build the applications:

  • Gacha:
    npm run gacha:build
    
  • Backoffice:
    npm run backoffice:build
    
  • Dimentorin:
    npm run dimentorin:build
    
  • Landing Page:
    npm run landing:build
    

Production

Use the following commands to run the applications in production mode:

  • Gacha:
    npm run gacha:prod
    
  • Backoffice:
    npm run backoffice:prod
    
  • Dimentorin:
    npm run dimentorin:prod
    
  • Landing Page:
    npm run landing:prod
    

Storybook

This repository uses Storybook to develop, test, and document UI components in an isolated and interactive environment. Below are the commands to work with Storybook:

  • Run Storybook

    This command starts Storybook in development mode, allowing you to view and test UI components interactively.

    npm run ui:storybook
    
  • Run Unit Test

    This command runs unit tests for the UI components to ensure they function as expected.

    npm run ui:test
    
  • Build Components

    This command generates a static build of Storybook, which can be deployed for sharing and documentation purposes.

    npm run ui:build
    

How to contribute

  1. Fork the repository and clone it locally.
  2. Create a new branch for a new feature or fix:
    git checkout -b feat/feature-name
    
  3. Make changes, commit, and push to your forked repository.
  4. Create a pull request to this repository develop branch.

If you encounter any issues or problems, feel free to create a new Issue.

S
Description
Fork of IMPHNEN/imphnen-frontend-service (mirror)
Readme
46 MiB
Languages
TypeScript 98.2%
CSS 1.3%
JavaScript 0.3%
Dockerfile 0.1%