I had to submit a project as my exam at AltSchool Africa in November 2022. We were given an array of projects to pick from and the project I chose required me to:

i. set up backend pagination using randomuser.me paginated API URLs.

ii. show the necessary navigation, it's disabled and accessibility states

iii. set up SEO implementation for each page, with a navigation menu at the top of each page.

iv. implement error boundary and provide a page to test it, a 404 error page

v. set up firebase hosting authentication using Google's authentication method.

For this project, I used React.js; a JavaScript framework, for the client-side coding, tailwind.css; a CSS framework, for styling my code, and Firebase; a tool that helps in building and shipping products on android, iOS and the web, to host the project.

I started by running the command npx create-react-app exam-project in my VS Code terminal to install the necessary dependencies required to create a react app. I then installed react-router with the command npm install react-router-dom@6.

I proceeded to build the UI of necessary pages and fetched data from the randomuser.me using JavaScript's async function

const getData = async (page) => {
    setIsLoading(true);
    const { data } = await axios.get(
      `https://randomuser.me/api/?results=10&page=${page}`
    );

    const details = data.results;

    if (page > 1 || details.length > 0) {
      setUsers((prev) => [...prev, ...details]);
    } else {
      setUsers(details);
    }
    setIsLoading(false);
  };

I proceeded to display the fetched data on the team page, I also added a lazy loader to keep the page from being blank in the case of a poor network by encasing the children in the user.js page in a <Suspense></Suspense> tag.

I implemented the pagination with a previous and next button at the bottom of the team page, to enable easy navigation from the beginning of the page to the end.

export const UsersFooter = ({
  pageNumber,
  onClickNextPage,
  onClickPreviousPage,
  hasNextPage,
  hasPreviousPage,
}) => {
  return (
    <div className="footer">
      {hasPreviousPage ? (
        <button className="prev-btn mr-8" onClick={onClickPreviousPage}>
          Previous
        </button>
      ) : null}
      {hasNextPage ? (
        <button className="nxt-btn" onClick={onClickNextPage}>
          Next
        </button>
      ) : null}
    </div>
  );
};

Next came the error boundary implementation, I installed the error boundary dependency with the command npm install --save react-error-boundary in my terminal and then created a fallback component that would be displayed should the app run into an error.

export class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // You can also log the error to an error reporting service
    console.log("Logging", error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return <ServerError />;
    }

    return (
      <>
        <Navbar />
        <p
          className="text-2xl text-center"
          style={{ marginTop: "20%", color: "#A2D2FF" }}
        >
          No Error
        </p>
        {this.props.children}
      </>
    );
  }
}

SEO implementation was done easily by installing the react helmet dependency with the command npm install -save react-helmet and importing into the pages of the app.

I added Google authentication and email sign-in method with Firebase and my project was ready to be hosted, so I headed to the Firebase console to start hosting it. The documentation helped with the steps involved to create an app and host it. After installing the necessary dependencies and putting certain codes in their respective files, I was ready to deploy my app. I initiated a build sequence that readied my code for production with the command npm run build and deployed it with the firebase deploy.

Voila, my app was live and accessible to anyone who'd like to see it at D_C.

Thank you for reading.