Animal Crossing Villager Lister 2.0

Upgrading a personal project using interesting (new) webtechnologies!

Comment

Animal Crossing Villager Lister 2.0

I love the web and I've been keeping up on the latest developments, articles, tips, tricks, tools, etc. online. There are so many different new and upcoming things in web development that really interest me and that I've always wanted to try out. For Exploration Days, I'd like to (make an attempt to) take a relatively old personal project of mine and upgrade it with some of these web-things.

What is Animal Crossing Villager Lister?

It's this!

This project is a fairly simple free tool for creating lists of your favorite villagers from Nintendo's Animal Crossing games. You can easily search all existing villagers, get a quick overview about their personality, birthday, favorite coffee, etc. and keep track of them by adding them to lists.

What I Wanna Do

Definitely:

  • Build the website with a simple web bundler, Parcel.
  • Refactor the JavaScript code to TypeScript.
  • Implement integration tests with Cypress.
  • Overhaul the CSS & HTML to make it mobile-friendly with CSS Grid.
  • Convert the website into a PWA.

Maybe:

Why I Wanna Do It

  • Parcel: This website was purposefully made without a framework like Angular in mind. I want to show that you don't necessarily need a framework to create something for the web.
  • TypeScript: Having a background in Java and working with Angular has made me fallen in love with TypeScript and I definitely want to apply that to this project.
  • Cypress: Overhauling this project is going to introduce breaking changes, having automatic tests is definitely going to help me make sure my project works how I'd like it to.
  • CSS Grid: This might be the most important part of this project. The current version collects Google Analytics data and it has become very clear that most people use my website via their mobile phone, which I did absolutely not have in mind when setting up the design and CSS.
  • PWA: Building off of the previous todo item; it would be great and useful if people could use this website as if it were a smartphone app and offline too.

Built With

Share this project:

Updates