mariosts95/nihongo

A small app to help people learn basic japanese.

nihongo's Issues

Add Testing

Vitest

Description

To ensure that the code is working as expected and to catch any bugs early in the development process, we would like to add unit testing using Vitest.

Objective

• Add unit testing using Vitest
• Ensure all critical functionality is covered by unit tests
• Improve code quality by catching bugs early
• Increase confidence in the codebase

Steps to Implement

1. Install Vitest
2. Write unit tests for each critical functionality and edge cases
3. Integrate unit tests into the development workflow and continuous integration process
4. Ensure all new code has accompanying unit tests
5. Refactor existing code to make it more testable

Benefits

1. Improved code quality: Unit testing ensures that critical functionality is covered, and bugs are caught early in the development process.
2. Increased confidence: With unit testing, we can be more confident in our codebase and changes made to it.
3. Faster development: Unit testing helps to catch bugs early and reduce the time required for manual testing.

Acceptance Criteria

• Vitest is successfully installed
• Unit tests are written and cover all critical functionality and edge cases
• All new code has accompanying unit tests
• Existing code is refactored to make it more testable
• Unit tests are integrated into the development workflow and continuous integration process
• Code quality is improved, and confidence in the codebase is increased.

PWA

Create the app as PWA

Add Notification Snackbar

Add Notification Snackbar to the Project

Description

Our project currently does not have any notification system to inform users of events or errors. To provide a better user experience, we would like to add a notification snackbar that will display messages to the user.

Objective

• Add a notification snackbar
• Display messages to the user for events or errors
• Make the notification system configurable
• Improve the user experience

Steps to Implement

1. Choose a notification library and integrate it
2. Define the types of messages to display
3. Design and implement the notification snackbar component
4. Add code to display the notification snackbar for events or errors
5. Test the notification system with different scenarios

Benefits

1. Improved user experience: With a notification snackbar, users are informed of events or errors in a non-intrusive way.
2. Configurability: By making the notification system configurable, we can adapt it to different user needs and scenarios.
3. Reduced user confusion: With a notification snackbar, users can quickly and easily understand what is happening in the application.

Acceptance Criteria

• Notification library is successfully integrated
• The notification snackbar component is designed and implemented
• The notification snackbar displays messages for events or errors
• The notification system is configurable
• The user experience is improved, and user confusion is reduced.

Add text to speech

Useful links

• https://www.section.io/engineering-education/text-to-speech-in-javascript/
• https://www.assemblyai.com/blog/react-text-to-speech-simplified/
• https://www.npmjs.com/package/tts-react

Add Katakana

Add Storybook

Storybook

Objective

• Integrate Storybook
• Enable developers to preview and test UI components in isolation
• Improve the development workflow and reduce development time

Steps to Implement

1. Install Storybook
2. Create a configuration file for Storybook
3. Define stories for each UI component
4. Configure Storybook to work with our application's build system
5. Integrate Storybook into our development workflow

Benefits

1. Faster development time: Storybook helps developers to isolate and test components, which leads to quicker development cycles.
2. Improved quality: Storybook enables developers to catch UI issues earlier in the development process, which leads to a better end product.
3. Better collaboration: With Storybook, developers can easily share and preview components, making it easier to collaborate with other team members.

Acceptance Criteria

• Storybook is successfully integrated
• All UI components have their corresponding stories defined in Storybook
• Storybook is working in conjunction with our application's build system
• Developers are able to preview and test components in isolation using Storybook
• Development time is reduced, and the quality of the end product is improved.

Add i18n

React i18next

Description

Our project is currently available in only one language, which makes it difficult for users who speak other languages to use the application. To make our project accessible to a wider audience, we would like to add internationalization (i18n) support.

Objective

• Add i18n support
• Allow users to choose their preferred language
• Provide translations for all user-facing text
• Improve the user experience for non-native speakers
• Prepare the project for future language support

Steps to Implement

1. Choose an i18n library and integrate it into the project
2. Extract all user-facing text to translation files
3. Create translation files for all supported languages
4. Implement a language selection feature for users
5. Test the application with all supported languages

Benefits

1. Increased accessibility: Adding i18n support makes the application accessible to a wider audience, including non-native speakers.
2. Improved user experience: With i18n support, users can choose their preferred language and have all user-facing text translated automatically.
3. Future-proofing: Adding i18n support prepares the project for future language support.

Acceptance Criteria

• i18n library is successfully integrated
• All user-facing text is extracted to translation files
• Translation files are created for all supported languages
• Users can select their preferred language
• The application works correctly with all supported languages
• The user experience is improved, and the project is prepared for future language support.

Create tests

Create a test mechanism

Store data in a database

https://firebase.google.com/docs/database

Add MUI Theme

Add a theme and refactor components based on the theme.

MUI Theming

Remove absolute paths

Remove the "@" from imports and add relative paths for better indexing from the IDE

State Management

Maybe is a good idea to add a different state management. Recommendations:

• Redux Toolkit
• Jotai
• Zustand