Content Management System

This content management system is intended for civil servants to update forest-related information.

·   ·   ·


Supergeo Technologies, a geographic information company, acquired a case from the Forestry Bureau, which is part of the Taiwanese government. I participated in this case and was responsible for the front-end development. We worked on a content management system for civil servants to update forest-related information in real-time such as forest trials’ status, nature education, volunteers, etc. The information will be updated on the Taiwan Recreation Forestry website.

Company: Supergeo Inc.

Role: Front-end Development

Time: 2018/5-2018/7

·   ·   ·

Front-end Development

I coordinated with Supergeo Technologies' back-end engineer, who wrote (C#) as this website’s back-end. My responsibility was to review the content that needed to be created, read, updated, and deleted (CRUD). Additionally, I use a lot of AJAX (Asynchronous JavaScript + XML) on this website, which means web applications can send and retrieve data from a server asynchronously (in the background) without interfering with the display and behavior of the existing page. I learned how to utilize a lot of Vanilla JS from this project.

You can hover over the image to see the editing effect.
The content management system.
·   ·   ·

Questionnaire's Drag & Drop (Vanilla JS)

This is a live demo of our questionnaire; the questionnaire is on the left-hand side and the frequently asked questions (FAQ) are on the right-hand side. You can create, read, update, and delete (CRUD) content on the left-hand side. You can drag the frequently asked question (FAQ) and drop it on the questionnaire on the left-hand side.

See the Pen Questionnaire (drag&drop VanillaJS) by yuchinglin (@yuchinglin) on CodePen.

Questionnaire Editing (Left: Questionnaire; Right: FAQ)
·   ·   ·

Navbar Redesign I (User-friendly Edits)

1. Navbar Redesign:
In the original design, some of the links would open the submenu, while other links would jump to the page directly. Therefore, I added the symbol “” to help users more easily understand.

2. Submenu Redesign:
In the original design, the submenu's word and background color contrast are only 3.9, which fails to pass WCAG 2.0 level AA for normal text, which requires at least a 4.5. Consequently, it is not enough for users to easily recognize, so I changed the color.

Navbar Redesign I (Left: Navbar Redesign; Right: Submenu Redesign)
·   ·   ·

Navbar Redesign II (User-friendly Edits)

When I was coding and testing the website, I found out that the two navbars are very easily confused. The main navbar always exists on the page, but the sub navbar will change depending on what the users click on the main navbar. The main navbar is fixed and the sub navbar is unfixed. Because of this, I drew a line between them and give them different styles to differentiate them.

Navbar Redesign II
Up Next