https://github.com/dracula27/readtrakr

A personal library app to keep track of books. Integrates with Open Library's APIs for book data.
https://github.com/dracula27/readtrakr

100devs api css-flexbox css-grid css3 fetch-api html-css-javascript html5 javascript js json open-library-api

Last synced: 3 months ago
JSON representation

A personal library app to keep track of books. Integrates with Open Library's APIs for book data.

• Host: GitHub
• URL: https://github.com/dracula27/readtrakr
• Owner: DrAcula27
• Created: 2024-06-12T00:49:14.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-06-12T02:50:14.000Z (over 1 year ago)
• Last Synced: 2025-01-18T05:28:35.054Z (about 1 year ago)
• Topics: 100devs, api, css-flexbox, css-grid, css3, fetch-api, html-css-javascript, html5, javascript, js, json, open-library-api
• Language: CSS
• Homepage: https://dracula27.github.io/readTrakr/
• Size: 868 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          









  

    

  


  
ReadTrakr


  


    Search for and add books to your personal library!

    


    View Demo

  



  Table of Contents

  


    


      About The Project

      


        
Built With

      

    

    
Usage

    
Optimizations

    
Lessons Learned

    
Contact

    
Acknowledgments

  


## About The Project



    

      

    



Keep track of every book you have read with this simple app! Search for a book by title, author, or ISBN and add it to your own personal library.

Bonus: it is service-agnostic! No matter how you read your books (iBooks, Kindle, real-life physical books, etc.) you can log all your reading progress here.

(back to top)


### Built With

- [![HTML5](https://camo.githubusercontent.com/47e36c9392fe351ab98a0324ca2cb710782731d5a56f71ffe7c68130a1ddc34f/68747470733a2f2f696d672e736869656c64732e696f2f7374617469632f76313f6c6162656c3d253743266d6573736167653d48544d4c3526636f6c6f723d323335353566267374796c653d706c6173746963266c6f676f3d68746d6c35)](https://html.spec.whatwg.org/)

- [![CSS3](https://camo.githubusercontent.com/de7f9b7e6e26494153157774db679bba3320e333f8279e98986893d490293732/68747470733a2f2f696d672e736869656c64732e696f2f7374617469632f76313f6c6162656c3d253743266d6573736167653d4353533326636f6c6f723d323835663635267374796c653d706c6173746963266c6f676f3d63737333)](https://www.w3.org/Style/CSS/#specs)

- [![JavaScript](https://camo.githubusercontent.com/201c697f87bb2a25af48ccc954f0a3c27409421b3e887b7b8e486222e6c1c6b8/68747470733a2f2f696d672e736869656c64732e696f2f7374617469632f76313f6c6162656c3d253743266d6573736167653d4a41564153435249505426636f6c6f723d336337663564267374796c653d706c6173746963266c6f676f3d6a617661736372697074)](https://tc39.es/ecma262/)

(back to top)


## Usage

Type the title, author, or ISBN of a book you'd like to add to your library and either type the `Enter` key or click the `Search` button to display the book results.

- Click the `Add to Library` button to add your book to your library.

- The book will stay in your library even if you close your browser!

- If you decide you no longer want a book in your library, click the `Remove from Library` button at the bottom of the book's card in the 'My Library' section.

(back to top)


## Optimizations

This project can be improved by:

- [ ] Refactoring the code to account for errors fetching data,

- [ ] Replacing the alert with more custom functionality when telling the user a book is already in their library,

- [ ] Adding a `Clear Search Results` button,

- [x] Ensuring all book cover images are the same size,

- [ ] Adding a confirmation modal when a user clicks the `Remove from Library` button on a book,

- [ ] Adding a loading icon while the fetch is in progress.

(back to top)


## Lessons Learned

- **API Integration.** When getting the data from the Open Library API, I learned how to use `fetch` to get `JSON` data from an external source and use the results of one query to make another query for getting the book covers.

- **Data Manipulation.** Once I had the data from the Open Library API, I learned how to transform that data into a format I needed for the project.

(back to top)


## Contact

Danielle Andrews - [@DrAcula_codes](https://twitter.com/DrAcula_codes 'Twitter/X') - [daniellerandrews](https://www.linkedin.com/in/daniellerandrews 'LinkedIn') - danielle.andrews.dev@icloud.com

Project Link: [https://github.com/DrAcula27/readTrakr](https://github.com/DrAcula27/readTrakr)

(back to top)


## Acknowledgments

A special thanks to these resources used in the project!

- [Open Library APIs](https://openlibrary.org/developers/api)

- [GitHub Pages](https://pages.github.com)

- [Font Awesome](https://fontawesome.com)

(back to top)