noudadrichem/keycapsets.com

⌨︎Find your favorite Keycapsets! Made for love of mechanical keyboards, and the trouble of finding a suitable existing keycapset overview!

Keycapsets.com

Made out of love for mechanical keyboards, and the trouble of finding a suitable keycapset overview!

https://keycapsets.com

More about the project?

https://keycapsets.com/about

Development

To get started, clone the repository and run npm install && npm run dev:

• git clone [email protected]:noudadrichem/keycapsets.com.git
• npm install
• npm run dev

Note: If you are running on Windows run install --optional flag (i.e. npm install) which will skip installing fsevents.

keycapsets.com's Issues

Add keycapset availabillity status to single page set too.

We could simply use the same pill/tag thingy on the single pages aswell.

Require a linked Issue for PRs

1. Would it make sense for PRs to have an associated Issue ticket?

2. Should that ticket be approved and assigned to the person working on the feature?

Drop down menus not showing backgrounds in dark mode

After loading the testing site, all three drop down menus have no backgrounds.

Add filters to the URL.

E.g. we can now search sets via URL via ?search=blabla. We could also include filters in here like

?availability=gb&profile=cherry etc.

Contributing Guidelines + prettierrc

Guidelines

Would it benefit this project if there were explicit guidelines on how to contribute?

Here are the RoR guildelines as an example.

prettierrc

I don't want to create too many tickets but I also don't want to consolidate too many questions.

I've already noticed that PRs have inconsistencies with formatting. You might want to consider adding a prettier config with whatever rules you want.

You can also use eslint. That would be a little more effort but will give you more control.

It might also help if you add vscode project settings to the repo or at least to the CONTRIBUTING.md. You should note any conflicting rules that could exist in the developer's user settings.

Implement new keycapset card design.

To make the cards more explanatory we edited the design of the imageCard component. This is the new design:

where the color of the duration tags in different for in GB, awaiting GB and IC.

Persist active filter in client

Be able to persist the active filters in e.g. localStorage or a cookie.
Keep in mind that it's still an idea to put filters in the search URI.

Constant error trying to load keycap sets

When I click on certain sets (specifically Infinikey 808 Boom, GMK Red Devils, and possibly others I haven't tested yet), it keeps asking me to refresh while never loading the page.

(Also, I'm new to GitHub so someone tell me if I'm doing this wrong)

Repeating sets and missing sets when using Availability filters

Some sets appear multiple times when using the Availability filters and a majority of sets don't appear when using these filters. I have included pictures for each filter where I found an issue, all after I scrolled down as far as I could and gave ample time to load more sets. All pictures were taken from the test site, but I was able to reproduce all issues on the main site.

Interest Check:

Awaiting Groupbuy:

In Groupbuy:

Groupbuy Ended:

Favorites not Removable

By clicking on the heart again, you cannot remove favorites. I cannot see a different way that favorites could be removed, so I assume this was the intended method.

Fade-in animation on ImageCard

When scrolling down the page it's nice to have a fade-in animation instead of ImageCards that will pop-up.

Image links broken

The image links for Grand Prix and Sumi are broken. Haven't checked the others yet.

Going to the homepage when logged in and viewing single keycapset.

It would be nice to go to the home page to view the sets when logged in.
currently this can only be done by click on the logo.
I think it nice to have a menu item.

On favoriting the page shoots up to the top..

When I like a set the page shoots up to the top. This is very annoying and should be fixed.

Dark Mode Drop Menus Invisible [TESTING]

When on the test site and using dark mode, the drop down menus become invisible. This issue doesn't happen when you swap back to light mode. Also, the transition between dark and light mode feels too long and comes across as jarring.

GMK Terradrive has not ended

Group buy is live

Keyset Upload Validation Ideas

I saw #16 but this ticket is more about ideas for how to go forward with the feature.

• IMO there aren't enough keysets to where it would be a bother for a few ppl to manually review.

• You should implement google oauth at the very least and lock CREATE_KEYSET_MUTATION down to only registered users. It doesn't take too long to register using google and if a user doesn't have the time to take those few seconds then they're a bad actor, either intentionally or not.

• Your API should sanitize the uploaded URLs from the form, like websiteUrlValue or anything else which you directly render in anchor tags

• Form Validation will be a lot easier with a library like this, in fact your form components will be a lot more simple with that or formik, or any lib of your choosing. I don't think Next.js will have an issue with this tho I personally don't have much exp with SSR.

Dark mode option

A feature request from some people is to have a dark mode. This could be implemented by inverting the variable colours in the :root {} of the CSS.

Required reload on favorite page

When adding a set to my favoriets and then going to the favorite page i need to reload before the set shows up.

Move globalState to a hook

Currently, globalState is just a state object in index. index responsible for updating state, fetching new sets, and handling loading states. This is a lot, and confusing.

Proposed solution:
globalState should be a hook in and of itself.

using this hook would look like this:

const { globalState: {filteredKeysets) , setGlobalState, refetch } = useGlobalState()

I think it may be worthwhile to also expose a way to trigger a refetch, so that can happen as a result of the last item in the list being in the viewport.

This moves a lot of logic out of a component, and into a place where it can be extended for further filtering, fetching, and so forth.

Reddit login no longer works

Hello,

logging into keycapsets.com via Reddit no longer seems to work.

What I did

Go to keycapsets.com, click on Login and select Login via Reddit.

What I expected to happen

Be logged in to my keycapsets.com via Reddit.

What happened instead

After being redirected to reddit.com to allow keycapsets.com to connect to my Reddit account, the browser redirect to https://keycapsets.com/sign-up/reddit#access_token=[token_here]&token_type=bearer&state=kcs&expires_in=3600&scope=identity then hangs.

Trying to access keycapsets.com after the b0rked login attempt result in the following:

Additional info

• running on Firefox 84.0.2 on both Linux and Windows, haven't tried other browsers

Let me know if I can help debug this further. Thank you for creating keycapsets.com. 🎉
Cheers.

Bug where 'groupbuy ended' tag is one day to early.

GMK Houhai group buy hasn't ended.

GMK Houhai group buy will run 8/1 - 9/1/2021. You currently show it as "Groupbuy ended."

Remove 'type/ from URL routing

currently the profile of the keyset is shown in the URL like so https://keycapsets.com/*cherry/black-lotus* this needs to be refactored to be w/o the profile(type) in the URL.
So the result would just be : https://keycapsets.com/black-lotus.

We could encounter problems with this as there are still same sets for multiple profiles.

Let me know what you think.

Validation for new sets

there is already issues with people adding inappropriate sets, I wont post a pic but it would be wise to add some sort of validation on what people add.

Slideshow on page doesn't initialise correctly when loading the page.

All images appear on the left instead of in the slider. We use react-slick for the slider.

Preview of the issue here: https://jmp.sh/SWuawjt

Add a way to favorite a set on a single keycapset page.

I can't add a set to my favoriets when on a product page.
This would be nice to have.

PWA conversion

Convert the app into a PWA.

Users will be able to install the app on their devices for easier access and browsing while offline.

Remove automatic scrolling through renders

Sometimes it gets a little bit annoying when you are trying to look at a keycap set and it automatically scrolls to the next render

Filter by color

Just a suggestion. Would be nice for someone who wants a specific color way but doesn't know what set they need.

Ability to zoom images on a single keycapset page by clicking them.

Every <img> tag should be clickable to make it scale to 100vw. This would make previewing easier.

User account with owned sets, notifications for upcoming

This seems like an obvious step and might already be planned.

• Allow users to register, and add sets to a list of sets that they own
• Add a notification mechanism to notify users when a GB goes live, and is ~3 days before its end date

changing from keyboard type to multiple tags

Just an idea, keycap sets have many characteristics such as the profile, material, layouts variants, etc.
using these we can describe a keycap set using a list of words, like:

Royal Navy: [DSA, iso, ansi, ergodox, euro, french, plank]

Describing using few words the keycap set, AND making using this search tags on in the search query might help someone find the keycap set they are looking for.

thanks for your time.

Date not visible on I think last day

Show SVG illustration before an image is loaded.

Some images are quite big and this needs to be fixed, but before that I'd like to show an illustration or any other React component before the image is loaded. This way we give the user a bit more beauty in their waiting life! :D

Update GMK Stargaze

GMK Stargaze group buy is currently running: 7/3 thru 8/4/2021

Update GMK Diner

GMK Diner group buy will run 8/1 thru 9/1/2021

Update a set: GMK Art

GMK Art GB is running now: 7/9 thru 8/9/2021

Extend to include keyboards (potentially on a different domain)

I think the concentration on keysets is excellent and allows for very nice UI/UX options. However there is exactly the same issues with discoverability with boards and cases. This may already be in the works but it would be useful to have this convenience in finding keyboard group buys.

Id be willing to put up a separate domain and spin the site in that direction if that isnt something that the current maintainers are concerned with currently.

Keycap set upload hook with GeekHack Spy

I saw some discussions in #18 and had a quick chat with @noudadrichem on discord -- figured I would document some of my thoughts below:

Background:

• After stalking r/mk for some times, I noticed a lot of people (new comers and enthusiasts a like) still have trouble discovering new sets/keep up with the current status of a given keycap set.
• After stalking Keycap Designer discord, I noticed one of the most frequently asked questions is "[picture] is this set similar to any other sets?"
• After stalking GeekHack for a while, I noticed there are about a half dozen new ICs for keycap designs showing up every week, but it is a lot of work to filter through the forum to get what you need/stay on top of things.
• Keycapsets.com was created to help designers and consumers to discover ideas and existing sets, but a not up-to-date website (while still very very useful) is not going to solve the above problems.
• Crowd sourcing for sets upload was a good start but without moderators, this could lead to bad actors uploading undesirable contents.

Problem Statement:

• To implement a way to automatically/semi-automatically fetch new keycap sets info from reliable sources, and allow admins/moderators to edit a few details before publishing the new set.

Proposed Solution:

• Based on my observation, GeekHack is one of the most popular site for people to post their interest checks and group buy info.
• GeekHack Spy shows the latest posts/replies on the forum (and it looks like it can be filtered down to specific boards, e.g. https://geekhack.org/index.php?action=recenttopics&board=132.0)
• There are a few data points that can be fetched from GH Spy: topic, creator, created date, post url -- these data could be used for the initial entry point to the database (with post url as the key). IC/GB topic format are pretty standard, so it can be parsed out using some regex to retrieve the status (IC/GB), profile (GMK/ePBT/KAT/SA/etc.), and name of the set. The regex can also help to filter out not keycap related topics like IC/GB for keyboard/deskmat/switches. In case there are topics that did not follow the standard format and fall through, it can be manually added via some other means (not part of the scope of this issue).
• Once the initial record is created, the status of the record will be set to pending mod review, which allows mods to filter the database by this status to figure out what sets need to be looked at. Mods can then fill in more details for the set, such as (this part is based on the screenshot provided by noudadrichem): status (IC/GB/Post GB, can be pre-populated from GH Spy input), name (GH topic), website URL (GH url), designer name (GH creator), GB start/end date, cover image URL, description, vendors, material, brand, profile (parsed from GH topic), additional image urls for renders and kits.
• After the mods have filled in the details, the mods can publish the set by changing the status to published (btw all status names are just suggestions), in which the set is now viewable on the website to public.
• Whenever there's a new update/reply from GH, and the topic has changed, then the status of the corresponding set could be updated to be published with updates. Mods can filter by this status to cross check the current set in the database vs. the GH update, and adjust the info (adding vendors, kits, renders, GB date, etc.) as needed. Once the info is updated, the status can be changed back to published.

Nice to Have:

• When a GB post is made, it would be nice to search the existing data for similar name. If a similar name exists and the status of the record is in IC, then instead of creating a new record, it could update the status of the record to IC updated with GB which mods can filter and update the status info accordingly.