A simple customer support dashboard UI that displays contact details, availability, and service hours.
This project provides a UI for a customer support dashboard, similar to the design shown in the provided image. The UI includes sections for a header, contact details, and service hours. The project is built using React for the frontend and Spring Boot for the backend.
service-hour/
│
├───backend/
│ ├───src/
│ │ ├───main/
│ │ │ ├───java/com/example/backend/
│ │ │ │ ├───Controllers/
│ │ │ │ │ └───ServiceHourController.java
│ │ │ │ ├───Models/
│ │ │ │ │ ├───ServiceHour.java
│ │ │ │ │ ├───HourType.java
│ │ │ │ │ └───DayType.java
│ │ │ │ └───Services/
│ │ │ │ ├───ServiceHourService.java
│ │ │ │ └───ServiceHourServiceImpl.java
│ │ │ ├───Main/
│ │ │ │ ├───BackendApplication.java
│ ├───resources/
│ │ └───application.properties
│ ├───pom.xml
│
├───frontend/
│ ├───public/
│ ├───src/
│ │ ├───components/
│ │ │ ├───ParentComponent.tsx
│ │ │ ├───HeaderSection.tsx
│ │ │ ├───ContactSection.tsx
│ │ │ └───HoursSection.tsx
│ │ ├───App.tsx
│ │ └───index.tsx
│ ├───package.json
│ └───package-lock.json
│
├───README.md
Clone the repository:
git clone https://github.com/gulshanb098/service-hour.git
-
Set up the backend:
- Ensure you have Java 17 or later installed.
- Install Maven if not already installed.
-
Build and run the backend:
cd backend/backend/ mvn clean install mvn spring-boot:run
This will run the backend server in http://localhost:8080
-
Set up the backend:
- Ensure you have Node installed.
-
Build and run the frontend:
cd frontend/ npm install npm start
This will run the frontend app in http://localhost:3000
- Java
- SpringBoot
- Maven
- React
- JavaScript (ES6+)
- CSS