Book Space banner

Book Space

About the Project

FrontendBackend

Disclaimer: The site is hosted on a free version of Render, so it may take a little time to spin up. It will typically take between 1-3 minutes

Book Space is an exam project that I developed as part of my education in the second semester. The project is a web app that allows users to create a profile and save their favorite books, create lists, view recommendations, and track their reading habits.

For this project, we were provided with a Figma prototype that we could use as a foundation for our design, which I have mostly followed.

The app is built with React Router v7 using TypeScript and uses MongoDB to store data about users and the books they have saved. The app utilizes a JSON dataset with books, which we were given as part of the project.

I have used Tailwind CSS to style the app and Motion to add animations to filters and modal windows, making the app more lively and interactive.

Test User:

Email: sylto@gmail.com

Password: hello

Techstack

icon-React
React
icon-React Router
React Router
icon-MongoDB
MongoDB
icon-Motion
Motion
icon-Tailwind CSS
Tailwind CSS
icon-TypeScript
TypeScript

Snapshots

  • snapshot
  • snapshot
  • snapshot
  • snapshot

Technologies

I have used React to create an interactive and dynamic user interface for my exam project. Using React has made it easy to build a structured codebase.

I have used React Router v7 as the React framework to develop the website. With React Router's 'loader' and 'action' functions, I was able to easily fetch and update data from MongoDB directly within the components.

To manage user data and saved books, I have used MongoDB and Mongoose. This has enabled efficient data storage and retrieval, which is crucial for the app's functionality.

Motion has allowed me to add smooth animations and interactions that enhance the user experience. I have used it for filters and modal windows, giving the app a more dynamic and engaging feel.

With Tailwind CSS, I have quickly and efficiently styled the website. It has allowed me to style components rapidly and ensure a consistent visual experience across different pages.

TypeScript has helped me write more robust and maintainable code. By adding type control to JavaScript, I have reduced errors and improved the development process.