Bindr

A book recommender Web App.
Explore the docs »

Report Bug · Request Feature

Table of Contents

1. About The Project
2. Getting Started
   • Prerequisites
   • Repository Structure
3. Contributing

About The Project

Bindr is Tinder for books. You get suggestions of books based on what genres you like. You swipe left or right in order to add the suggested books to your list in order to save it for future use!

This was a self-directed group project at the Royal Institute of Technology (KTH), Sweden. The overarching purpose of the project was to to create a highly-useable data-persistent interactive web application using the Model-View-Presenter architecture, reading data from web APIs and delivering a good user experience.

There was a deployed version in the past - it is not maintained anymore.

Authors:

• Elvira Dzidic
• Simon Döbele
• Emil Lantz
• Mattias Arvidsson

Current and past features

We started with a mockup:

https://miro.com/app/board/uXjVOIKRW6w=/

Current features are described in the repository structure below and the change log of an earlier version of this readme.

API

• We are using the following API to get our data: https://openlibrary.org/dev/docs/api/books

(back to top)

Getting Started

Usage

1. Clone the project.
2. Make sure you have Node.js installed. https://nodejs.org/en/
3. Cd into project folder.
4. Run npm installto initiate.
5. Install dependencies. It needs sweetalert, npm install sweetalert
6. Run npm run devto serve the app locally.

(back to top)

Repository structure

.
├── public
│   └──  style.css          # our CSS style sheet file
├── src                     
│   ├── apiConfig.js           # API configuration file (currently not used)       
│   ├── binderModel.js         # The Model of the MVP architecture
│   ├── bookSource.js          # Functions for API calls
│   ├── firebaseConfig.js      # Firebase configuration file
│   ├── firebaseErrorMsgs.js   # Firebase errors file
│   ├── firebaseModel.js       # Observer functionality (updates from firebase to model & vice versa)
│   ├── index.html             # (Notifies, if you have Javascript disabled.)
│   ├── resolvePromise.js      # Resolves promises
│   ├── utilities.js           # will contain utility functions for the model (currently not used)
|   |   
│   ├── views                  # THE VIEWS of the MVP architecture
│   │   ├── aboutUsView.js             # Is a view about the team and project.
│   │   ├── app.js                     # Displays the different components
│   │   ├── bookDetailsView.js         # renders details about a book.
│   │   ├── loginView.js               # Enable user sign up, sign in (with username and password including forgotten password) and authentication through firebase. The user has "forgot password" functionality.
│   │   ├── navBarView.js              # contains the navigation bar
│   │   ├── navigation.js              # helps navigate at startup (to login view)
│   │   ├── promiseNoData.js           # For user experience (when waiting for promise to be resolved)
│   │   ├── swipeView.js               # The user gets swiping functionality to decide whether to “like” or “dislike" a book. Liked books get added to the liked books list.
│   │   ├── userCreationGenreView.js   # The user can pick out of different book genres in order to get suitable book recommendations in binder.
│   │   ├── userCreationView.js        # Enable user to sign up (with username, e-mail and password, through firebase).
│   │   ├── userInfoView.js            # Information about the user (picture, liked books) is presented to the user. The user can delete books from the liked books list.
│   │   ├── waitUndef.js               # 
│   |
|   └── vuejs                  # THE PRESENTERS of the MVP architecture
│       ├── aboutUsPresenter.js             # (Presenter corresponding to the View with same name (MVP architecture))
│       ├── bookDetailsPresenter.js         # (Presenter corresponding to the View with same name (MVP architecture))
│       ├── index.js                        # Renders the root & Resolves the initial persistence promise
│       ├── loginPresenter.js               # (Presenter corresponding to the View with same name (MVP architecture))
│       ├── navBarPresenter.js              # (Presenter corresponding to the View with same name (MVP architecture))
│       ├── show.js                         # utility for deciding the change to a different view
│       ├── swipePresenter.js               # (Presenter corresponding to the View with same name (MVP architecture))
│       ├── userCreationGenrePresenter.js   # (Presenter corresponding to the View with same name (MVP architecture))
│       ├── userCreationPresenter.js        # (Presenter corresponding to the View with same name (MVP architecture))
│       ├── userInfoPresenter.js            # (Presenter corresponding to the View with same name (MVP architecture))
│       ├── VueRoot.js                      # The Vue Root that ties the bindermodel and app together.
├── user evaluation             # USER EVALUATION midway through and towards the end of the project
│   ├── apiConfig.js           # API configuration file (currently not used)    
└── ...

(back to top)

Contributing

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

(back to top)