Building a Mortal Kombat Website

Akurunwa Nnamdi — Tue, 10 Jan 2023 09:50:59 +0000

In an attempt to put into practice, the react lessons taught by Edwin Maye of the AltSchool Africa, I built a website that gives a brief insight to the Mortal Kombat video game.
This website implements the following react elements:

React Router
Nested Routes
404 page and
Navigation Menu

I began by installing my react app with npx create-react-app AltSchool-react-examination using my git bash in my local machine.

I started by creating the various necessary components needed to setup the website. This is how my home page looks like:

This is the code for my homepage on VSCode

With a couple of hours spent in youtube and w3school research, I was able to design the home page that way.

THE ABOUT PAGE

This is the code for my About Page from VSCode

The entire content of the About page was lifted from https://www.complex.com/pop-culture/mortal-kombat-video-games-ranked/.

Using Nested Routes, I am able to switch between the Home page menu and the About page menu.

USERS

This was intended to list the users that have accounts in the website.

Characters

This shows the list of Characters in the Mortal Kombat game.
This was made possible by applying the principles of Pagination.

Using Pagination, I am able to toggle between the characters of the video game by clicking the "Next" and "Previous" buttons respectively.

This is the code from VSCode

404 Error Page

In a situation where a wrong URL is initiated or the URL is misspelt, the following error message pops up.

GitHub Repositories

2nd Semester Exam: https://github.com/nnamdikurus/AltSchool-2nd-Semester-Exam

Live Links

https://assignment-2.nnamdikurus.repl.co/