Neko Teikoku

Next.js

Firebase

Styled-components

Playwright

A web application game that is meant to be a comfortable and cozy experience for users. Grow your empire by attracting other cats and feeding them food!

Project Brief

Neko Teikoku is a web application game that is meant to be a comfortable and cozy experience for users. Grow your empire by attracting other cats and feeding them food! Built with Firebase and integrates multiple apis to handle different and unique resources. Note: If an error occurs or if the application is running very slowly, it is most likely due to Firebase reaching the daily limit as we are using a spark plan. The problem Image for neko.

The Process

For Neko Teikoku, I was the main developer along with 2 designers/artists. We used axios to fetch from 2 different open sourced apis to build out our game's base information. Then creating JSON files to create items of what is a collectable item for users and then updated our firestore collections for each users based off what the user did in the application by collecting items within the app. Then as information updated, we used javascript to filter out each firestore collection and combine then filter through the JSONS to check for any matches and combine the information given from them. After users go through the application it updates automatically and there is a leaderboard to see the top users.

const generateCats = async (data, amountOfCats) => {
  let randomMeows = randomCats;
  for (let i = 0; i < amountOfCats; i++) {
    let randomCat = await selectRandomFromArray(data);
    await addCatData(randomCat);
    const x = generateRandomNumber(0, 100);
    let y;
    randomCat.img = await selectRandomFromArray(CatData);
    randomCat.x = x;
    if (x < 15 || x < 85) y = generateRandomNumber(0, 100);
    else if (x > 15 || x < 85) {
      let helper = generateRandomNumber(1, 2);
      if (helper === 1) y = generateRandomNumber(90, 100);
      if (helper === 2) y = generateRandomNumber(0, 15);
    }
    randomCat.y = y;
    let offering = await selectRandomFromArray(OfferingsData);
    offering.cat = await randomCat.breedName;
    offering.catImg = await randomCat.imgThumb;
    console.log(offering);
    await addUserOfferings(offering);
    randomMeows.push(randomCat);
  }
  const offerings = await fetchOfferings();
  const newCats = await fetchCats();
  let randomMeow = await selectRandomFromArray(catMeow[0]);
  setRandomCats(randomMeows);
  meow.current = await randomMeow;
  await meowSound();
  await updateUserData(newCats);
  setCurrentOfferings(offerings);
  await fetchLeaderboardUsers();
}

The Outcome

A challenge I faced, was the amount of react hooks needed on the project. At first, the main data that was shared throughout the application was done with useStates and passing them through props from component to component. Then we transitionined to using react context hooks and I fell in love with using them. It made passing through data much easier as we had components in components and would pass through props from component trees to components. This caused us to whenever we tried to change something we had to change more then 4 components at a time and was not time efficient at all. Another issue we have faced in the creation of the project, is the use of using only free and open sourced plans for our resources with APIs and databases and would constantly hit limits of both because of how much was updated of each use of the application. If the application takes a long amount of time to load, it is likely due to the limit being reached by our application. In the end, we were able to successfully build a fully functional web application and create an enjoyable and cozy experience for our users. The outcome Image for neko.