All solutions

Simple API handling solution

The responsiveness is a mess but everything else works completely fine. Added a few functionalities. Can switch between game modes and can clear scores.

I've refrained from using react-router-dom or anything that could help in rendering pages or routes. Instead, I wrote my code to render different pages using the optional rendering method.

import { useState } from "react";
import MainPage from "./MainPage";
import DetailPage from "./DetailPage";

function App () {

const [ isDetailPageActive, setIsDetailPageActive ] = useState(false);

return (
<div>
{isDetailPageActive ? <MainPage /> : <DetailPage />}
</div>
)

}

export default App;

Obviously, this is a dumbed-down version of it, but basically, both MainPage and DetailPage components can control which of which should be rendered. While I did manage to make it work, I would still love to learn how to do it properly. Where should I start? And please if possible, I'd like to stay away from react-router-dom as it was too confusing for me.

Couldn't implement a system for email and number validation. The project is incomplete in that regard, but still submitting anyway to look hopefully get feedback. Also didn't use proper libraries to ensure an easier way of rerouting from page to page. Please do suggest some useful libraries that I can use for a validation system and a routing library. If possible, do suggest anything other than react-router-dom.