Overview
Ehya is a frontend application for searching and reading books online built using Google Books API. On visiting the site user can see list of recommended books and best this month books if you like to check details of a book and read the book on google books page.
Technologies
Features
- Book Search: Users can search for any book via the search page and select a book card for further details.
- Detailed View: Each book card offers a “See on Google Books” button, redirecting users to the Google Books page for reading.
- Responsive Design: The site is designed to be mobile-friendly, ensuring usability across various devices.
Challenges I faced?
Building from a Figma Design: This project was my first time converting a Figma design into a live application. Crafting UI components and designing complex pages, such as the home page and a carousel slider for book details, was particularly challenging.
Responsiveness: Making the application fully responsive across different screen sizes was a valuable learning experience.
Integration of Google Books API: Integrating the API was challenging, especially when learning to use it effectively with Axios and reading through documentation for proper implementation.
Custom Hooks: I created custom hooks to streamline functionality, such as fetching book data, detecting display sizes, providing book data contextually based on the section of the application, and handling search functionality.
Presisting data: One challenge was ensuring that book details remained persistent even after a page refresh. Initially, refreshing the book details page resulted in data loss. This issue was resolved using redux-persist, which enabled data persistence across sessions.
Conclusion
Building Ehya provided valuable insights into developing a frontend application with a real-world API, managing state with Redux, handling UI/UX design implementation, and maintaining responsive design. Overcoming these challenges has greatly enhanced my skills in React development, API integration, and state management.