Feature Creep 2026, 09 - A Mental Math Trainer - Debugging the Frontend

In short: I when I ran the app, it displayed a blank screen, and my browser kept telling me to enable javascript. I don't know where that came from, because frankly, I had javascript enabled in my config, but I figured I might as well start building the front-end, since I wasn't going to display a rotating ReactJS logo anyways.

Generally, the front-end will have two states:

• Having a problem displayed
• and feedback on a solution

Since it's still a mini-app, a lot of it can go directly into the App() function. I'll be working primarily with forms that are present on the screen, and mutate the button according to the application state. I didn't want to bother with the forms yet, but having a single unstyled button on the top left of the screen will at least tell me if I've connected all the parts correctly. I tried back and forth a bit, and came out with exactly that state of the front-end, with this App() function:

function App() {
    const [posts, setPosts] = useState([]);                                                                                                                                                                                      
    var problem = null;
    var solveAttempt = false;
    
    // problem = GetProblem();                                                
    // setPosts(problem);                                                                                                                                                                     
    
    // TODO: Get Form Data on Button / Keybind ENTER, send, then get result, change button.
    // After...?

    if (solveAttempt) {                                            
        return (    
            <>  
                <div>Under Construction</div>                                      
                <div>
                    <button onClick={() => submitSolution}>Submit</button>      
                </div>
            </>         
        ); 
    } else {
        return (                    
            <>  
                <div>
                    <button>Next Problem</button>                                       
                </div>
            </>         
        );                
    }                        
}
export default App;

As it is, calling the GetProblem() function as I did here will constantly fire the code and send render requests, which is kind of odd behavior, but I can easily move that call into function calls, later, when I figured out the way to get form-data.

---

On an unrelated note, I also decided I want to try to put all my hacky bash scripts I produce into their own repo as well, accompanied with a setup file that will set all the directory structures. It's probably the best option I have for making sure my setup survives me moving devices, which, considering the hinge of my laptop is moving when I type, will be sometime this year. I called the repo in question "laziness_enablers", because really, that's what it does. I started with a script to open all the books I'm currently reading in that machine, which I will have to remember to place in some directory. With it, comes the first setup variable of exactly that directory. I want to immediately avoid overwriting someone else's system variables, so all of the ones established in the setup_file should come with a prefix. I'm using my username for it, but that should probably be modifiable as well, I guess? The setup script only needs to run once, I guess, so I can prompt for user input, and then create some system variables kinda like

read USR_PREFIX
${USR_PREFIX}_SOME_PATH_VAR=some/path/var

I used to clutter up my /bin directory with my scripts, which was fine, because frankly, my naming convention is both uncatchy and terrible, so I never ran into conflicts. It's a good way to break things though, so I guess I should just add the actual project directory to the PATH. I'm not going to bother making this work on anything but linux distributions, because the scripts probably won't work anyways. This does mean that my project structure will have to save the bash scripts into their own sub-directory, or I'll have the setup script as part of the normal commands, and I wouldn't want that.

laziness_enablers
|- setup.sh
|- scripts
   |- some_script.sh