Page Turner Book Club is a dynamic app designed exclusively for book enthusiasts, providing them with a platform to discover new books and share their recommendations. It caters to individuals who have a genuine passion for reading and enjoy engaging in discussions and commentary surrounding books. One of the key features of Page Turner Book Club is its monthly poll, allowing users to vote on book titles to determine the next book for discussion. Additionally, users are encouraged to leave comments and participate in conversations, fostering a vibrant community of like-minded readers.
The live link here - Page Turner Book Club
- User Experience (UX)
- Agile Methodology
- Data Model
- Testing
- Security Features and Defensive Design
- Features
- User Account Pages
A visitor of the Page Turner Book Club would be someone who is an avid reader and is looking to be part of like-minded people group where he can discuss, recommend and find new reading interests.
- As a User, I can register an Account so that so I can join a book club and connect with other readers.
- As a User, I can log in or log out of my account so that I can have access to member benefits such as comments and votes.
- As a User, I can navigate the site intuitively so that I can find content I am interested in.
- As a User, I can view a paginated list of books so that I can select a book to read more information about it.
- As a User, I can click on a book so that I can read the full description, and author and view comments left by other users.
- As a Site Admin/User I can add new books so that members can always find a book that appeals to them
- As a Site User I can like or unlike a book so that so that other members can get a sense of whether or not they would enjoy reading the same books.
- As a Site User I can vote on the book poll so that I can be involved in the monthly discussion.
- As a Site Admin I can create, read, update, and delete comments so that manage the content and the website remains safe.
- As a Site Admin I can moderate comments on the website so that the site remains safe and friendly.
- As a Site Admin/User I can add new books so that members can always find a book that appeals to them.
- As a Site Admin I can suggest books for the club to read in a poll so that so that we can continue to explore new topics and genres.
The following user stories were left out of the project due to time constraints and labeled as "Won't Have" on the project board on GitHub. It is intended for these user stories to be implemented at a later date.
-
As a Site User I can filter books by genre so that I can find the ones I am more interested in.
-
As a Site User I can see a list of upcoming book club meetings and events so that I can plan a reading schedule accordingly.
-
As a Site Admin I can schedule and manage events/meetings so that members can easily RSVP and keep track of upcoming events.
-
As a Site Admin I can send out reminders and notifications about upcoming meetings/events so that everyone stays up to date with events/meetings.
-
As a Site Admin I can send an automatic Zoom meeting link to members so that they can easily connect with members on the monthly discussion.
The book club website embraces a simple and clean design approach, intentionally chosen to align with its core objective of fostering a tranquil experience for users. The objective is to maintain a cohesive color scheme across the website, promoting a harmonious and relaxing aesthetic.
Color palette from Colormind
The website color scheme primarily features a soft and gentle pale yellow for the backgrounds while employing a darker yellow for accents. The navigation bar adopts a sophisticated and subdued dark grey-blue tone, while the footer has a vibrant touch of orange.
These carefully selected colors create a harmonious and neutral ambiance, while simultaneously offering distinct contrasts that add visual interest to the design.
There are only a few static images on the site's main page. Three big images for the carousel and one smaller one at the bottom for the featurette. The rest of the imagery will be uploaded by users or the admin when adding books to the club.
Open Sans imported via Google Fonts is the main font used for the website. Sans Serif is the fallback font.
The project began with a manual wireframe sketch, serving as the initial foundation from which it evolved. This initial wireframe provided a starting point, allowing for a visual representation of the project's structure and layout.
GitHub projects were used to manage the development process using an agile approach. Please see a link to the project board here
Throughout the project, I applied the principles of Object-Oriented Programming (OOP), leveraging the power of Django's Class-Based Generic Views.
Django AllAuth was used for the user authentication system.
For the users/ admin to add books to the club a model was required. User entity represents the registered users of the website, who can add books, like, comment and participate in discussions. Each user has a unique ID, name, email, and password.
Book entity represents the collection of books that the book club members can read and discuss. Each book has a unique ID, title, author, image, description, and genre among others.
The Comment model allows users to comment on individual books. The Book is a foreign key in the comment model commented can only be linked to one book.
The Question model represents a poll created to vote on the proposed books. The Choice model represents the book choices the members will vote on. This is a ForeingKey as the choices will be taken from the books on the club.
The Vote represents a poll (question) created to vote on the proposed books.
The Book of the Month is the Model that will display the book the club is reading for the current month.
The diagram below details the database schema.
Testing and results can be found here
The login_required decorator is used to ensure only logged in users can vote on the monthly book poll and non-authenticated users are redirected to the login page.
To enhance security, I implemented specific measures in the project. Firstly, I ensured that sensitive information like the database URL and secret key was stored in the env.py file and that the env.py file is included in my gitignore file. By keeping these details separate and preventing them from being pushed to Github during the initial setup, I minimized the risk of unauthorized access or unwanted connections to the database.
Cross-Site Request Forgery (CSRF) tokens were used on all forms throughout this site.
Custom error pages were meticulously designed and implemented to provide users with comprehensive information when encountering errors and to guide them seamlessly back to the site.
- 400 Bad Request - Page Turner Book Club is unable to handle this request.
- 403 Page Forbidden - The page you are trying to access has forbidden content.
- 404 Page Not Found - Oh no! Whatever book you are lookin for doesn't seem to exist.
- 500 Server Error - Oh no! Something just isn't right. Please come back later.
- The name of the Page is to the left of the navigation bar, is present in all the pages and likes back to the homepage.
- The navigation bar includes links to all the pages on the site.
- The Account navigation link is a drop down menu which includes the Sign up and Log in links.
- When the user has logged in, the Account drop down menu changes to display the opcion to add Books, My books and Log out option.
- The navigation bar is fully responsive, collapsing into a hamburger menu when the screen size becomes too small.
- Hovering over the links will change the font from pale yellow to pink.
- The footer section includes links to Facebook, Instagram and Twitter.
- Clicking the links in the footer opens a separate browser tab to avoid pulling the user away from the site.
- The homepage has a carousel featuring three libraries and book images with a quote on each of the images.
- In this section there are three font awesome icons with the information for users to join, like a propose books. Each icon has a line of information and a button with a link to the correct section.
- Within this space, you will discover an image accompanied by a thoughtful description that captures the essence and purpose of the club.
- This page displays the book of the month at the top. A card the book image, title, except and the author's name. It also includes a Read more button that takes the user to the full description of the book.
- The book cards are paginated after every 6 books.
- Each card displays the book's image, title, excerpt and Author, as well as the read more button.
- Clicking on the button will take the user directly to that book's detailed page.
- The book detail section displays the book cover image, author, title, and full book description.
- It also displays a heart with a number next to it where the user can like a book. Also there are bubble speeches with a number to show if the book has any comments.
- The comments section lists all comments left by users for that particular book.
- Comments can only be left if a user is logged in. Any comments left by the user must be first approved by the admin. Once approved th comment will show on the book detail page.
Sign Up
Log In
Log Out
-
The Signup, Login, and Log out functionality was implemented using Django allauth. This authentication package was integrated into the project, enabling seamless user registration, login, and logout processes.
-
To enhance the user experience, success messages were incorporated to provide immediate feedback when users successfully log in or log out
- Once the user is logged in, they will be displayed on this view if it has uploaded any books. From here they have the option to edit or delete the books uploaded.
- If the user is logged in, then they can add a book by clicking on Add Book in the navigation bar.
- The form will be displayed with the required fields for the books's Title, Slug, Author, and Description, failing to complete them will render a message stating which fields you have missed.
- The field for the genre is a required field with a dropdown with different book genres, but it has a default blank option.
- The image field also has a default image to display as the book cover. in case the user do not upload a cover.
- The form fields for 'Description' include a WYSIWYG editor called Summernote to help the user format their content.
- Only a logged-in user can choose to edit a book they uploaded and showing in their "My Books" page. This is done by clicking the edit button on the book card.
- The form opens with all fields populated with the original content.
- If a user tries to edit a book (by changing the URL) without being signed in they are redirected to the login page.
- Only a logged-in user can choose to delete a book they uploaded and showing on their "My Books" page. This is done by clicking the edit button on the book card.
- The user is asked to confirm if they wish to delete the book or cancel.
- The vote question will only display the last poll title available for the coming month.
- The user has the option to click on the vote now button to see the book options for the vote, or to click on results to see the results up to the moment.
- The vote Choices will display the books up for a vote. A card with 3 books each with its Cover, Title, Author, and a Vote for this book button will be shown to the user.
- The User will need to select one option and then confirm the selection by clicking on Vote.
- If the user tries to vote for a second time a message will appear to inform the they have already voted on this question.
- If a user tries to access the vote (by changing the URL) without being signed in they are redirected to the login page.
- The Results page will show the current results for the monthly poll. A book cover thumbnail with the title and author will display the number of votes for each book.
- Add a filter option when accessing the books page, so the users can filter books by the different genres.
- Add a calendar for the user to see when signed in with the time and date of the monthly book discussion.
- Send automatic invitations to the users and reminders with a link to connect to the meeting.
To deploy this page to Heroku from its GitHub repository, the following steps were taken:
- Logged in to Heroku.
- On the main page clicked the button labeled New in the top right corner and from the drop-down menu select "Create New App".
- Entered the chosen app name.
- Next select the region.
- Clicked on the Create App button.
- In the Resources tab, under add-ons, type in Postgres and select the Heroku Postgres option.
- Copy the DATABASE_URL located in Config Vars in the Settings Tab.
- In my GitPod workspace, create an env.py file in the main directory.
- Add the DATABASE_URL value and your chosen SECRET_KEY value to the env.py file.
- Update the settings.py file to import the env.py file and add the SECRETKEY and DATABASE_URL file paths.
- Comment out the default database configuration.
- Save files and make migrations.
- Add Cloudinary URL to env.py
- Add the cloudinary libraries to the list of installed apps.
- Add the STATIC files settings - the url, storage path, directory path, root path, media url and default file storage path.
- Link the file to the templates directory in Heroku.
- Change the templates directory to TEMPLATES_DIR
- Add Heroku to the ALLOWED_HOSTS list the format ['app_name.heroku.com', 'localhost']
- Create requirements.txt file
- Create directories in the main directory for static and templates.
- Create a file named "Procfile" in the main directory and add the following: web: gunicorn project-name.wsgi
Add the following Config Vars in Heroku:
- SECRET_KEY value
- CLOUDINARY_URL
- PORT = 8000
- DISABLE_COLLECTSTATIC = 1
- NB: Ensure in Django settings, DEBUG is False
- Go to the deploy tab on Heroku and connect to GitHub, then to the required repository.
- Scroll to the bottom of the deploy page and clicked Enable Automatic Deploys. Every push to main will deploy a new version of this app. Deploys happen automatically.
The site is now live and operational.
- Locate the repository at this link Page Turner Book Club.
- Above the list of files, click on the green button with the word: Code.
- Copy the URL for the repository using HTTPS.
- Open the Terminal
- Change the current working directory to the location where you want the cloned directory.
- Type git clone, and then paste the URL copied earlier.
- Press Enter to create your local clone.
- Python
- HTML
- CSS
- Javascript
- Django
- Django-allauth
- PostgreSQL
- Heroku
- Responsive - Used to verify responsiveness of website on different devices.
- Chrome Dev Tools
- Font Awesome
- GitHub - Used for version control and agile tool.
- Google Fonts
- W3C
- PEP8 Online
- Jshint
- Colormind
- Favicon
- Lucidchart - to create the database design
- Grammerly - for proof reading the README.md
- Summernote
- Crispy Forms
- Cloudinary: for hosting the uploaded images.
- Bootstrap 5
- Tables Generator: Used to convert excel testing tables to markdown
- Javascript alert message
- W3Schools
- Django Docs
- Bootstrap 5
- Stack Overflow
- Pexels: All imagery on the site was sourced from Pexels.com
- Pixabay: for more images.
- Update View
- Pagination
- @login required
- Code Institute - Blog Walkthrough Project
- Poll
- Another Poll
- More polls
- The Gloss Book Club: for inspirations and a few frases.
- Success deleted message
- Success deleted message - Stackoverflow
I would like to thanks my Mentor, Andre Aquilina who supported my project idea and help me on my vote model that was missing one final twist to work as intended.
I am fortunate to have the unwavering support and invaluable feedback of my husband throughout this project. His continuous encouragement and guidance have been instrumental in my progress and success.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent