shelf'd

• 

• 

• 

• 

Inspiration

The inspiration for Shelf'd came from the frustration of managing personal reading lists and ensuring we don't forget about the books we've read or want to explore. We envisioned a seamless way to integrate personal book collections with social recommendations, using intuitive technology to enhance user experience. The project also aimed to leverage collaborative features, such as sharing reading lists with friends, and utilizing advanced autofill and search tools to make finding books effortless, as well as finding reccomendations.

What it does:

Shelf'd allows users to:

Search for books by their ISBN or title, with suggestions powered by an autofill system that feeds into a SupaBase backend.

Add books to their personal virtual shelf, ensuring no duplicates are associated with their user account.

Track books they’ve read, are currently reading, or plan to read.

Provide a seamless integration with a Supabase database to store and fetch user-specific data securely.

Offer a user-friendly interface for quick navigation and book discovery.

How we built it:

We built Shelf'd using the following technologies:

Frontend: Next.js with client-side components for dynamic rendering and user interactions. CSS was used to design a clean and responsive interface.

Backend: Supabase provided the database and authentication solutions, allowing us to handle book and user associations seamlessly.

APIs: Integrated Open Library API to fetch detailed metadata about books using ISBN or title queries. Integration: A combination of client-server architecture ensured efficient communication between the frontend and Supabase backend for adding, fetching, and validating user-specific book data. Challenges we ran into

Client-Server Communication: Handling the flow of data between client-side and server-side components while ensuring real-time updates and consistency in Supabase queries proved challenging. Autofill Functionality: Implementing an efficient search and autofill system required optimizing database queries to reduce latency.

Duplicate Book Handling: Designing a validation mechanism to prevent users from adding the same book multiple times while maintaining flexibility in the interface was tricky.

Asynchronous Operations: Managing API calls, especially during ISBN lookups and data insertion, required careful attention to avoid race conditions and errors.

Accomplishments that we're proud of:

Successfully implemented a robust autofill search system that dynamically fetches book suggestions as users type.

Designed a responsive and intuitive user interface that works seamlessly across devices. Established a clean data structure and relationship in Supabase, allowing us to efficiently associate books with specific users.

Built an ISBN-based validation system to prevent duplicates and enhance data integrity using a QR Scanner.

Developed a scalable architecture that can accommodate additional features in the future.

What we learned

Database Relationships: We deepened our understanding of managing relational databases, particularly with foreign key relationships in Supabase.

Client-Side Optimizations: Learned how to optimize React components for better performance when handling dynamic data and asynchronous API calls.

User Experience: Gained insights into designing user-friendly interfaces and the importance of feedback systems, such as error messages and success confirmations.

Integration Challenges: Learned how to debug and handle issues arising from combining multiple technologies, like React, Supabase, and external APIs.

What's next for Shelf'd:

Recommendation System: Add a feature where users can get book recommendations based on their current reading lists or genres they enjoy.

Social Sharing: Introduce the ability for users to share their virtual shelves with friends or join book clubs within the app.

Analytics Dashboard: Create a dashboard that tracks reading habits, such as the number of books read or average reading time per month.

Mobile App: Expand the project into a dedicated mobile app for easier access and offline functionality in stacks like Kotlin for Android and/or Swift ofr ios.

Community Features: Build a feature where users can leave reviews or comments on books and interact with other readers in the community.

Built With

• aseprite
• ci
• figma
• isbndatabase
• next.js
• nix
• openlibraryapi
• tailwind
• vercel