Every gamer has been there: you're getting into gaming, and all your friends say that the mouse is the most important part of your experience. But you're not sure what to get, and it's hard to compare mice when most retailers don't have filters for things like battery life, number of programmable buttons, and whether or not the mouse has RGB-goodness. MouseRank collects information from mouse manufacturers to

What it does

See a listing of various manufacturers' gaming mice, and filter by every spec imaginable. MouseRank lets you filter by the following mouse properties:

  1. Name
  2. Physical properties (Length, width, depth, weight, cable length, handedness)
  3. Sensor properties (sensor name, dpi/cpi, max acceleration, max speed)
  4. Wireless properties (rgb-on/average battery life, rgb-off/max battery life)
  5. Whether the mouse is RGB
  6. How many esports players use the mouse

How we built it

MouseRank is a fullstack app, but we cut out the backend. Our scrapers process webpages into json, which are then parsed and uploaded to our MongoDB Atlas database. Since our frontend doesn't need to modify anything on the backend, we rolled database access into the frontend with read-only credentials.

Challenges we ran into

Beginners at Next.js

This was our first time working with Next.js, and there were some differences to React that we weren't expecting.

Product page inconsistencies

Many manufacturers had product pages that didn't follow the exact same format, so our parsers had to be pretty flexible to deal with that. Razer's website bested us in the end, with boolean values inserted in to specification tables in weird places.

Accomplishments that I'm proud of

Even though our frontend isn't as functional as we would like, we like the layout and the material design we were able to implement.

What we learned

Stick with a known web framework, or practice with any new ones ahead of time.

What's next for MouseRank

More manufacturer scrapers

We were only able to work on scrapers for Logitech, HyperX, and Steelseries listings in the span of this hackathon. There are tons of more mice out there, and more choice for gamers is better!

More Frontend dev

This was our first time working with Next.js, and it definitely shows. With a lot more elbow grease we could get the slick gamer aesthetic that people are looking for. Every website needs a dark theme!

Built With

Share this project: