When finished the development of the project, update README with:

• How to download and use the project
• Badge with Travis CI state
• Development environment
• Languages and technologies used

The current folder organization that I have in the project is based on the recommended one that Z1 Digital gave me.

But it ended being kind of like a mess, and before approaching the testing issue #4, I've decided to refactor and reorganize the current folder structure to a new one.

The new one would follow the domain folder structure, how it works is explained very thoroughly in this article with other structures that are also used. However, instead of naming the folder domains, I'll call it 'pods' since its the original name used for this folder when they were first used in EmberJS. Here is an article and another article talking about them.

Maybe it can bee too much of a hassle for a small React project, but in this case, we're looking to do as a React project that could escalate into a big one.

Also, following the reorganization of the folder structure, some minor fixes, formatting, and refactoring will be done. So in the case of future enhancements made in the project, the refactorization would be minimal.

Though GitHub has plenty of gitignore templates, and I always use the Node gitignore template as a base, I like to make it more complete by using gitignore.io.

Usually using the Node + VSCode + Windows + macOS + Linux to generate it. This way is almost failsafe in case unintended files end uploaded in the repository folder.

Later, maybe the need to add more custom rules of the gitignore will appear. In that case, I will reopen this issue to add a comment with the changes added.

Make the necessary folders structure and several key empty files to have for a React project to be started. This way, from the beginning of the development of this project, everything will be more organized.

Though some renaming of reorganizing can be necessary for the future, most of the code will not change in structure.

Before adding the API and persistence functionality, the project needs other functionalities such as:

• a button that invokes a menu
• inside that menu, there are buttons to chose which kind of fact you want to generate
• when a button menu is pressed, a new text box appears on the main page
• another button that clears all text boxes in the main page

So this issue is mainly for making the menu functionality.

Now the web project is totally working, refactorized, and only needs testing to be done (as said in issue #4 ) to be marked as finished.

However, the UI is pretty basic and the UX has some issues. Thus the decision of enhancing more the UI and UX.

Need to make hooks that fetch the data from the API for:

• Categories
• Get a random fact from a selected category.

The fetching will be done by using React Query.

Add code coverage with JesterJS to the project, since is the one that I learned to use more.

Create some basic layout for the web. I'll try to make it responsive, but functionality goes first.

Some graphics or icons may be needed, in that case I'll use some open-source library for them.

Basic config files for:

• Node
• Webpack
• Typescript
• ESLint/Prettier
• CI with Travis

The state of the web must be persistent when refreshing the browser. I need to investigate how to aboard this subject, but I think I'll end using LocalStorage for this project.