KNU Dashboard

KyungPook National University Computer Science & Engineering Capstone Design Project1(종합설계프로젝트1, 2023)

Administrator monitoring dashboard that analyzes the types and activities of members on the Web-r, a community and medical statistical analysis platform

Project Components Description

• template : Flatlogic
• Color
  • background : #1e2045
  • widget : #171933
  • dashboard graph : #cf1228, #dc8204, #2a8313, #1c5cfe, #a83150, #a94542, #f1f1f3
  • users graph : #a1232b, #243346, #4b838f, #b26455, #74a892, #5b806d, #a76a24, #273a4a, #ca2528
  • payments graph : #1d5dff, #377627, #82c568, #fd9042
  • nlp graph : #ca2528, #273a4a, #5aa2aa, #e17b5c, #ffff09
  • developer page : #dc8204, #cf1228, #393f45

Pages

• Dashboard : Dashboard Home
• Users : Users Analysis Page
• Payments : Payments Analysis Page
• NLP : Natural Language Processing Page(Clustering)
• Information
  • Developer : Developer Introducing Page
  • Documents : Company Technical Documents Page

Else Pages

• Header
• Loader
• Notifications
• Sidebar
• Pages
  • error
  • login
  • register

Chart Features

• Echart Charts
• Highchart Charts
• Apex Charts
• React-wordcloud

UI

1. Users Page

2. Payments Page

3. NLP Page

File

• Backend : pybo
• Data Analysis : Data_Analysis
• Frontend : else

Developer Settings

Project version

• node: v14.21.3
• npm: v6.14.18
• sass-loader: v7.1.0
• Supported NodeJS and node-sass version

Installation

1. Clone repository

git clone https://github.com/anheejeong/Capstone-Design-Project1.git myproject

2. Get in the project folder

cd myproject

3. Install dependencies via npm or yarn

npm install

yarn

3. If installation gets error, use below command

npm install chalk webpack webpack-dev-server react-dev-utils pnp-webpack-plugin html-webpack-plugin case-sensitive-paths-webpack-plugin webpack-manifest-plugin eslint eslint-loader url-loader babel-loader babel-preset-react-app babel-plugin-named-asset-import babel-plugin-named-asset-import style-loader css-loader postcss-loader sass-loader file-loader @babel/core eslint-config-react-app eslint-plugin-import eslint-plugin-flowtype eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react eslint-plugin-react-hooks babel-eslint @babel/plugin-proposal-class-properties @babel/plugin-proposal-optional-chaining [email protected] postcss-flexbugs-fixes postcss-preset-env bootstrap glyphicons-halflings font-awesome animate.css awesome-bootstrap-checkbox @amcharts/amcharts4 @amcharts/amcharts4-geodata classnames echarts-for-react echarts highcharts highcharts-react-official moment rc-hammerjs react react-animate-height react-animated-number react-apexcharts apexcharts react-dom react-google-maps react-redux react-router react-router-dom react-sparklines react-toastify react-transition-group reactstrap redux redux-thunk rickshaw line-awesome

Quick start

Run development server

yarn run

start

Server start

Needs to turn server - Please send a mail to us ([email protected])

1. Get in the project folder

flask run

Developer Introducing

1. Frontend
   안희정([email protected])
   Github : anheejeong
2. Backend
   조성호([email protected])
   Github : sungholion
3. Data Analysis
   김창현([email protected])
   Github : ChangHyeonn

Company Technical Documents

Tech Documents - Notion

Demo Video

Demo Video - Youtube