Jane's Library

A website that I built for Jane Goodall, a UK Poet. Constructed with Vanilla Javascript, containing OpenLibrary API, Local Storage, ES6 Classes, RegEx & custom styled components with Bootstrap 5.

Lessons I Learned

This was my first Bootstrap 5 project, beforehand I had completed several mini-projects. I enjoyed the teaching process of Bootstrap 5 & engoyed the process of building a full Bootstrap 5 Website. I was able to get feedback from a Senior developer about my code, and have several improvement points that I can partake on.

I really had to learn how to manoeuvre around with Bootstrap, and customise default elements well. With several searches on StackOverflow, I was able to get around some queries I had, & I learned how to style form elements correctly.

Potential Future Features/Additions

Here are a list of future additions I could potentially add to the website in the near future:

• Bootstrap Modals - I could implement specialised modals within the website in the Home & Blog page, using jQuery & Bootstrap
• JSON Files - I could use JSON files to store home & blog data, instead of typing the text inside the html files. This will improve usability & allows for a more dynamic approach
• Specialised Contact Form - I can create a more specialised contact form with 'mailto', to allow users to send emails to Jane Goodall directly via the website
• Status Bar - a built-in 'Success' or 'Error' status can be added to alert user of successful/invalid entries, instead of using alert(), within the Library & Search sections.

Web Deployment

This website deployed with github pages.

Tutorial

Get Started

1. Install Git, Node and npm.

$ node --version
v16.13.2

$ npm --version
8.1.2

$ git --version
git version 2.29.1.windows.1

2. From your Terminal/Command Line, clone the repository:

# Clone repository
$ git clone https://github.com/EugeneKoba/jane-s_library

# Go into the repository
$ cd jane-s_library

3. Start the server with NPM.

# Start the server with npm
$ npm start

The development server should be running in your development browser.

Made with HTML, Bootstrap (CSS) & Vanilla Javascript. Website Icons Created with Adobe Photoshop & Illustrator.

Images