This is my third Milestone Project on the Full Stack Web Developer Code Institute course. For Data Centric Development module.
I am the founder of Könyvkuckó, the Hungarian Children's Library in Ireland. My book collection is about 120 books, all our books were donated. I got books from authors, organizations, individuals. The launch of the Hungarian children's book was on the 29th of October, 2019. The books are hosted by Deansgrange Library, but they can be requested via the inter-library loans system from other libraries who are part of Libraries Ireland. The requested books will be delivered to the users' local library.
The purpose of the project is to build a full-stack site that allows the users to manage a common dataset about a particular domain.
The application allows users to search Hungarian children's books, check the wishlist and donate books either from our wishlist or any book they want. Only the admin can add new books to the database, delete and edit the existing books.
The project has the following sections:
-
Home page Contains two background images and a short description.
-
Books page Contains all the available books, each book has a View button, for more information about the book. When admin is logged in they can see an Add Book button, and an Edit and a Delete button as well.
-
Donation page On the top of the page the user can see the I would like to donate a book button, and all the books that have been donated to the library, but haven't arrived yet. The admin can see two buttons next to the book, the first one is to move the book from the Donation list to the Books list when the book arrives, the second one is a Delete button, in case the book never arrives. There is a third button, which allows the admin to approve the book, making it visible to users on Donation page. I read about Defensive Design and wanted to check the information the users provided when filled the donation form.
-
Wishlist Contains all the books that we are currently looking for. Users can donate any of them by clicking to the button next to the book. If users decide to donate a book that is not on the list, they can click on the button on top of the page. Admin sees a third button, as they can add a new book to the Wishlist.
-
Login / Register page I needed an admin account to delete/edit/add books, this is why I created the Login page. Any user can register here, but at the moment registration does not have any advantages.
-
As a user I would like to know about the books that are available to borrow from Libraries Ireland
-
As a user I would like to get from a book to the Library's homepage to borrow the book
-
As a user I would like to be able to donate books to the Hungarian Collection
-
As a user I would like to access the Wishlist to see which books are needed by the library
-
As a user I would like to be able to contact Konyvkucko with my questions
-
As an admin I would like to be able to add books to the collection and delete/ edit them
-
As an admin I want to be sure that I approve all the books which appears on our donation page
-
As an admin I want to be able to move books from wishlist to donation list
I used Nunito Sans, from Google Fonts
On fonts.google.com in the about section the description of the font is the following: Nunito is a well balanced sans serif typeface superfamily, with 2 versions: The project began with Nunito, created by Vernon Adams as a rounded terminal sans serif for display typography. Jacques Le Bailly extended it to a full set of weights, and an accompanying regular non-rounded terminal version, Nunito Sans.
Sans-serif is used as the default backup font in case when Nunito Sans was not possible to load.
-
#4284A4 - Primary background color
-
#60a0bf - Button hover color, Form input field label color, Datepicker hover color
-
#5B8BA3 - 404 page text block background color
Originally on the home page I wanted to have one background picture and 3 of our latest donated books, but then I discovered Parallax (Materialize). Parallax is an effect where the background image is moved at a different speed than the foreground content while scrolling, so I decided to use Parallax instead.
Mobile View - Books Admin View
Desktop View - Donation Admin View
Desktop View - Books Admin view
I shared Konvkucko's link with Messenger as I wanted the app to be tested on more different devices. When a link is shared there is a nice feature: a little preview of the link’s content, with title, short description and an image of the designated page. This data comes from scraping the link for Open Graph (OG) data. I added og meta tags to my base.html and used Sharing Debugger (facebook developer tools) to debug.
On Books page user can check more details about each book by clicking the View button next to the book. This leads the user to the book detail page, where the Borrow this book! button takes the user to Libraries Ireland page, and after login user can request the book.
-
As the application is about Hungarian books, for Hungarian families living in Ireland I plan to translate it Hungarian.
-
I would like to add a search bar, where users can search books by author, title and age category.
- Required: HTML, CSS, JavaScript, Python+Flask, MongoDB
- HTML5
- CSS3
- JavaScript
- Python
- Materialize Framework: Used the Materialize framework for grid system, structuring layout, cards, forms, button styling and responsive navigation bar.
- Flask Used Flask framework to compile modules and libraries.
- jQuery: Used to initialize elements of Materialize framework. For the home page (Parallax), Navbar collapse, datepicker.
- VSCode: Was used as a code editor.
- Git: Version control.
- Github Used as a Git repository hosting service
- Heroku Is a container-based cloud Platform, I used Heroku to deploy this app.
- MongoDB Is used to store the database in the cloud.
- Google Fonts Used Nunito Sans fonts
- Favicon Generator Used to find the right Favicon for the project.
- compressjpg Used to compress all my images.
- Canva photos Used to find the background images.
- W3C Validator Used to check the validity of my HTML and CSS.
- PEP 8 Online Validator Used to check my Python code.
- moquaps Used to create wireframes.
- facebook for developers: I used the Sharing Debugger to see the information that is used when my website content is shared on Facebook, Messenger and other places.
Throughout the development of the project, I carried out testing. I used the Chrome Developer Tools consistently.
The application structure and mobile-first layout was tested on Google Chrome, Firefox and Safari. The application was tested on the following smartphone devices: Xiaomi, OnePlus6, iPhone11 and iPhone5. And on iPad and BMAX tablets.
| Nr | Test | Action | Before image | After image | Test result |
|---|---|---|---|---|---|
| 1 | Library Link | Click on: Borrow this book! |  Book detail page |
 Library Link |
Passed |
| 2 | add_book | https://konyvkucko. herokuapp.com/ add_book |
 Admin |
 Not Admin |
Passed |
| 3 | invalid book | https://konyvkucko. herokuapp.com/ book_detail/5e |
 Admin |
Not Admin |
Passed |
| 4 | 405 page | https://konyvkucko. herokuapp.com /insert_book |
 Admin |
Not Admin |
Passed |
| 5 | 404 page | https://konyvkucko. herokuapp.com/ stg |
 Admin |
Not Admin |
Passed |
| 6 | wishlist | https://konyvkucko. herokuapp.com/ wishlist |
 Admin |
 Not Admin |
Passed |
| 7 | donation | https://konyvkucko. herokuapp.com/ donation |
 Admin |
 Not Admin |
Passed |
| 8 | books | https://konyvkucko. herokuapp.com/ books |
 Admin |
 Not Admin |
Passed |
I used Am I Responsive as a responsiveness test.
| Nr | Browser | Image | Test result |
|---|---|---|---|
| 1 | Chrome |  Chrome |
Passed |
| 2 | Safari |  Safari |
Passed |
| 3 | Firefox |  Firefox |
Passed |
-
CSS was validated using W3C CSS Validation Service - Jigsaw, no errors were found.
-
HTML was validated using W3C Markup Validation Service.
-
Python code was validated using PEP8 online checker.
Defensive design was built into each template in app.py file.
-
Only admin can add/ delete/ edit books, these buttons are hidden from users.
-
Flash warnings were used when user entered already taken username at registration, or wrong password/username when signing in.
-
Book information (Summary, ISBN) are based on Moly
-
I used Datepicker from course mini project
-
I use Materialize for card reveal (Books page), but wanted to change it to reveal the summary by hover. I got the solution from stack overflow: https://bit.ly/39S4X6f It worked fine when I set it up, but after a while the cards were only revealed after clicking on them. The reason for this was that in main.js I put Datepicker code before the Card hover and there was an error in Datepicker, so the Card hover code was never reached.
-
Special thanks to my friends who made me add extra validations to my app.py. Originally when a user wanted to donate us a book and filled the form, the book was visible on the Donation page. I created an approved function, and now admin approval is needed before any new books are displayed. I also check if user is signed in and is admin, before they could add/ delete/ edit a book.
-
Many thanks to my mentor, Brian Macharia for support and advice throughout the project. You became my mentor when I started this milestone project and you always made sure to find the time for a mentor session when I needed you. Thank you!
- Follow this link to my Repository on Github and open it.
- Click
Clone or Download. - In the Clone with HTTPs section, click the
copyicon. - In your local IDE open Git Bash.
- Change the current working directory to where you want the cloned directory to be made.
- Type
git clone, and then paste the URL you copied earlier. - Press enter and your local clone will be ready.
- On Heroku create an account and log in.
- Click
newandcreate new app. - Choose a unique name for your app, select region and click on
Create App - Under the
SettingsclickReveal Config Varsand set IP to 0.0.0.0 and the PORT to 5000 - Go to the CLI and type
$ sudo snap install --classic heroku - Type
$ heroku logincommand into the terminal - Create
requirements.txt($ sudo pip3 freeze --local > requirements.txt) - Create a
Procfile($ echo web: python app.py > Procfile) - Go back to Heroku, under
DeployfindExisting Git repositoryand copy the command:$ heroku git:remote -a <app_name>Paste this into the terminal. - (If repository was not created already, type:
$ cd my-project/$ git init$ heroku git:remote -a <app_name>)- Type
$ heroku ps:scale web=1into the terminal. - Go back to Heroku, and at
Settingscopyhttps://<app_name>.herokuapp.com/ - In the terminal type
git remote add http://<app_name>.herokuapp.com/ - Type
git push -u heroku master - In the app dashboard, under
Settingsclick onReveal Config Vars - Set "MONGO_URI" and "MONGO_DBNAME" and "SECRET_KEY"
- Once the build is complete, go back to Heroku and click on
Open App
This project was created for educational use only.