This is a fullstack version of my other repo acnhTrackingTools.
My partner and I love to play Animal Crossing together every morning. Recently we decided to collect all of the songs in the game, only to find that there are over 100! We got tired of running to the house everyday to check our stereos so I made this app to help us keep track of what we have!
Over time, we started finding it difficult to keep track of other things, so now this tool has been upgraded to include Fossils and Art as well. Media Queries and more collections to come! I've only focused on mobile layout so far because that is the only way that we use this.
I have added a Guest Login feature for anyone that just wants to take a look without making an account!
I am currently testing this app on several different hosting sites since Heroku has announced their plans to drop their free hosting.
Be sure to add that lovely star 😀
Tech used: HTML, CSS, JavaScript, Node, Express, MongoDB
I have added a lot of features to this over time. It started as simple text and checkboxes. It now has images and nicer formatting.
I originally started by using the Animal Crossing API to create new DOM elements with checkboxes. When checked, the data is kept in local storage. The songs from the newest update were not in the API, so I created a separate factory and manually copied the links from Nookipedia.
Each tab was also a separate webpage.
I felt that this was not the best approach for progressive rendering and it could be a bit slow. I hard coded the HTML for everything and put everything on the same page. This allows for the site to load instantly.
I then took the time to build out an API myself. This allowed for me to include loops in my EJS and therefore was able to cut out 941 lines of hard coded HTML!
Every project is a lesson learned in CSS!
I also became more comfortable with navigating MVC architecture.
Currently this project is still a WIP.
I plan to add Google Auth as a login option.
I need to add a "Forgot Password" feature. That will probobly require some kind of email verification. Google Auth is a higher priority.
This is being built using Mobile First ideology. I will be updating this with media queries for landscape and larger screen sizes.
~~The CSS needs work on the landing, login and signup pages. ~~
I plan to build an API with all of the collection information.
Plan to reduce the image sizes for faster loading
Will be replacing the hard coded HTML with more ejs loops using the new API.
Will add other collections, such as clothing, fish, bugs, and more.
Also check out other projects of mine like this one!:
npm install
- Create a
.envfile, in your root folder, and add the following as akey: valuepair- PORT = 2121 (can be any port example: 3000)
- DB_STRING = your database URI