DEV Community

Cover image for I created an easy way to browse & find Google books (today is my birthday 🎈)
Liyas Thomas
Liyas Thomas

Posted on • Updated on

I created an easy way to browse & find Google books (today is my birthday 🎈)

Books πŸ“š

Find books from Google Play Books

Feel free to contribute on GitHub

I was casually surfing online and saw an article about Google Books API. I read the docs, and decided to create a minimal, lightweight and beautiful web app to browse & find books using Google Books API.

That's why I created Books πŸ“š.

UI

Books is an open-source project which make use of Google Books API.

Some of its features are:

  • Search book by title, author, category, genre etc.

  • Minimal and elegant UI.

  • PWA support.

  • Dark mode. Can't live without it!

Library

Bonus: πŸŒ— I also added dark mode so that your eyes won't hurt during night!

Demo πŸš€

Feel free to contribute on GitHub


If you want a heads up on my next projects, or just want to chat about the web, life and happiness make sure to follow me @liyasthomas on Twitter πŸ’™. If any of my projects helped you please consider making a donation.

yep

Top comments (52)

Collapse
 
ahmedmusallam profile image
Ahmed Musallam

That's Awesome!

I got lost here as well: liyasthomas.github.io
Really cool work!

Could not help but notice a lot of UI similarities in your projects, do you use a certain UI library? or just re-use your own styles?

Collapse
 
liyasthomas profile image
Liyas Thomas

I currently don't use any 3rd party libraries. Just pure JavaScript, HTML & CSS. Of course I reuse most of my components, especially light/dark mode toggle, font stylings etc.

Collapse
 
ahmedmusallam profile image
Ahmed Musallam

I was looking at github.com/liyasthomas/books/blob/...

A lot of awesome things in there. and only 8KB unzipped or minified!

While inspecting the source I saw that

.category {
      height: 25vh;
}

Curious why you picked vh vs other units in this case?

I know users wont do this, but when shrinking the view-port height the title inside .category pops out :)

Thread Thread
 
liyasthomas profile image
Liyas Thomas

Nice you noticed that. What you explained is a bug/issue for sure.

But, sometimes some bugs are beautiful. At some use cases most of my apps would fail. But I don't mind that. Nothing is perfect. I'll certainly look into it and make it more better. Will add more bugs to fix later πŸ€ͺ

Thread Thread
 
ahmedmusallam profile image
Ahmed Musallam

hahaha. I was more curious about the vh and the use-case for using it than to report a bug that almost no one will notice.. lol 😁

Thread Thread
 
liyasthomas profile image
Liyas Thomas • Edited

As vh and vw changes with viewports, I like the ratio or say the proportion of UI more than giving a fixed unit. That's why I did that.

Thread Thread
 
ahmedmusallam profile image
Ahmed Musallam

I see, makes sense. thanks and keep on rockin' !

Collapse
 
piyukore06 profile image
Priyanka Kore

Hey Liyas,

A very happy birthday! Amazing app πŸ‘πŸ» looks wise and also functionally, all the book worms of the world thank you.

I see that you have chosen one of the most amazing color schemes. Is there any specific way you do that? any place you can check which colors look good together something like that?

Collapse
 
liyasthomas profile image
Liyas Thomas

Thanks for the appreciation ✨

Thanks for this question. See, I'm a self learnt and self sustaining developer. If I couldn't find a tool for my needs, I would make one. Which makes me a better learner.

Regarding color scheme:

  • I use a tool called Colorbook which I made myself for creating color combination schemes for UI. I wrote about it on DEV.to here. Colorbook is an easy & great tool for playing around different color combos and copying color codes for development. GitHub link. Check out my GitHub profile for more tools and resources.
Collapse
 
babrown93 profile image
Bill

Hey Liyas,

Happy birthday, have an awesome day!

I really like your project. Great design, performant, and user friendly. I'd love to try and contribute and I may do soon. Nice work on the banner generator too!

Collapse
 
liyasthomas profile image
Liyas Thomas

Thanks. I'm rocking. Follow my other projects on GitHub
You drink water, keep hydrated and stay healthy πŸ€Έβ€β™€οΈ

Collapse
 
myfrom profile image
Wiktor Olejniczak

Wow, The UI is really awesome! Everything feels so smooth and well-animated πŸ‘ I took a look at your other projects, and wow, they're really inspiring 🀩

The only thing that slightly falls behind here is the shadow animation, a bit laggy πŸ™

Oh, and happy birthday!

Collapse
 
liyasthomas profile image
Liyas Thomas

Thanks for the appreciation ✨
I'll fix all issues you've faced in next commit.

Collapse
 
shano profile image
Shane Dowling

Wow, looks great, you could turn this into a lightweight Goodreads alternative! Happy birthday!

Collapse
 
liyasthomas profile image
Liyas Thomas

I would love to see what future brings. Watch project on GitHub for updates.

Collapse
 
shano profile image
Shane Dowling

Done! :)

Collapse
 
abhigk profile image
Abhi

Wow! such a beautiful UI. What was the inspiration behind the UI design?

Collapse
 
liyasthomas profile image
Liyas Thomas

Maybe I spent so much time on Dribbble & Behance? Maybe I like minimalistic UI. Maybe I'm too lazy to come up with a new design at all. πŸ’β€β™‚οΈ who knows?

Collapse
 
kayisire profile image
Kevin G. Kayisire

Happy birthday, Unicorn.

Nice UI also, keep it up!

Collapse
 
liyasthomas profile image
Liyas Thomas

Always be yourself unless you can be an unicorn πŸ¦„
Then always be an unicorn πŸ¦„

Collapse
 
arsamsarabi profile image
Arsam Sarabi

Happy birthday! ☺️

Collapse
 
liyasthomas profile image
Liyas Thomas

Advanced birthday wishes for you too...! πŸŽˆβœ¨πŸŽ‰
Follow my other projects on GitHub

Collapse
 
thefern profile image
Fernando B πŸš€

Wow another great project! Happy Belated birthday!

Collapse
 
liyasthomas profile image
Liyas Thomas

Hi there my friend ✨
Glad you liked this. You should definitely check out my new tutorial on How to create your own custom URL shortener in 10 minutes for free & deploy to GitHub πŸš€

Collapse
 
dmahely profile image
Doaa Mahely

It's so pretty I love it πŸ₯°
Happy birthday!

Collapse
 
liyasthomas profile image
Liyas Thomas

Thank you. God bless you πŸ’«

Collapse
 
maybebored profile image
Mayuran

Well done Liyas, I just forked your repo. Planning to raise some improvements PRs. I believe we can both learn from each other.

Collapse
 
liyasthomas profile image
Liyas Thomas

Sure, I'm in. Follow my other projects on GitHub

Collapse
 
ryoka profile image
Ryoka

That's great! Happy birthday to you...

Collapse
 
liyasthomas profile image
Liyas Thomas

May you live healthy πŸ‹οΈβ€β™€οΈ
Follow my other projects on GitHub

Collapse
 
devictoribero profile image
Victor Ribero πŸ§˜πŸΌβ€β™‚οΈ

I like so much how it looks!

Collapse
 
liyasthomas profile image
Liyas Thomas

Glad you liked it. Check out my other projects on GitHub ✨

Collapse
 
cyril_ogoh profile image
ogoh cyril

Happy birthday

Collapse
 
liyasthomas profile image
Liyas Thomas

My warm wishes for your next birthday! πŸŽ‰βœ¨πŸŽˆ
Follow my other projects on GitHub

Collapse
 
am_pra_veen profile image
Praveen Kumar Saini

Hello Liyas.
Happy Birthday.

I love your project. I love the way you put everything and would happy to contribute to this.

Collapse
 
liyasthomas profile image
Liyas Thomas

Sharing is caring πŸ’š