This project is a customized CRM for the Huamao Group in Hong Kong, providing administrators with different permissions to manage member, points, promotions, and events data. In this project, I collaborated with the frontend team to build a CRM project with Vue.js and TypeScript using Vite, and construct the interface with Sass. We utilized Azure DevOps Git for version control. Apart from working on different shared components with the team, I also experimented with using navigator.mediaDevices to access the camera and capture the screen using canvas. Additionally, we incorporated the html5-qrcode package to create a QR code scanner for reading member IDs.

Introduction

Implementing language switching between Chinese and English using vue-i18n.

Utilizing the html5-qrcode package to create a QR code scanner for reading member IDs.

Using navigator.mediaDevices to activate the camera and capturing the screen using canvas.

In addition to dividing tasks among different components, it is also possible to appropriately utilize or extend shared elements created by others.

Creating reusable elements while considering tables with different variations.

Enabling dynamic addition of a row and adding data within it.

Featured

Design

Skills

ChinaChem CRM

Creating a simple chatroom using Vue.js, Socket.IO, Node.js, and MongoDB.

Chat Room

Our company specializes in providing Microsoft Dynamics CRM system integration and enterprise software consulting services to various business organizations, including manufacturing, retail, finance, and non-profit organizations. I have been involved in projects for companies such as Hanshin, Yata, FET FarEasTone, and Formosa Plastics Group. Within the company, my main responsibility is frontend development, focusing on customizing Dynamics CRM, custom CRM development, and integrating APIs or data from Dynamics CRM's OData.

Embedding HTML or JavaScript files into the established Dynamics CRM architecture and utilizing Dynamics 365 JS syntax to correctly display data and interface.

Selecting either a member or a phone number, upon completion, the member's information will be automatically populated, allowing for the printing of a lottery ticket for the member.

Customizing a CRM using Vue.js to meet the specific operational and interface requirements of the client.

Designing and confirming requirements before development is also within the scope of work.

Creating documentation upon project completion.

Cloudnifier TW

Using Vue.js in conjunction with Gridstack.js, a functionality has been developed where users can add charts, tables, or text and have the ability to drag them around.

Gridstack

In the company, I am primarily responsible for maintaining and developing internal systems. I work with marketing and other departments to provide scheduling or on-page functionalities based on their needs, enhancing data management efficiency. Additionally, I handle OTT services, which includes creating APIs for external vendors and maintaining the company's app screens and APIs. For legacy projects, I have organized shared functions and refactored parts of the code, implemented Laravel’s service and repository architecture, and performed security assessments and optimizations, such as promoting API tokens and assisting with Laravel Sanctum.

Internal System Maintenance and Development

Users can upload redemption codes, which will be matched to the corresponding users through scheduled tasks, and then SMS notifications will be sent. Users can also upload the redemption results, and scheduled tasks will be used to report the quantities. Other features include the ability to resend SMS notifications or update the latest phone numbers. The interface will also allow our service staff to easily check the current status of the distribution.

Collaborated with banks to enable our service staff to conveniently upload bills to the bank

When customer service personnel handle user personal information, they need to enter a password to verify that they are authorized company employees before accessing the data.

Homeplus

Ideas

Math Island is part of the 'Tomorrow School' project led by Professor Chen Dehuai from National Central University. It primarily utilizes computers as learning aids for students, assisting teachers in their instruction. Math Island presents mathematical concepts in interactive game formats and guides students through self-paced learning using a course map. Students challenge math tasks and progress through levels according to their abilities, allowing them to plan and manage their own learning, ultimately boosting confidence and interest. Teachers can closely monitor each student's learning status and progress through the learning process, providing individualized guidance and assistance to address any learning difficulties. In this project, I will need to understand the requirements from teachers or research students, design the interface and database accordingly, develop corresponding APIs, and then proceed with frontend development and API integration.

Every day, the system automatically sends tasks that the student has completed in the past, as well as a problem they haven't attempted yet at their grade level. This platform can also be used by teachers to send practice assignments specifically tailored for individual students or the entire class.

In addition to questions and answers, there will also be tutorials and hints available to assist students in solving problems. Furthermore, there will be scratch paper provided for students to perform calculations or take notes. The notes written on the scratch paper will be saved for analysis by teachers.

Students can also share their problem-solving approaches, allowing friends to leave comments and provide feedback on their teaching methods.

Students can use the money earned from answering questions to purchase stylish boats and houses. I will also create illustrations of these items.

In addition to being able to view the overall progress of the class they are teaching, teachers can also individually track the learning progress of each student.

In addition to the learning on Math Island, teachers can also integrate their own teaching materials. This feature allows teachers to track the progress of students' learning on Math Island as well as their performance on assignments provided by the teacher.

Raise Hand System, an instant system for students to queue up and ask questions in class.

The teacher will automatically switch to the next student after completing one student.

Math Island

Memory Game

Website planning, design, and front-end implementation practice for a website showcasing pottery products and tutorial courses.

Moold Ceramic Studio

Creating a CRM website using Next.js (work in progress).

OKGO CRM

Use Laravel+React.js+Tailwind to make a simple questionnaire management system. Firstly, the front-end page is constructed through React.js and Tailwind, and then Laravel is used to determine whether the user is logged in or not. Most of the APIs can be used only if the user is logged in. This time, I tried to use Laravel RESTful API to write part of the API.

Log in and log out through Laravel's Auth, and use Middleware to separate login and non-login.

Create what you want to investigate, and the questions you want to ask.

Survey Laravel

Developed using React.js, primarily to practice the 'useContext' hook.

SHANG