張哲嘉 Zhe-Jia Zhang
Front-end developer
I am currently working as a Front-end Engineer at Senao Networks's Switch Development Department (since February 2021). My main responsibilities include the development of the web GUI for switches. I utilize front-end technologies such as Vue, React, Next, Typescript, Vite, TailwindCSS, SCSS, and introduce modern DevOps tools like Docker, CI/CD, and Jenkins. I am also involved in the development of automated testing web applications, covering the development and deployment of both front-end and back-end. The back-end is implemented using Django and MongoDB, and Nginx is employed for front-end and back-end deployment.
During my master's studies, I conducted research in high-energy physics and participated in accelerator collision experiments and data analysis at the Brookhaven National Laboratory in the United States.
In high school, I served as the president of the traditional Chinese martial arts club. I frequently guided club members and junior students, leading them in various activities and competitions. Our efforts also contributed significantly to the school's achievements.
I am passionate about learning and sharing knowledge. Within a team setting, I enjoy sharing newly acquired technical skills. I regularly share my technical expertise and experiences on my blog and YouTube channel. The blog is developed using a Vue + Django setup for front-end and back-end separation, ensuring website security with Cloudflare and TLS/SSL certificates generated by Let's Encrypt. It also includes a comprehensive Content Management System (CMS).
Taipei City, Taiwan
Blog: https://blog.zjzhang.org
Youtube: https://www.youtube.com/@ZJTech-cl6wk
FB fan page: https://www.facebook.com/profile...
Linkedin: https://www.linkedin.com/in/%E5%93%B2...
Email: [email protected]
Phone: +886978010599
Tech stack
Front-end
- Vue
- Familiar with both Vue2 and Vue3
- Familiar with both Composition API and Options API
- Route: Vue Router, Navigation guards, authenticate with JWT and HTTP-only cookie
- State management: Vuex
- React/Next.js
- Create React projects with CRA or Vite
- Route: React Router, Protected route with JWT and customized Auth Context
- State management: Redux, RTK
- Using SSR with Nextjs
- Familiar with both Page Router and App Router in Nextjs
- Typescript/Javascript
- TailwindCSS
- SCSS/SASS
- Vite
- SEO
Back-end
- Django
- MongoDB
- Replication
- TLS/SSL transport encryption
- Authentication
DevOps
- Docker
- Jenkins
- CI/CD
- Nginx
Programming Languages
- Typescript/Javascript
- Python
- Shell script
- C/C++
Work experience
Feb. 2021 - Present
Front-end engineer 
Senao Networks
- Using Vue, React, Django, Docker, and Jenkins for development
- Develop the Web GUI of the switch
- The old version of the Web GUI utilizes React 17 and Webpack, employing somewhat outdated technology. Consequently, our team is considering adopting more modern tools such as Vue 3, which supports newer HTTP standards and offers enhanced performance through Vite. Additionally, the development will involve Typescript to reduce weak typing errors and enhance overall code quality.
- Engage in discussions with the UI designer to review design mockups and collaborate with the Back-end engineers to discuss API implementations.
- Introduce modern DevOps for our team, such as Docker, CI/CD, Jenkins, etc.
- The testing method for our switch firmware involves traditional QA along with Python automation. However, with the current trend towards CI/CD, both I and the team members are gradually introducing CI/CD infrastructure.
- Develop the Web app for automated testing of firmware, significantly reducing firmware testing time
- Automated testing relies on engineers executing test scripts. Enabling QA to conduct automated tests through web app automation significantly reduces firmware testing time.
- The database records each test and its results, providing comprehensive reports for subsequent debugging.
- Provide the formal testing report to the ODM customer
Project
Senao Networks
Web GUI of the switch
- Developing with Vue 3 + Composition API + setup Syntax Sugar
- Using TypeScript instead of JavaScript to prevent errors and bugs commonly caused by weakly typed languages
- Using TailwindCSS for intuitive class naming, saving time in editing style sheets, and developing responsive web design (RWD)
- Using SCSS instead of traditional CSS for more advanced techniques of styling
- Using faster and higher-performance Vite instead of traditional Webpack to build a front-end project
Web app for automated testing of firmware
- Separation of Frontend and Backend Architecture, Frontend using Vue, Backend using Django
- Develop RESTful API in Django
- Implementing JWT for Authentication and API protection
- Using NoSQL MongoDB
- Establish an authentication system for MongoDB
- Establish MongoDB Replication cluster to enhance the stability of database service
Education
2017 - 2020
NCKU, National Cheng Kung University
Master of Science, Physics
Thesis: Measurements of the Upsilon suppression in Au-Au collision at energy = 200 GeV via the dimuon decay channel at the STAR experiment
2013 - 2017
Tamkang University
Bachelor of Science, Physics
Side Project
My blog
- Deploy Vue front-end production site with Vite and Nginx
- Deploy Django back-end production-grade service with WSGI service and Nginx
- Establish https server with Nginx using the TLS/SSL certificate generated from Let's Encrypt
- Setting the restriction rules for Cross-Origin Resource Sharing (CORS) to prevent unauthorized access to back-end resources
- Utilize Cloudflare to accelerate website loading speed and leverage analysis and monitoring features
- Utilizing the cybersecurity protection features provided by Cloudflare, including the firewall and DDoS protection
- Implementing IP blocking technology in Nginx forces users to access the website through DNS, thereby enhancing the cyber security of the server
- Using DDClient to establish and automatically update DDNS allows for more freedom in website deployment, eliminating the need to bind to a fixed IP
- Implement Google Adsense Ads in the blog
- Using highlight.js to highlight codes
CMS for my blog
- Deploying MongoDB service with DDNS for DNS protection and flexible deployment of DDNS
- Using TLS/SSL transport encryption in MongoDB to enhance the security of data during transmission
- Establishing anti-spider mechanisms to prevent search engines from finding this website
- Functions of inserting and editing code in the article