Welcome to Bookstore - Loans
Bookstore - Loans website is developed using Django Framework as part of Portfolio Project 4 for my Diploma in Full Stack Software Development at Code Institute.
The purpose of the application is to manage book loans: reservations, loans, extensions and returns. It also allows commenting on books based on their availability in a bookstore, or in a public or private library.
The idea is that anyone can initially reserve a book and after the reservation, the user has up to 7 days to pick up the physical book. Once the book is picked up, the administrator (bookseller) will be able to change the status of the book from reserved to loan, having a period of 30 days with the loan and it is possible to extend the loan up to 3 times (with a maximum of 3 months). To request a loan (reservation) you must be registered on the site. Once the book is returned, the site administrator can change the returned status and it would be available for new reservations and loans. It is also possible to cancel the reservation of a book from the book details area or from the loan page.
You can view the live site here:- https://bookstore-loans-804dfdc18356.herokuapp.com/
Table of contents generated with markdown-toc
https://github.com/patchamama/PP4-Bookstore-loans
Github projects was used to manage the development process using an agile approach.
For the creation of the project we took as a base the django project start template (https://github.com/Code-Institute-Solutions/django-blog-starter-files) because of its similarity to the ideas of the site in terms of colors and structure, with some modifications.
Database Structure
Wireframes
Colors
The initial color palette of the chosen base templates (https://github.com/Code-Institute-Solutions/django-blog-starter-files) was maintained.
I used Roboto and Lora to achieve the type of text I was looking for for this website, with a simple and classic style.
Navigation
I wanted a simple and direct style to the information. The home page shows the covers and names of the books and from this information you can access to see the details.
- Desktop
- Mobile
Home page
The navigation bar is maintained on all pages, creating a unity. The book covers and title are shown with a link to directly access the book details and additional relevant information such as the number of books available for loan and number of comments is displayed. The pagination of the home page is 4 columns repeating in 3 rows allowing a maximum of 12 books to be displayed.
Sign Up Page
This page allows the user to sign up to use the website's features by creating a username and a password. Providing an email is voluntary at this point.
- Desktop:
- Mobile:
Sign In page
This page allows registered users to log in to use the site's functions: add or delete comments, request book loans.
- Desktop:
- Mobile:
Sign Out page
This page allows the user to sign out to keep their features safe from a third party.
- Desktop:
- Mobile:
Book details page
When the user clicks on a book cover or title, this is the page they will be directed to in order to view the details of the book. Only authenticated users can access the book details to borrow or comment. Authenticated users, on the other hand, can comment - their comment will be displayed on the page upon administrator approval. There is also the possibility to delete previously approved personal comments, if the user is the author of the comment.
- Desktop
What it looks like for authenticated users:
- Mobile
Book loans page
This page is only accessible to authenticated users and allows you to view the loans requested (reservations, loans), as well as the expiration date of the loan and the possibility of requesting an extension.
- Desktop:
- Mobile:
Custom Error pages
I created custom error pages (400, 403, 404, 500) that is equivalent in style to the other pages of the website, so it creates a coherent vibe.
- Desktop:
- Mobile:
-
The possibility for users to rate a book.
-
If a book is not available, allow to request an email notification.
-
Bookmark: ability to bookmark a book that they like.
-
Email verifiation: make email signup mandatory and verifying the user.
-
Social sign in: use Google or othern forms of social sign in features.
-
Establish a maximum limit for book loans.
-
The same book cannot be reserved twice at the same time.
-
Add links to author and book characteristics to search for books with that author or selected characteristic.
-
Validate before making a reservation if there are books available in case several simultaneous book reservations are made.
Testing details can be found separately in the TESTING.md file.
- Navigate to the GitHub repository or use Code Institute's template to create your own workspace
- Click on Gitpod and create workspace
- Installations:
Install the server you will use when deploying to Heroku:
pip3 install 'django<4' gunicornInstall supporting libraries:
- PostgreSQL & psycopg2:
pip3 install dj_database_url==0.5.0 psycopg2- Cloudinary:
pip3 install dj3-cloudinary-storageCreate files:
- requirements.txt:
pip3 freeze --local > requirements.txt- create new django project:
django-admin startproject bookstore .- create loans app:
python3 manage.py startapp loans- set up an env.py file that should look like this:
import os
os.environ['DATABASE_URL']="Your database url - see in deployment"
os.environ['SECRET_KEY']="Your secret key"
os.environ['CLOUDINARY_URL']="Your Cloudinary API environment variable - see in deployment"- modify the SECRET_KEY variable in settings.py the following way:
SECRET_KEY = os.environ.get('SECRET_KEY')- for deployment in Heroku, you'll need to create Procfile
-
This project users ElephantSQL as its database solution. How you can obtain one and wire it up to your repository:
- Use your GitHub account to sign up
- Provide a name that ideally is consistent with your project's name
- Select the Tiny Turtle (free) plan
- You can leave the Tags empty
- Select your region
- You can access the the database url and password by clicking on your database's name
-
This project uses Cloudinary to store its media files since Heroku don't keep these files
- Use your GitHub account to sign up
- Copy your API environment variable
-
This project uses Heroku for deployment
- set up an account
- In the top right corner you'll find the button new
- Click Create new app
- Choose your region and a unique application name
- Once created, navigate to Settings
- Click on Reveal Config Vars
- Add the keys and values from your env.py file
- Add PORT:8000
- Temporarily add DISABLE_COLLECTSTATIC:1 - to be removed for final deployment
- You can choose between different methods of deployments on the Deploy tab
- As well as Manual and Automatic deploys
-
The deployed page is available here
-
Languages, Databases and Frameworks:
- HTML
- CSS
- Javascript (Bootstrap JS)
- Python
- Django
- PostgreSQL
- psycopg2
- Bootstrap
-
Other tools:
- The Think therefore I blog project gave the basis of the whole project
- Tutor Support
- Slack community
- Stackoverflow
- Templates as base used: https://github.com/Code-Institute-Solutions/django-blog-starter-files
- Image to not cover: https://upload.wikimedia.org/wikipedia/commons/thumb/a/ac/No_image_available.svg/480px-No_image_available.svg.png
- To update the default user field in a loan with the currently logged in user, we have used the ideas of: https://stackoverflow.com/questions/4670783/make-the-user-in-a-model-default-to-the-current-user
- To run a task at application startup (check for loans with expired deadlines and update): https://stackoverflow.com/questions/6791911/execute-code-when-django-starts-once-only
- Error 500: https://stackoverflow.com/questions/13633508/django-handler500-as-a-class-based-view
Many thanks to my mentor Sandeep for his support and advice. Also to the Code Institute for preparing the materials and providing a wide range of available means of learning for the students.