Made a Frontend for repo using GitHub API, React and Chakra UI.

[asrvd]

I'm new to frontend dev, so don't mind the design, made it in around 8 hours. Would definitely improve the UI, contributions are most welcome :)
Site: https://waifus-for-programmers.vercel.app/
Repo Link: https://github.com/asheeeshh/waifus-for-programmers

edit: repo was rewrote using nextjs and tailwind css

Please let me know where can I improve.

[asrvd]

Update: I worked on the UI a bit more and now the app has a separate landing page, and some UI related bugs have been fixed.

Home

App

[asrvd]

Todos:

• Make Images popup on click (using modals).
• Add something like search bar, to let users search a particular anime girl after choosing a language.

I won't be too active on this project but I'll try to keep working, I have some exams next month so need to study 😔

[kotx]

Looks great! I found a few bugs though:

1. On dark mode browsers, the text on the landing page is black
   
2. The scrollbars and the image gallery is a bit wonky in terms of sizing, placement, etc:
   
3. The page is initially empty, which can be a bit confusing- there should be a default selection to display all images, or have a placeholder that tells the user to pick a language.
   

[asrvd]

Thanks for letting me know @kotx :)

I'm unsure about why the first bug is happening, but maybe it's because of chakra ui's global styles, I'll try to fix it today only.

About scrollbars, I'm planning to style them something like this:

Let me know if it would be better than the default one.

About the third one, I was thinking of this even myself, I'm thinking of just making it load images of a particular language by default, will this work?

[asrvd]

@cat-milk
I was thinking that we can make an organization too and it will have all the web viewer(s), api(s) and api wrappers and the main repo of course. It will also remove the necessity to merge the project with this one, people can just ask you and add their projects to the organization.

[SoftwareGuy]

The question I would ask is would it be worth the hassle/effort though? When you say "add their projects", can you please elaborate?

[kotx]

Scrollbar looks good 👍

[asrvd]

The question I would ask is would it be worth the hassle/effort though? When you say "add their projects", can you please elaborate?

What I'm trying to say is having an organization will be much more cleaner and organized rather than trying to merge them in the main repo or keeping them separate, Not so sure if this is a good idea, but can you explain what do you mean by "worth the hassle/effort"?

[SoftwareGuy]

What I meant by my comment is what your proposing worth it in the long run?
How would it be cleaner/organized?

[kotx]

I don't see a significant difference in people owning their own repos as opposed to some org owning it.

[asrvd]

What I meant by my comment is what your proposing worth it in the long run? How would it be cleaner/organized?

people would be able to find all the projects related to this repo in a single place? 🤔

[kotx]

What's wrong with a list of them in the README?

[asrvd]

What's wrong with a list of them in the README?

nothing's wrong with it, this could work too.

[asrvd]

@kotx
I think this is fixed now, can you check again?

[asrvd]

So I guess I have fixed almost everything now,

List of changes I made:

• Probably fixed the default browser theme bug.
• Changed the scrollbar style, it looks good now.
• On opening the app, it shows the images of Rust Language by default.
• Images popup on click, containing image name, and an option to download the image. (Thanks to this amazing library)

[kotx]

@kotx I think this is fixed now, can you check again?

Yup, looks much better, thanks!

Sorry to bug you again, but the image viewer's icons don't seem to be aligned with the image title and slightly offscreen:

For some reason there's two scrollbars though.

The images also have weird spaces between them when the size difference is too big.

Overall looks good though, thanks for making this!

[asrvd]

@kotx I think this is fixed now, can you check again?

Yup, looks much better, thanks!

Sorry to bug you again, but the image viewer's icons don't seem to be aligned with the image title and slightly offscreen: For some reason there's two scrollbars though. The images also have weird spaces between them when the size difference is too big.

Overall looks good though, thanks for making this!

Yes, their are 2 scrollbars actually, one is for body and another is for the grid, because the grid was overflowing without adding the scroll.
About weird spacing between images, I can actually solve it by wrapping them inside divs but the thing is all the images have different sizes so forcing them to have the same resolution may cause them to get distorted, it wouldn't look good ig.
I'll just check if I can fix the icon alignment and let you know.

Thanks :)

[asrvd]

@kotx
Icon alignment has been fixed now: asrvd/waifus-for-programmers@940bff1

[asrvd]

The UI is finally done now, I added the search bar and it's working quite fine, please let me know if you come across any bug :)

[kevinfengcs88]

This is epic.

[marshallovski]

React is shit lol

[Asday]

React is shit lol

Oh dude you fuckin' gottem bro.

[asrvd]

React is shit lol

better than using vanilla js for me

[ccrsxx]

@marshallovski Tf you're talking about, vanilla is trash if you're building a website, you'll end up making your own shitty javascript framework if you use vanilla lol.

[asrvd]

update: rewrote the whole app using nextjs (much faster and better)

(getting a better shorter domain for it soon)

[sonigeez]

LGTM

[henrique-marques-vsoft]

React is shit lol

React nowadays is pretty fast, you can make it as faster as vanilla Javascript most of the time. Not only React, pretty much all of the modern frameworks such as vue and svelte are pretty fast as well. I really don't see why people hate React so much.