Project Kenrack System Inc.

Presented by Japan System (Thailand) Ltd. (Suphanburi branch)

Details

Company Name: Kenrack System Inc. (ケンラックシステム株式会社)

Headquarters/Kindergarten Address: 2-8-20 Shimokodanaka, Kawasaki City, Kanagawa Prefecture (神奈川県川崎市中原区下小田中2-8-20 KRSビル3F)

Factory/Contact Address: 1-1-1 Yahata, Tsurumi-ku, Yokohama City, Kanagawa Prefecture (神奈川県横浜市鶴見区矢向1-1-1 9号室)

Website: www.kenracksystem.co.jp

Team Frontend Members

Program Language

React + Vite

Team Members

• Ms.Kanokkorn Kerdsonbun

• Mr.Thakorn Saetang

• Ms.Kannika Monkholchat

• Mr.Nattapong Rakkrai

• Mr.Ratchanon Pongpugdee

UI/UX Development Highlights

Description

1. Overview of Kenrack System Inc.'s 4 Initiatives in a Mind Map

2. Clicking on each circle in the Mind Map will display dynamics details of that Initiative on the right.

3. The composition is well-balanced, taking into account spacing and UI aesthetics.

Team Backend Members

Database & Language

Express.JS & MongoDB

Team Members

• Mr.Rachanon Homros

• Mr.Sittikorn Phanthong

• Mr.Manassawin Phayungton

• Mr.Panumas Saksoponhul

Backend Development Example Plan

Visualizing the robust backend architecture example with Express.JS and MongoDB.

Analyze Phase

1

Requirement Gathering

Detailed collection of project needs and specifications.

2

Feasibility Study

Assessing technical and operational viability.

3

System Design

Conceptualizing the overall system architecture.

Development & Technology

Frontend Development with React

Implemented responsive and interactive user interfaces for Mind Map and Login pages.

Database Management with MongoDB

Designed data structure for initiatives and user authentication (Conceptual, ready for integration).

Backend Development Using Express.js

Outlined API endpoints for user authentication and initiative data retrieval.

Backup Project with Github

Version control and collaborative development through GitHub repository.

Implement Phase

100 %

Deployment

Install dependencies, set up .env and run the server with npm run dev

75 %

Results obtained

Easy-to-use data management system, beautiful UI, fast response on all devices.

25 %

Maintenance

Ongoing support and updates.

Future-Proofing & Reliability

Security Measures

Input validation, secure authentication practices once backend is integrated for user data protection and secure application access.

Scalability

Designing for future growth and increased user load.

Summary

Successful Frontend Development

The frontend development of the Kenrack System Inc. website has a main webpage, There may be additional parts in the future.

Key Features Implemented

Mind Map Visualization, Dynamic Initiative Details

Technology Stack

• React + Vite for Frontend, planned

• Express.js + MongoDB for Backend.

Future Plan

Backend Integration

Connect to the Backend API to fetch real data for both Login page and Initiatives details.

Real-time Data Display

Show the latest information from the database(MongoDB).

Performance Optimization

Improved UI/UX with to display perfectly

Continuous Improvement

Continuously develop and maintain the website based on feedback.