cat-milk / Anime-Girls-Holding-Programming-Books

Anime Girls Holding Programming Books
https://cat-milk.github.io/Anime-Girls-Holding-Programming-Books/
19.03k stars 953 forks source link

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

Open asrvd opened 2 years ago

asrvd commented 2 years ago

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. image

asrvd commented 2 years ago

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 image

App image

asrvd commented 2 years ago

Todos:

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 commented 2 years ago

Looks great! I found a few bugs though:

  1. On dark mode browsers, the text on the landing page is black image
  2. The scrollbars and the image gallery is a bit wonky in terms of sizing, placement, etc: image
  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. image
asrvd commented 2 years ago

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: image 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 commented 2 years ago

@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 commented 2 years ago

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 commented 2 years ago

Scrollbar looks good :+1:

asrvd commented 2 years ago

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 commented 2 years ago

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

kotx commented 2 years ago

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

asrvd commented 2 years ago

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 commented 2 years ago

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

asrvd commented 2 years ago

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

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

asrvd commented 2 years ago

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

image

asrvd commented 2 years ago

So I guess I have fixed almost everything now,

List of changes I made:

image image

kotx commented 2 years ago

@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: image For some reason there's two scrollbars though. image The images also have weird spaces between them when the size difference is too big.

Overall looks good though, thanks for making this!

asrvd commented 2 years ago

@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: image For some reason there's two scrollbars though. image 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 commented 2 years ago

@kotx Icon alignment has been fixed now: asheeeshh/waifus-for-programmers@940bff1f5ae77e4bacd91147c96d8c4ac5adb783

asrvd commented 2 years ago

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 :)

image

kevinfengcs88 commented 2 years ago

This is epic.

marshallovski commented 2 years ago

React is shit lol

Asday commented 2 years ago

React is shit lol

Oh dude you fuckin' gottem bro.

asrvd commented 2 years ago

React is shit lol

better than using vanilla js for me

ccrsxx commented 2 years ago

@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 commented 2 years ago

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

image

(getting a better shorter domain for it soon)

sonigeez commented 1 year ago

LGTM

0xhenrique commented 1 year ago

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.