MyBookCompanion

• 

  Home page

• 

  Register page

• 

  Login page

• 

  Member home page

• 

  Book gallery page

• 

  View loans page

• 

  Admin page

Inspiration

We came up with the E-library idea based on the experience we had from visiting websites like the National Library Board (NLB) Catalogue.

What it does

It is based off the NLB website which has features that most E-library websites have such as:

• Browsing books
• Borrowing books
• View loan information
• View book reviews
• Submit a book review

How we built it

For the frontend, we are using ReactJS with ReactJS Router, a framework which provides client-side routing.

For the backend, we are using Express.js.

Challenges we ran into

Edric: I found it harder than expected to add pagination into the user interface - "should I use client-side pagination or server-side pagination?" I ended up using client-side pagination. Additionally, I found it difficult to deploy the source to Heroku - this was where the backend and frontend code had to be shared on the same domain. Additionally, as we were doing client-side routing, this made it harder as the frontend routes could potentially take precedence over the backend API endpoints (say for example /book might be ambiguous - would it go to the backend API /book endpoint or the /book route on the frontend?) I solved it by prefixing the API endpoints with /api, as well as made a Express route that would essentially proxy all routes to the frontend.

Anthony: The challenges I faced was having to adapt to using react after changing from conventional HTML CSS to react, as react was something that I have just learned so it was no easy task adapting to react. I also faced problem having to post reviews and than refreshing just that component so that it does not reload the whole page. The solution to this was creating a parent to child prop and then having it get a function to refresh whenever new data is posted.

Accomplishments that we're proud of

Edric: I was able to add data validation using an external module named express-validator.

What we learned

We learnt how to use Git branches such that integration was easier. Additionally, we also learnt to apply the React concepts from the ReactJS Self-Directed Learning topic.

What's next for MyBookCompanion

We plan to add additional UI polish, as well as further integration tests.

Built With

• express.js
• javascript
• react