This was a wonderful learning experience. I cannot believe how different this is from the earlier version. I’m happy about this project because it solves a problem I have really well, and I learnt a lot about Svelte, frontends, deploying, databases through this. The hardest part was all the insane JS debugging and managing the database and at the end the actual vite build, which took lots and lots of debugging to fix.
DEPLOYED!!!!!
took a MASSIVE amount of time to get the vite build running, had to do tons of debugging because of issues with git and pulls that went wrong, but finally got it deployed. Have to make sure everything works now.
Log in to leave a comment
Added an info modal which contains information about the app and a link to the repository and a list of features.
Log in to leave a comment
Removed email editing because it just would not work for some reason. I suspect supabase’s database security measures. Anyway, it’s not really necessary.
Tweaked UI and formatting and made the action buttons align properly on mobile. Put together another modal to confirm deletion of account.
Log in to leave a comment
ADDED GITHUB OAUTH LOGIN this is huge
unbelievable amounts of time was spent messing around with google cloud auth service before i gave up and decided to include only sign in with github and not google
added the ability to edit password and email if you login using that (this feature I kept purely for non-developer friends who don’t use github)
added the ability to publicly share your catalogs, basically a shareable link is generated with a read-only ui that displays all your books nicely
Log in to leave a comment
Added a lending system- finally made those usernames worth something. When you type a username in the ‘lending’ modal it adds the book to a new ‘borrowed books’ catalog for that user. Also copied the book deletion confirmation modal to make a catalog deletion confirmation modal.
Log in to leave a comment
Added the ability to rename and delete catalogs. Also added a splash page for new users and users who have deleted all catalogs for them to create one.
Log in to leave a comment
Added a simple profile card from bits and pieces from other modals where you can change ‘username’ i.e. displayed name on the top and add a ‘bio’. Right now does nothing, but aiming to make it not pointless.
Main accomplishment was to add a sidebar to create more catalogs, each user can now create multiple catalogs. Right now unable to rename, edit, or delete, or even properly create, but that’s coming soon. This sidebar is accessed from a floating action button on the left.
Log in to leave a comment
Added a login screen. I sincerely hope supabase’s auth service is secure
Log in to leave a comment
Changed the placeholder when cover is unavailable to a rickroll :)
Added a supabase database, still have to make sure everything works
Added two new modals for lending and deleting actions, which used to be browser prompts before.
Log in to leave a comment
Tweaked the colours- gold and navy blue (dark mode) and white (light mode). Added a transparency effect to the modal and floating action button, inspired by Samsung’s One UI 8. I’d forgotten to add the ‘date acquired’ data to the table, so I added it within the sliding drawer.
Log in to leave a comment
Added a share button to share individual books, basically to share book recommendations. Much needed feature for me personally.
Log in to leave a comment
Basically added a new variable to make empty catalogs look nice. (Probably) the last stage of UI messing-around before figuring out how to get this to have a proper backend.
Log in to leave a comment
Fixed filter and sort system. Removed the earlier book counter and moved it to a new analytics card with a button in the header and added a genre-wise list to it. Added a sliding drawer component to each book using the svelte slide function that adds a rating system (out of 5 stars) and a short section to add notes.
Log in to leave a comment
Got lots of feedback about making the UI better, but I’d kind of hit the limit of UI with HTML and CSS, so I decided to learn a frontend technique and selected Svelte for its ease of use for beginners. Converted the project to Svelte and explored the language, messing around with the colours and animations, and the UI is completely different and entirely better now. Also added a light mode/dark mode toggle. Tried to make a filters and sorting system which isn’t working properly, that I have to fix yet, and also do the second most requested feature from feedback: making the data persist on a server.
Log in to leave a comment
I have loved reading books since childhood, and I especially insist on reading physical copies. Hence I’ve collected roughly more than 500 books of my own and have made various attempts at sorting and cataloging all of them throughout the years, until I decided to make the best one possible once and for all as a website. This project started as a way to test my already pretty good HTML skills and turned into a learning lesson in JavaScript. The most challenging part was the formatting and UI and CSS which took the most time. At the end I’ve managed to make something I can personally use.
Added barcode scanning feature using the HTML5-QRcode package to automatically enter ISBN codes from books. Also fixed mobile phone formatting and added a floating action button to the ‘add new book’ section.
Log in to leave a comment
I changed the static HTML page to a dynamic page with a JSON data sheet and a separate JS script. Now it is a proper catalog with ability to add books directly and store them in the browser local storage. It adds title and author name from the ISBN and also adds cover image to the table from Open Library. I also added a system to track if books are available or are lent, and if so, to whom. Also added a tracker of total number of books and genres available on top of the page.
Log in to leave a comment
