Hey! welcome to my personal website
This personal website will introduce my technical
stack and personal blog and detail the projects I have done
Let's get started !
Technology stack
Project

Convenient transportation services for the Chengdu Universiade
- React 18
- Tailwind Css
- TSX
- Antd
- Zustand
- COS
- Nacos
- Mysql
- Redis
- RabbitMQ
- SpringCloud
Project Technology:
Business Logic:
During the Universiade, if external vehicles need to enter Chengdu, they need to submit their driver information, application reason, vehicle information, etc. through this system to generate a pass code for scanning when exiting the highway, and publish daily traffic rules. Solve the management of external vehicles to reduce traffic flow and analyze data. And archive it for the government cloud traffic management bureau highway system.
The module I am responsible for:
- Responsible for front-end page restoration.
- Responsible for data statistics services.
- Responsible for the vehicle temporary pass code declaration service.
- Responsible for H5 jsSdk WeChat authorization login service.
- Responsible for gateway service verification permissions, whitelist paths, and seamless refresh of user tokens.
- Responsible for the RabbitMQ message queue transfer of three services and ensuring that messages are not lost.
- Responsible for reporting reasons, vehicle information, driver information, travel date, traffic statistics, addition, deletion, modification and query services.

Chengdu Hi-Tech Zone Medical Insurance Reimbursement System
- Antdesgin Pro
- ProComponent
- Tailwind Css
- TSX
- SpringBoot
- Mysql
- Redis
- RabbitMQ
- Easyexcel
Project Technology:
Business Logic:
In the past, patients who wanted to apply for medical insurance reimbursement needed to take their discharge certificates and invoices to the Medical Insurance Bureau to submit applications. The medical insurance staff would then manually calculate the total amount of reimbursement for each drug and reimbursement ratio and submit the information for review by their superiors. After the superiors reviewed and approved the information, they would notify the bank to make the payment in batches. This process was very cumbersome for both patients and staff. This system only requires uploading the corresponding information through the Sichuan Medical Insurance App, and the staff of the Medical Insurance Bureau no longer need to manually calculate the total amount of reimbursement ratio as before. Instead, they can dynamically go to the drug library to obtain each drug ratio through OCR images for calculation. The staff only needs to submit the application for review, and the leader will review and call the bank's interface to allocate funds to achieve digital reimbursement. The number of people who have reimbursed for insurance in each district of Chengdu can be dynamically counted for data analysis.
The module I am responsible for:
- Full stack maintenance, continuous iteration.
- Added batch approval function.
- Added the function of generating batch numbers.
- Modify the drug catalog module.


KK 8.0 App
- ReactNative
- react-navigation
- react-native-reanimated
- @shopify/flash-list
- react-redux
- sqlite
- pushy
Project Technology:
Business Logic:
Mobile office OA, enterprise process management, attendance clocking...
The module I am responsible for:
- HOC integrated Navigation.
- HOC integrated App PushY hot update.
- NativeWind implements black and white theme switching
- react-native-mmkv Implementing search functionality
- MasonryFlashList Implementing waterfall flow
- react-native-amap3d Integrated Amap
- react-native-fs Implement file download function
- react-native-vision-camera Realize the photo taking function
- react-native-amap-geolocation Integrate AutoNavi positioning to complete the clock-in function
- react-native-document-picker Implement attachment upload function, support PDF, WORD, EXCEL

OSell Sass official website
- Vue3
- Vue Router
- Tailwind Css
- Setup
- Mitt
- VueX
- Axios
- Antdesign Vue
Project Technology:
Business Logic:
Osell Group Sass's official website. In this model, software suppliers deploy application software on their own servers. Customers can purchase the required application software services from suppliers through the Internet according to actual needs, and pay fees according to the amount of services purchased and the length of time. Users do not need to install the software on their local computers, but access and use these services through the Internet. There is no need to maintain and manage the software, and the service provider will be responsible for these tasks.
The module I am responsible for:
- Complete the entire project from scratch.
- Responsible for restoring UI design drawings.
- Responsible for project construction, demand docking, API docking and optimization.
- Responsible for homepage, login, registration, forgotten password, product introduction, order, consultation, about and other sub-modules.


Changan Automobile Encyclopedia
- Vue3
- UniApp
- Vue Router
- Tailwind Css
- Setup
- Mitt
- VueX
- Axios
- Antdesign Vue
Project Technology:
Business Logic:
Developed for Changan car owners, it is a smart question-and-answer platform for Changan Automobile officials and car owners. Car owners can post messages on this platform if they have any problems with their vehicles during use, and Changan's automotive engineers will answer them. It also serves as a knowledge base for Changan Automobile, and any problems with the vehicle can be searched and solved on it.
The module I am responsible for:
- Restore the H5 terminal according to the UI design draft.
- Backend interface connection.
- Add, delete, modify and check the background system.

Middle and back-end development template
- Antdesign Pro
- UmiMax
- Typescript
- Procomponent
- React
- model
- antd
- Redis
- Mysql
- SpringBoot
Project Technology:
Business Logic:
A rapid development backend template based on React, which includes permission menu, role management, dictionary management, etc. It includes all modules of the backend project. The most important thing is to directly generate TSX, Controller, Service, Mapper according to the database table to quickly complete the development.

. . .
ReactNative Demo

Personal Strengths
Familiar with theme switching
Familiar with Web responsive layout and different display adaptation, and can use one set of code to be compatible with both PC and Mobile. (See the responsiveness of this website)
Familiar with the screen adaptation of cross-end Apps of different phone sizes, and aware of the differences between iOS and Android.
Familiar with ReactNative and React Web Animation
The full stack focuses on the front end and can independently develop the entire front end and back end.
Familiar with Web internationalization (i18n)
