Toyota Modernizasyon Projesi

This is a React project written using React.js, Context API, and hooks. It allows the user to enter and record a vehicle's error detection and keeps a list of these errors.

Demo

You can find the live demo here : https://toyota32bit.netlify.app Registration number: 99619 body no: 222 body no(defectlist): 55555 password: toyota

🗃 Project Structure

TOYOTA-32bit-project
├─ README.md
└─ toyota-web
   ├─ LICENCE
   ├─ package-lock.json
   ├─ package.json
   ├─ public
   │  ├─ assets
   │  │  ├─ img
   │  │  │  ├─ 87897.jpg
   │  │  │  ├─ car.jpg
   │  │  │  └─ cursor.gif
   │  │  └─ sound
   │  │     └─ AlertSirenSound.mp3
   │  ├─ db
   │  │  ├─ 87897.json
   │  │  ├─ defectScreen.json
   │  │  ├─ HAT.json
   │  │  ├─ hataData.json
   │  │  ├─ hataDetay.json
   │  │  ├─ hataDetay2.json
   │  │  ├─ hataListesiData.json
   │  │  ├─ headerData.json
   │  │  ├─ largeFont.json
   │  │  ├─ largeFont2.json
   │  │  ├─ shiftInfo.json
   │  │  ├─ shifts.json
   │  │  └─ terminal.json
   │  ├─ favicon.ico
   │  └─ index.html
   └─ src
      ├─ App.css
      ├─ App.js
      ├─ components
      │  ├─ form
      │  │  ├─ DatePicker.js
      │  │  ├─ Input.js
      │  │  ├─ InputPassword.js
      │  │  ├─ Select.js
      │  │  └─ Textarea.js
      │  ├─ LangSwitcher
      │  │  ├─ index.css
      │  │  └─ index.js
      │  ├─ PrivateRoute.js
      │  ├─ TerminalTable.js
      │  └─ VirtualKeyboard
      │     ├─ index.css
      │     └─ VirtualKeyboard.js
      ├─ context
      │  ├─ AuthContext.js
      │  ├─ defaultContext.js
      │  └─ index.js
      ├─ fonts
      │  ├─ 404.css
      │  ├─ carMapper.css
      │  ├─ hataGiris.css
      │  └─ hataListesi.css
      ├─ index.js
      ├─ localeStorage.js
      ├─ pages
      │  ├─ 404.js
      │  ├─ Auth
      │  │  ├─ AuthLayout.js
      │  │  ├─ login.css
      │  │  └─ Login.js
      │  ├─ ErrorEntry
      │  │  ├─ CarMapper.js
      │  │  ├─ ErrorEntryPage.js
      │  │  ├─ ErrorHeaderBar.js
      │  │  └─ LargeFont.js
      │  ├─ ErrorList.js
      │  ├─ Terminal.js
      │  └─ TerminalLayout.js
      ├─ routes.js
      ├─ translation
      │  ├─ index.js
      │  ├─ locales.js
      │  ├─ messages
      │  │  ├─ de-DE.js
      │  │  ├─ en-US.js
      │  │  ├─ fr-CA.js
      │  │  ├─ index.js
      │  │  ├─ ru-RU.js
      │  │  └─ tr-TR.js
      │  ├─ provider.js
      │  └─ translate.js
      ├─ utils.js
      └─ validations
         ├─ index.js
         ├─ LoginSchema.js
         ├─ LoginSchema2.js
         └─ Validation.js

(🔝)

🧰 Getting Started

‼️ Prerequisites

This project uses Npm as the package manager.

 npm install npm@latest -g

⚙️ Installation

Install my-project with npm

  npm install my-project
  cd my-project

🧪 Running Tests

To run tests, run the following command.

  npm test

🏃 Run Locally

Clone the project

  git clone https://github.com/Metecode/TOYOTA-32bit-project.git

Go to the project directory

  cd my-project

Install dependencies

  npm install

Start the server

  npm start

Pull Request

Before uploading your PR, run test one last time to check if there are any errors. If it has no errors, commit and then push it!

For more information on PR's steps, please see links in the Contributing section.

(🔝)

💻 Pages

Terminal Page

This is a page that lists all terminals. It is dynamically populated based on the data received from the service.
In the top left corner, there is a language switch button. By default, the Turkish language option is selected.

Login Page

My application starts with a login page upon initial entry.
With a minimal mock service, it displays alert snackbars to warn about unsuccessful or incorrect login attempts.
Shift data is dynamically fetched from the service and initially comes with a pre-selected shift, which changes the background color accordingly.
The terminal list is fetched based on the selected filter, and the terminal list is prominently displayed to the user when the page is first opened.
The date is always up-to-date and represents the current day.
It features a multilingual virtual keyboard.
Paths dynamically change based on the selected filter.

Defect Login Page

Based on the data received from the service, the boxes on the car are dynamically positioned.
If the user doesn't perform any action for 80 seconds, a disruptive alarm sound is played.
When a box is clicked and it is blue, it transitions to a lower image.

After selecting the area where the error is located in the lower image, a list of error types opens dynamically.

After selecting the error type, the error recording button becomes active.
Error location selection is made.

When the user clicks on the error recording button, a error recording form appears on the screen and the user enters the error information there.
When the save button is clicked, UI blocking is activated, and the user cannot click the save button again until the recording process is completed. After the recording is finished, the user exits the form and returns to the main page of the error entry screen.
The user is informed about the successful completion of the process through snackbars.

Large Font Page

It is a screen with a responsive design that displays information about the vehicle and the unresolved errors on it.
It is the same screen but with a different presentation according to the operating conditions.

Defect Listing Page

It is a page where all relevant errors in the shift are listed.
Errors can be deleted and updated.
Errors can be sorted, filtered, and updated.
A large amount of data is efficiently displayed on a single page, allowing users to smoothly scroll through the information.

(🔝)

🤖 Features

Internationalization (i18n)

The project supports Turkish, English, German, French, and Russian languages, and it is suitable for adding more language support.
For language change, I have designed a switcher component using the Context API. By using the Context structure, I made all components accessible through a structure provided by parent components, instead of repeatedly rendering the pages. This made the application more efficient and manageable.
To improve the user experience, I stored the user's selected language preference in Locale Storage. This way, it is preserved even when the page is refreshed and can be accessed later on.

Multi-Language Virtual Keyboard

I added support for a virtual keyboard for users using touchscreen devices.
The virtual keyboard supports 6 languages: Turkish, Russian, Japanese, English, Czech, and French. Users can change the language by using the button right below the virtual keyboard.
It features large button designs to accommodate users wearing gloves.

The virtual keyboard dynamically changes to the numpad type based on the input type.

UI Blocking

UI blocking is a technique that prevents other actions from taking place in the user interface until a certain process is completed. This allows the user to observe the progress of the operation and successfully complete it. Therefore, in the error entry page, I used UI blocking to prevent the user from pressing other buttons repeatedly after saving an error, or to prevent consecutive form submissions during login processes.
UI Blocking used in the login page.

UI Blocking used in the defet list page.

(🔝)

UI blocking I used on the error login page.

Select Input Component

I added scroll up and down buttons to allow users using touchscreen devices to easily scroll through the values of the select input. This helps to alleviate the inconvenience of scrolling on a touchscreen.
All functions have been written from scratch. No ready-made packages were used.
When creating the style of the select input, I used the material ui package.

React Hooks

The reason for choosing React Hooks is that it allows for easier and more readable code. Writing React applications with functional components using React Hooks is easier and requires less code compared to class components.
In particular, managing states is easier with React Hooks. I can define states as variables, making state management more intuitive.
Another advantage is that it is easier to use lifecycle methods in components. With the useEffect() function, I was able to utilize lifecycle methods during the mount, update, and unmount phases.

(🔝)

Virtualized Table

A Virtualized Table is capable of efficiently handling a large amount of data. Virtualization helps to address performance issues by rendering only the visible portion of the table.
Users can smoothly scroll through the table without any lag or performance hiccups.
For the virtualized table, the material ui library's virtualized table package was used.

User inactive alert ⚠

If the user does not perform any action for 80 seconds on the error entry page, a disruptive alarm sound will play.
Similarly, on the large font page, if the user does not perform any action for 80 seconds, both an alarm sound will play and the background color will change to red.

For demonstration purposes, the interval has been set to 2 seconds.

screen-recording.1.webm

Appearance in large font page.

screen-recording.2.webm

Dynamic Tiles

Dynamic boxes can be created based on the coordinates obtained from the service.
I accomplished this task using the react-img-mapper package. This package allows for the creation of interactive image maps with dynamically positioned boxes.
If the boxes are blue, it means they transition to a sub-image. Similarly, the boxes on the sub-image are positioned based on the error coordinates.

Responsive

I made an effort to make the error entry and error listing pages as responsive as possible, although it can be challenging to adhere to a responsive design.
Especially on the large font page, I paid great attention to ensuring responsiveness and adapting to different screen sizes.

Ipad view of the login page.

404 Not Found

The purpose of this page is to provide users with accurate information in order to encourage them to stay on the website and improve its usability.

Dynamic Routes

The paths change dynamically based on the selected terminal from the terminal list.
The paths are modified step by step according to the data on which the operations will be performed.

Validation with Formic and Yup

When used together, Formik and Yup are utilized to ensure that form fields within Formik are correctly filled. Yup's validation schemas are used to validate the form data.
By using Formik and Yup together, defects in form operations can be prevented, and it helps to achieve more organized, accurate, and reliable data entry.

If the user leaves the input field empty on the login page, they will receive the following error message:

Sorting, Filtering and Updatable on the Defect Listing Page

When clicking on the column headers, sorting and filtering operations are successfully performed.
Sorting can be done based on the "Reported", "Body", and "Registration Number" columns. Filtering can be done based on the "Body" number.

Sorting:

Filtering:

Updatable:

(🔝)

📖 My Experiences and Difficulties

I faced several challenges throughout this project. I believe that with each commit, I gained new knowledge and skills.
One of the challenges I encountered was using Formik and Material UI libraries together, which was initially challenging for me. My knowledge of Material UI was limited at the beginning, but I learned and progressed along with this project. The Material UI documentation was sufficient for me during this process, and I found that Material UI was very helpful in terms of styling.
In particular, when implementing the virtual keyboard component and ensuring synchronization with the physical keyboard, I put in a lot of effort. I can say that the react-img-mapper library, which I used for the first time, was very helpful, thanks to the support provided in its GitHub repository. You can find solutions to many issues in the "Issues" section, and if you have a different problem, you can open a new issue.