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.
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
- Getting Started
- Pages
- Features
- My Experiences and Difficulties
- Color Reference
- Browser Support
- Contact
- Acknowledgements
- License
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
(π)
This project uses Npm as the package manager.
npm install npm@latest -gInstall my-project with npm
npm install my-project
cd my-projectTo run tests, run the following command.
npm testClone the project
git clone https://github.com/Metecode/TOYOTA-32bit-project.gitGo to the project directory
cd my-projectInstall dependencies
npm installStart the server
npm startBefore 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.
(π)
- 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.
- 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.
- 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.
- 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.
- 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.
(π)
- 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.
- 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 blockingis 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 usedUI blockingto prevent the user from pressing other buttons repeatedly after saving an error, or to prevent consecutive form submissions during login processes.UI Blockingused in the login page.
UI Blockingused in the defet list page.
(π)
UI blockingI used on the error login page.
- 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 uipackage.
- The reason for choosing
React Hooksis 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.
(π)
- A
Virtualized Tableis 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 uilibrary's virtualized table package was used.
- 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 boxes can be created based on the coordinates obtained from the service.
- I accomplished this task using the
react-img-mapperpackage. 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.
- 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.
- 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.
- 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.
- 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:
- 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:
(π)
- 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 UIlibraries together, which was initially challenging for me. My knowledge ofMaterial UIwas limited at the beginning, but I learned and progressed along with this project. TheMaterial UIdocumentation was sufficient for me during this process, and I found thatMaterial UIwas 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-mapperlibrary, 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.
(π)
- This is the color palette I used in the project.
| Color | Hex |
|---|---|
| Primary Color | |
| Secondary Color | |
| Accent Color | |
| Light Color |
 Chrome |
 Internet Explorer |
 Edge |
 Safari |
 Firefox |
|---|---|---|---|---|
| Yes | 11+ | Yes | Yes | Yes |
(π)
- İsmail Mete Uçar - [email protected] - [email protected]
- Project Link: https://github.com/Metecode/TOYOTA-32bit-project.git
Useful resources and documents that I used in my project.
- StackOverFlow
- React
- Tayfun Erbilen
- Mozilla
- Shields.io
- Awesome README
- Emoji Cheat Sheet
- Readme Template
This software is licensed under the MIT © İsmail Mete Uçar.