CarValoo Fleet Management
The project involved tracking cars from the connected IoT devices which notifies the user about any kind of damage. The incoming data is served to the web client, which provides engineers with the latest data about any car.The project required a lot of complex data visualization; therefore, I've utilized D3.js for SVG animations and data chart construction. I have even open-sourced a chart developed during the project, which required zooming in-out on a yearly time scale to daily time scale, connecting its state with third-party React components and clustering data just like in maps. I also coded a clustering algorithm for the data. For instance, if the data groups get too close to each other, I needed to prevent their intersections, so a custom clustering logic is implemented by me. Via this clustering logic on the client side, the back end sends all the data to front end; and the front end handles all the clustering and data visualization logic by itself.In the project, tracking of IoT sensor data is made easy with custom interactive D3.js charts (built with SVG). Besides the charts, the car is also coded with SVG, and the part of the vehicle, which sends the sensor data can be viewed easily with this SVG visualization.
E-Work ERP
The project involved the management of human resources, internal notifications, reporting of employees, and tracking income derived from medical imaging devices (MRIs, CTs, and so on) from a single application with multi-tenancy architecture.The team included five people, a business analyst, two back-end developers, a test engineer, and a front-end developer. As the sole front-end developer, I developed all the interfaces with React Native and Angular. I also served as a front-end architect by constructing all the state management and making the final calls on all the design patterns and UI kits for all front ends. I used Redux on React Native and NgRx on Angular to store user roles and give specific users access to certain routes or components. I also wrote custom directives in Angular to render components and issue some parameters to routes to decide if routes are accessible or not. Concerning the React Native portion, I coded some higher-order components utilizing the Redux state to decide whether the component should be rendered for the user. In both apps, the global store saved all the role information for users.
Smolt Order Delivery Application
Smolt is an order management app for small-to-middle-sized businesses in the United Kingdom. A user can easily plan the delivery schedule with the drag-and-drop feature. Financial reports of the process are reported via charts, a filter option that allows one to obtain specific snapshots, and communication access is given to the entire team through the app.Smolt is an Angular project which has monorepo architecture via Nx. NgRx is utilized for state management. Thanks to the project consisting of multiple depth levels of projects and modules, state management architecture with NgRx was constructed with various levels of state instances.On the UI/UX side, Ng-bootstrap was used for input elements, cards, and so on.
Digital Signature System
The project was about obtaining a digital signature for a patient's consent to undergo a medical imaging scan. The app consisted of a large form that answered pertinent questions about the patient's status related to medical imaging, such as "Does she/he have a metal implant on his/her body?" "Does he/she have claustrophobia?" and so on. After reviewing all these related questions, the patient states his/her consent via a digital signature on a tablet device (iOS/Android). The hard part was handling this form with a stepper form logic in the front end, a signature in a PNG file format, and sending all this data to the back end after the form is completed.Besides the stepper, the form also required different questions depending on the medical imaging device because an MRI device requires different questions than a CTI device. Therefore, I have set up Redux as a global store and Axios for HTTP requests to the back end. Users could sign in with the same authentication credentials as they do in E-Work, and they would complete the form depending on the data attached to the patient's status. After completing the form, the patient can sign with their finger or tablet pen.