Blood of Eden Library
A home of fan stories set in the world of Tamsyn Muir's The Locked Tomb series, made for reading, commenting and rating
Blood of Eden Library is a web app aiming to entertain and inspire fan fiction enthusiasts. The theme of stories is limited to the characters and events based in the world of Tamsyn Muir's award-winning book series The Locked Tomb. Blood of Eden Library can be used by casual readers who just want to access the stories, or avid fans who want to create a profile and engage in conversation in the comments or rate the stories.
Contents
UX and Design
Site goals
Our web app will let users read and rate fan stories which will affect the fans of The Locked Tomb book series by being able to feel like a part of the community and participate in the fandom. We will measure effectiveness by the user feedback, activity levels and return rates.
Target audience
Fans of The Locked Tomb books:
- looking to connect with other fans
- looking to read more stories about their favourite characters
- wanting to share fan stories they created
- wanting to share their thoughts on fan stories
Direction
The principles and needs that were considered.
How might we:
- make it easy for users to pick the stories they would enjoy
- allow users to set up an account
- make it easy to create, edit and delete comments/ratings
- allow users to submit their stories
- make it easy to understand the site's theme and purpose
User journeys
Design choices
The aim with the design choices was to slightly evoke the nostalgia feeling of the "old web" fan forums - choosing simple rectangular shapes and buttons, mono typeface and a colour scheme that both meets standards of accessibility and calls to mind that MySpace era. A design moodboard was compiled by me using Mural. In addition to this, the imagery used is both relevant to the macabre visuals of the book series and fits the theme of stories and libraries.
User stories
I identified 16 user user stories and used the MoSCoW method to prioritise the backlog (as illustrated), ending up with 11 user stories for the MVP. The project progress was planned and tracked using Agile, as documented here in GitHub Project
Wireframes
The wireframes were created in Balsamiq following the ideation and mapping out the user stories. Mobile first approach was utilised, and layouts for each page were considered.
-
Mobile low fidelity wireframes
-
Desktop low fidelity wireframes
-
Story detail page high fidelity
Database structure
The database structure is based on Code Institute's walkthrough project Codestar Blog. Below is an overview of the customisation I implemented and the relational diagram created with Lucidchart.
- User This is a Django predefined class incorporating an username & password to log in
- Story This is the main class, I added tags to ensure users have additional information to help them choose what they would like to read
- Comment Related to the Story class, I added a rating integer field to allow users to rate the stories as well as comment as an additional form of engagement
- About This class stores the information and image the admin can add and update to give users more background on Blood of Eden
Features
Existing features
- Paginated list of stories (User story)
A list of each published story, newest to oldest. The stories are limited to 6 per page and display the story title, author, summary, tags and date.
- Story detail view (User story)
A detailed view of the story, showing the full text and the featured image.
- Comments and Rating display (User Story)
Below each post, all approved relevant comments and ratings are displayed.
- Comments and Rating form (User Story)
Below the existing comments, users can use a form to leave their comment and rating.
- About page (User Story)
A page with information about the theme and aim of the website.
For the full list of implemented features, please refer to the project board
Planned features
- Submit stories As a Site user I can submit stories so they can be reviewed by the admin
- "Like" comments As a Site User I can leave like comments that I agree with
- Favourite stories As a Site User I can favourite a story so I can easily find it again
- Add stories As a Site user I can create draft stories so that I can finish writing the content later or submit for admin approval
- Comment chains As a Site User I can reply to comments on a story so that I can continue the conversation
Testing
Manual testing
Manual testing was used to check through each acceptance criteria of the implemented User Stories, and to test the responsiveness of each web app template (using Chrome Devtools). Each of these passed after a round of bug fixing.
Validator testing
-
HTML Necessary errors resolved, however there are some error messages remaining due to the content created using Django Summernote editor in the admin panel and AllAuth generating the Registration form.
-
CSS No issues found
-
JavaScript All issues and warnings cleared
-
Python All custom Python files were tested using CI Python Linter. All errors cleared, except for a handful of errors "Line too long", due to code generated by Django.
-
Colour contrast All text and visual input on the site meets WCAG AA standards.
Deployment
- Repository created in Git
- Deployed to Heroku
- Connected Secret Keys to Config Vars
- Connected Code Institute PostGres Database
- Connected Cloudinary media storage
Live link
https://blood-of-eden-d0985035c7c3.herokuapp.com/
Resources and credits
Content
- To avoid using real fan writers' IP, all currently published stories on Blood of Eden are generated by Chat GPT
Media
- Favicon generated using Favicon.io. The emoji graphics are from the open source project Twemoji. The graphics are copyright 2020 Twitter, Inc and other contributors,licensed under CC-BY 4.0.
- Hero and background images on the home page, about page and stories pages are from Pexels
- Story featured images have been generated by Chat GPT
- Coolors for generating a cohesive colour scheme
- Design moodboard
Code
- Django Taggit for tag implementation in the Story model
- Icons used from FontAwesome
- Fonts Cousine and Rubik Mono One imported from Google Fonts
- Django documentation for reference
- W3Schools for reference
- Code Institute - Codestar Blog was used as a base and modified to create this project
- Special thank you to Lewis, David , Mark and Spencer at Code institute for support and tips