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

Discussion (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 Author

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 Author

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 Author • Edited on

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 Author

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 Author

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 Author

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 Author

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 Author

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 Author

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 Author

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 Author

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 Author

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 Author

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 Author

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 Author

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 Author

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 Author

Sharing is caring πŸ’š

Collapse
pavanbawdane profile image
Pavan Bawdane

That's an awesome design Liyas. I looked at your Github projects. They are phenomenal.

Collapse
liyasthomas profile image
Liyas Thomas Author

Your words are inspiring. I promise I'll do more projects and write about it here more frequently πŸ’«

Collapse
charliegabriella profile image
Charlot

This is so cool!

Collapse
liyasthomas profile image
Liyas Thomas Author

Thank you ❀️
You can find the source code of the project in my GitHub. May that help/inspire you.

Collapse
valentinogagliardi profile image
Valentino Gagliardi

Happy birthday then!

Collapse
liyasthomas profile image
Liyas Thomas Author

God bless you. Follow my other projects on GitHub

Collapse
thisisguevara profile image
Luis Rey

Hi, you did a great job! Happy birthday btw (I know, your birthday is not today).
Are you using the free endpoint without any API key? Or are you using an API key with the 1000 free request per day?

Collapse
liyasthomas profile image
Liyas Thomas Author • Edited on

Glad you liked it!
I use free endpoint without API key

You might want to checkout my other posts or my latest project postwoman.io github.com/liyasthomas/postwoman

Collapse
motss profile image
Rong Sen Ng • Edited on

TLDR; Happy Birthday to you!!! πŸŽ‰πŸŽ‚πŸŽŠ

BTW some of the Books links are pointing to the wrong site but that's an awesome site.

Collapse
liyasthomas profile image
Liyas Thomas Author

Thanks. You'll shine ✨

Issue has been identified, will look into it ASAP.

Collapse
adam_cyclones profile image
Adam Crockett

Love that UI!

Collapse
liyasthomas profile image
Liyas Thomas Author

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

Collapse
ganeshmani profile image
GaneshMani

Great Site. BTW Happy birthday

Collapse
liyasthomas profile image
Liyas Thomas Author

Thanks.

Collapse
lauragift21 profile image
Gift Egwuenu

Happy Birthday πŸŽ‰ Love the design!

Collapse
liyasthomas profile image
Liyas Thomas Author

Glad you liked it. Follow on GitHub for more updates and future projects.