Diskeeper

• 

  Diskeeper Wireframes

• 

  Diskeeper Mockups

• 

  Confirmation of domain

Inspiration ˖⁺‧₊˚♡˚₊‧⁺˖

I tend to change my Discord layout a lot, but I don't have some of my old icons and layouts anymore. I want a way to view my old account header and profile pictures and download them for reuse or safe keeping.

What it does ˖⁺‧₊˚♡˚₊‧⁺˖

Are you an active Discord user? Do you like to update your profile layout to have different icons and headers/accent colors (like I do)? Lo and behold, the app that helps you keep track of your current and past layouts!

This app, incorporated with a plugin, saves all the layouts you store on Discord. This is verified by the Discord user API, which gives you the icon and header you are currently using. Discord doesn't store past layouts, but this app will, so long as the plugin is enabled. We use Firebase to store user info and Google Cloud's Cloud Storage to store each user's layout as it funnels in per call.

Here is a Mockup:

Here are the Wireframes:

How we built it ˖⁺‧₊˚♡˚₊‧⁺˖

It was built with ❤️, React Native And Figma.

Challenges we ran into ˖⁺‧₊˚♡˚₊‧⁺˖

Discord's user API is quite limited due to risk of RCE (remote code execution). We cannot POST a new user profile layout to Discord, but what we can do is GET the username, discriminator, avatar, banner and accent_color.

{
  "id": "80351110224678912",
  "username": "Nelly",
  "discriminator": "1337",
  "avatar": "8342729096ea3675442027381ff50dfe",
  "verified": true,
  "email": "nelly@discord.com",
  "flags": 64,
  "banner": "06c16474723fe537c283b8efa61a30c8",
  "accent_color": 16711680,
  "premium_type": 1,
  "public_flags": 64
}

This is a challenge because we must adhere to Discord's TOS; nor can we get additional info such as status and biography at this time.

Accomplishments that we're proud of ˖⁺‧₊˚♡˚₊‧⁺˖

I'm proud of expanding my knowledge of UX/UI and my usage of Figma.

What we learned ˖⁺‧₊˚♡˚₊‧⁺˖

I learned how to use Figma's utilities (variants tool, components tool, gradient tool, state and navigation tools). I learned how to install and build with React Native. I also learned how to conquer sleeping in the morning and working in at night, pfft.

What's next for Diskeeper ˖⁺‧₊˚♡˚₊‧⁺˖

Incorporate Discord's API, Firebase and Google Cloud's Cloud Storage! Furthermore, perhaps we can extend this to Twitter, which gives users a similar format (a profile picture and header)!

Built With

• figma
• react-native