As a huge Fortnite fan and a newbie web developer, I’ve always found it a bit frustrating that there wasn’t one place where I could find and track all the Fortnite skins. Every time a new skin drops, it’s a hunt across multiple sites, but I wanted something that would make it easier to explore and discover Fortnite cosmetics (and, it was a good project for a noob like me).
So, I built Skinzy.gg, a simple, user-friendly Fortnite skins database where players can discover, track, and explore all the skins, emotes, and cosmetics in one place.
The Tech Stack: Keeping it Simple
I kept the tech stack pretty simple. Here’s what I used:
- HTML/CSS: This is the foundation of the site. The layout is clean and straightforward, making sure users can easily navigate and explore the skins.
- JavaScript: This is where the magic happens. I’m using vanilla JavaScript to fetch data from Fortnite’s API and dynamically update the site. No page reloads, just smooth, real-time updates.
It’s nothing too crazy, but it’s just enough to deliver what Fortnite fans need without overcomplicating things.
The Challenge: Keeping Everything Up to Date
Fortnite skins drop constantly, and keeping track of them is a nightmare. The data needs to be fresh, so I used AJAX to pull data from the Fortnite API without needing a page reload. This makes sure that players always see the most recent skins when they visit the site.
Another thing I had to consider was caching. I didn’t want to keep making unnecessary API calls every time someone loaded the site, so I implemented a localStorage solution. This caches the data on the user’s browser, making things load faster and reducing the load on the API.
Searching and Filtering: Making It Easy to Find Stuff
One feature that I’m really proud of is the search and filter functionality. I wanted to make it easy for users to find exactly what they’re looking for — whether it’s a rare skin, a specific set, or the latest release.
I built this using basic JavaScript array methods like .filter(), .sort(), and .map(). These methods allow users to narrow down their searches based on rarity, release date, or even skin type. It’s all super dynamic, with no page reloads required, so users can quickly drill down to find the skin that’s just right for them.
Making It More Than Just a Database
I didn’t want Skinzy.gg to be just a cold, empty database. I wanted it to feel like a place where Fortnite fans could hang out, share their thoughts, and get involved. So I added a commenting system to every skin page where players can discuss their favorite skins, share tips, and talk about rare drops.
Right now, the commenting system is powered by a Node.js backend, so it’s pretty lightweight. I wanted to make sure that the main site stayed fast and responsive, but I also wanted some dynamic features, and this was the best way to achieve that.
What’s Next?
The core of Skinzy.gg is live, but I’ve got big plans for the future. I want to add features like:
- A user account system where players can track their owned skins.
- A wishlist feature so players can mark the skins they’re hoping to get.
- A marketplace for buying and selling rare skins (maybe with a partnership with Fortnite’s official marketplace).
If you’re a Fortnite player or developer, check out the site and let me know what you think. It’s still a work in progress, but I’m excited to see where it goes.
Lessons Learned
APIs are tricky: Even when the API is public, data isn’t always perfectly structured. There were a lot of moments where I had to clean and normalize the data before displaying it. It taught me a lot about working with external APIs and making sure everything is in the right format.
Design matters: The Fortnite community loves skins because of their visual appeal, so the site had to be just as visually appealing. I learned a lot about making designs that were both functional and aesthetic, while keeping things fast and responsive.
Mobile is a must: Fortnite is huge on mobile, so I made sure the site works smoothly on smaller screens. I focused a lot on responsive design and performance optimization to make sure mobile users had the best experience possible.
TL;DR
I built Skinzy.gg, a simple Fortnite skins database that lets players discover, track, and explore skins with an easy-to-use interface. The site is powered by HTML, CSS, and JavaScript, with real-time data pulled from the Fortnite API. There’s a lot more I want to do, like adding a wishlist and marketplace, but I’m excited to see where it goes!
Top comments (0)