Install Node.js and Visual Studio Code (VS Code).
npm config set registry http://registry.npm.taobao.org/npm install -g yarn
yarn config set registry http://registry.npm.taobao.org/git clone git@github.com:HackathonVisualization/HackathonVisualization.gityarn installyarn startThis initiates the project in developer mode. Open http://localhost:3000 in your browser to access the project. It supports hot code reloading.
yarn buildThe compiled files will be output to the build directory. To deploy the project, you need to upload this build directory to your web server.
- public: This directory stores static webpage files, such as webpage icons and titles.
- src: Main location for the source code.
- component: Principal directory for storing visualization widget files
- Charts.tsx: An example of one of the widgets.
- App.css: Main location for the project's CSS code.
- App.tsx: The core file of the project, responsible for tasks like interface rendering and key Echarts content.
- utils.ts: A library of functions to fetch data through the GitHub API.
- component: Principal directory for storing visualization widget files
- README2.md: This guide provides a reference if you want to build this project from scratch.
Other files may not be essential, and can be ignored.
The primary task is to add functions in utils.ts to fetch relevant data using the GitHub API, similar to getCountOfCommits.
This role focuses on data gathering and operates between the front-end and back-end. That's why it's humorously referred to as Backend (sort of).
Skills required:
The primary tasks include brainstorming and optimizing the front-end interface. This includes adding a logo, updating a title, incorporating animations, using Antd, enhancing the aesthetic appeal, etc.
An essential part of this role is to add a Router to the webpage.
The primary work lies in App.css and App.tsx.
Skills required:
The main task is to use Echarts to visualize the data.
The principal work occurs in the component