Front end
This project is for our final work in our Java Web class
The website is a sort of dictionary where information was gathered (quickly not professionally) and put together.
There is a list of countries and a page which it is possible to answer questions.
The questions page is composed of a component that displays it and, in the component, there is a verify button that tells you if you answered correctly or not. In the countries page there is two buttons on each country component, one of them brings you to a 'details' page with an interactive map and the others to the quiz page but with only questions that are for that specific country.
This project is based on React, a technology created by Meta.
It uses react router (https://reactrouter.com/en/main) As well as TimeAgo (https://github.com/nmn/react-timeago) and React Simple Maps (https://www.react-simple-maps.io/)
Spring Boot was used for the backend which can be seen here: (https://github.com/DylanBrass/CountriesWebsiteProject/blob/master/README.md)
All the important files :
For the router, I had to create the pages folder and all of these pages are linked with the index.js which the code ressembles this :
<BrowserRouter>
<Routes>
<Route path="/" element={<Layout />}>
<Route index element={<Home />} />
<Route path="Quiz" element={<Quiz />} />
<Route path="EditPage" element={<EditPage />} />
<Route path="Countries" element={<Countries />} />
<Route path="mapPage" element={<MapPage />} />
<Route path="CreateQuestion" element={<CreateQuestionPage />} />
<Route path="*" element={<NoPage />} />
</Route>
</Routes>
</BrowserRouter>The components folder contains the map library previously mentioned which reresents how I display my questions and my countries
The last one is more interesting because it is a fix that I needed because of the large amount of text I had. The component ScrollToTop is used to remedy the problem of starting in the middle of the page.
To run the project you simply need to download node module for this react app. And then start my backend code (we use intellij) and run it on port 8080. Since the package.json is still there you do not need to redownload the libraries used.
The main problem I encountered was trying to edit what country the question relates to, it is the only part of my project that I failed at. But I am convinced that with a bit more time I would have succeeded.
Other problems that were solved are :
I used this algorithm :
const getMultipleRandom = (arr, num) => {
const shuffled = [...arr].sort(() => 0.5 - Math.random());
return shuffled.slice(0, num);
}This sorts the array then randomises it
A weakness to this array shuffler is explained here : https://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array/18650169#18650169
But I still decided to use it because of it's simplicity and the realtive size of my project.
This is the algorithm I ended using :
const shuffle = (array) => {
if (verify == false) {
for (var i = array.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
var temp = array[i];
array[i] = array[j];
array[j] = temp;
}
}
return array;
}My if statement is to make sure that the question was not answered correcty otherwise this is a common shuffling algorithm for arrays
Here is the previously mentionned fix to the page rendering in the middle of my huge block of text
import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';
const ScrollToTop = ({ children }) => {
const { pathname } = useLocation();
useEffect(() => {
window.scrollTo(0, 0);
}, [pathname]);
return children || null;
};
export default ScrollToTop;The pages follow the same structure
If a page requires a certain component to be repeated it is created as a component, as we see with CountryDisplay and QuestionDisplay.
Otherwise everything is in the pages folder.
The exception to this is the libraries that require a lot of code such as the map, because it is quite big I decided to put it as a component for ease of reading the code and for modifying it.
ScrollToTop is a component, so it is created as such.
Index.js is used simply for routing and Home.jsx is set as my index so that when the page is loaded it's where the user starts.
The back end was done with spring boot and can be found in the link given above... We are using the H2 Database.
This page is simply to inform the user the goal and functions of this website
This is where the user answers questions, for now it's five question picked at random
Here is a example of the question block :
The questions are easy, but can be made much harder !
On mobile the questions look like this :
This is where the user can search and look at countries quick overview :
The countries each have their square :
The two buttons bring you to the quiz age that will only have question about that country and the first one brings you to the Map Page described below
On Mobile :
On desktop :
On mobile :
It is a simple form to not throw too much info at the user :
Even works on small screens or mobile !
On desktop :
On mobile :
