BookRadio | Devpost

Home page

"From Music to Audiobooks — The Idea Behind BookRadio" I have created a perfect way to listen to books — not just modern ones, but timeless classics from the late 18th, 19th, and 20th centuries. Welcome to BookRadio — a platform with over 10,000 audiobooks, spanning diverse genres, languages, and legendary authors from history.

But how did this idea come to life?

Well, I’m not exactly a bookworm — but I do love a good story. Whether it’s music or spine-chilling fiction, I enjoy listening during my free time. One day, I thought: what if we could listen to classic books — old fiction, detective tales, and timeless adventures — just like we listen to songs? And that’s how BookRadio was born.

So… how did I actually build it?

I wanted to create a user-friendly, interactive, and animated website that not only looks good but also helps users find and enjoy stories effortlessly. So I started exploring — searching for resources that could bring this idea to life. That’s when I discovered LibriVox, a public domain audiobook platform. It turned out to be the perfect match! I used their API to extract rich book metadata — including titles, authors, genres, and languages — and seeded it into my own database. This became the foundation of BookRadio.

I Started seeding the data into my mongoDB through Web Scrapping

MVC helped me separate logic and routes for better maintainability.

My backend was structured using the Model-Controller-Router (MVC/MVR) pattern to ensure scalability, modularity, and maintainability.

Model — Defines the Data Structure

I created Mongoose models for Book and User. These define how data is stored, validated, and indexed in MongoDB.

Controller — Business Logic

Each controller contains the logic for handling specific routes.

Router — Route Handling

My bookRoutes.js file defines the endpoints and connects them to their corresponding controllers.

Middleware- The Middleman

Middlewares played a central role in my backend. They handle: *JWT authentication

Building the frontend part

With the backend logic in place, I shifted focus to building the frontend — where functionality meets design and user experience. Designing the frontend wasn't just about putting components together. It required: 🎯 A strong design system 📱 Responsive layouts ✨ Smooth animations 🧠 Component reusability 🌙 Theme integration “React.js, a widely-used frontend library, was my choice to build a fast, component-driven UI.” To design an interactive and responsive UI, I used Tailwind CSS and Framer Motion for styling and smooth animations.