This project is designed to showcase the flask framework written in python. To keep the project interesting, the cast of The Hobbit feature in a storytelling capacity where the user experiences a 'meet & greet' environment.
Furthermore, the website serves as a fan club for avid followers of The Hobbit, where the user can register to join a community of like-minded Hobbit fans.
- The registered customer belongs to a community of The Hobbit enthusiasts
- Provide a clear insight on Thorin and his company of dwarfs
- Access to the latest links to offer user accurate information on all characters
- Start a conversation upon latest news, old stories, etc through social media channels
- Happy to browse current reading material, without obligation to purchase
- Assured that personal details are secure from unauthorised access
- Only registered users will enjoy benefits of joining the Thorin & Co community
- Creation of a MyHobbit account is only for registered users to ensure bonafide credentials
- Provide a simple and intuitive site for the user to click, search, read, create, add, update & delete own data. Access levels are determind through whether user has successfully registered
- Use customer feedback to further improve the offerings of Thorin and Dwarf Company
- Monitor user demand to help generate positive marketing campaigns
- Create e-commerce capability to enable registered users to shop for The Hobbit merchandise
- Leverage footfall data to attract commercial online advertising, with resultaqnt revenues used to maintain and grow website
- Affiliate with film and cinema organisations through embracing user product affinity
- Create social media channels to promote 'Thorin and Dwarf Company'
My wireframe mock-up designs have been created in Balsamiq to showcase the 'Thorin & Dwarf Company' website responsivenesson mobile, tablet and desktop devices.
I need an app that provides quick and intuitive access to introduce me to The Hobbits characters
I want detailed information on the characters background, behavioural attributes and relationship with the overall group
My personal information must be secure and password protected
To have access to social media channels to understand news and views of fellow enthusiasts
I would like the opportunity to write a review / provide feedback of my user experience via a contact facility
I want to view good quality images of all characters
I want to view and read individual character write ups
Bootstrap was the chosen framework for styling my project. I used the Bootstrap grid extensively to support responsiveness on mobile, tablet and desktop devices.
Colours used in this project were sourced from MyColor Space. Essentially, the colours are seeking to capture a combination of fresh and earthy tones to support the key attributes of The Hobbit. Personal growth, forms of heroism and motifs of warfare.
| Colour | Hex Code |
|---|---|
| Oil Blue | #0085A1 |
| Deep Oil Blue | #00657B |
| Raincloud Grey | #868E96 |
| Silver Grey | #E9ECEF |
| Steel Grey | #DEE2E6 |
| Coal Black | #212529 |
| White | #FFF |
H1, H2, H3, H4, H5 & H6 header classes
Open Sans, Helvetica Neue, Helvetica, Arial & Sans-Serif fonts were used for the header classes.
Body class
Lora, Times New Roman & Serif fonts were used throughout body class.
Font Awesome 5 icon graphics were used in conjunction with Bootstrap 4, primarily to support information section headers
| Page | Function | Font |
|---|---|---|
| base.html | Social Media - Twitter | fab fa-twitter |
| base.html | Social Media - Facebook | fab fa-facebook |
| base.html | Social Media - Instagram | fab fa-instagram |
For tablet and desktop views, the navbar offers 5 functions on a horizontal view. For mobile devices, all the same options collapse into a responsive design.
- Brand Image
- Home
- About
- Contact
- Register
• HTML used as the markup language
• CSS3 used to style the HTML
• JavaScript used mostly for DOM manipulation. cdnjs.cloudflare.com used to animate .hover function on navigation menu elements
• Font Awesome to provide the icon set for Re-Boot website
• Google Fonts provided the fonts Mukta & sans-serif used throughout the project
• jQuery is used to manipulate the DOM, for example buttons, and showing / hiding elements
• Bootstrap to enable ease of website responsiveness and simplify coding structure
• AWS Cloud9 a cloud-based integrated development environment (IDE) that lets you write, run, and debug your code with just a browser.
• Balsamiq is a small graphical tool to sketch out user interfaces, for websites and web / desktop / mobile applications and used to visualise my project through mock-up design.
• Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency.
• GitHub is a code hosting platform for version control and collaboration. It lets you and others work together on projects from anywhere.
• Jigsaw - CSS validation this validator checks the markup validity of CSS style sheet and ensure coding convention is upheld
• JS Hint a tool that helps to detect errors and potential problems in the javascript code
• W3C - HTML validation this validator checks the markup validity of HTML web documents
Home (index.html)
- User can view important quotes posted by characters from The Hobbit
- Links are available to the source of the posted quote and to wikipedia for detailed narrative on the character
- More quotes are available to view through clicking a more posts button
- User can access social media channels for twitter, facebook & instagram
About (about.html)
- A holistic insight into the The Hobbits group of characters is made available for the user
- Name of the character is supported by a descriptive narrative and a colour image
- User can click on the character name to navigate to a single profile view
- Once the user has finished viewing the single profile, they can click a return button to head back to
about.htmlpage - User can access social media channels for twitter, facebook & instagram
Contact (contact.html)
- User is required to complete their name, email address, phone number and a message to initiate a message request to Thorin & Co
- The users data entry is supported by placeholder text in each input box
- All input boxes are required to be completed by the user
- User can access social media channels for twitter, facebook & instagram
Register (register.html)
- User will experience the registration process via a modal window
- All users can apply to register to Thorin & Co for full membership
- Users are required to provide their first name, surname, email address and create a password too
- All input boxes are required to be completed by the user
- Full user authentication and registration process to be created to ensure protection from mis-adventure or malicious attack
- Contact process to be connectd ot emailJS to ensure a valid email message can be sent and received
- MyThorin to be created to enable user to self-service their personal details and change password
Test analysis and reporting can be viewed in a separate TESTS.md file.
The site has been formally deployed to Heroku and the latest version of my application can be found here. The following steps were taken in order to deploy:
- Flask debugging turned off by setting debug=False
- Requirements.txt file created with the command
sudo pip3 freeze --local > requirements.txt. This is essential - Procfile created withthe command
echo web: python run.py > Procfile - Push all my latest production ready code to GitHub ready for deployment via Heroku's GitHub function where you can deploy from GitHub the production ready app
- From the Heroku dashboard I created a new app, using the name thorin-and-dwarf-company and set the region to Europe
- In the settings tab I clicked reveal config vars and entered the required environment variables, which in this case were:
- Key =
IP: Value =0.0.0.0 - Key =
PORT: Value =5000 - On the deploy tab, in the Deployment method section I chose deploy from AWS Cloud 9 IDE via command
git push heroku master
- Key =
-
Manually download the application locally to your machine and then upload to your preferred IDE
-
Install the projects requirements.txt using
pip3 install -r requirements.txt -
A few environment variables need to be updated before you can run the app:
import os- We're using os module to get the 'enviroment' variable > helps connect to AWS Cloud 9 IDEimport json- Pre-requisite for importing json data into flask applicationfrom flask import Flask, render_template, request, flash- Importing our Flask Class. Render_Template supports writing of HTML code in python file.app = Flask(__name__)- Flask convention (name) is our variable is called 'app'. Creating an instance & storing in a variable called 'app'
-
Once the above steps are complete you can try run the application using
python3 run.py
- Clone my repo via Git using the following command
https://github.com/Spagettileg/thorin-and-dwarf-company.git - Install the projects requirements.txt using
pip3 install -r requirements.txt - A few environment variables need to be updated before you can run the app:
import os- We're using os module to get the 'enviroment' variable > helps connect to AWS Cloud 9 IDEimport json- Pre-requisite for importing json data into flask applicationfrom flask import Flask, render_template, request, flash- Importing our Flask Class. Render_Template supports writing of HTML code in python file.app = Flask(__name__)- Flask convention (name) is our variable is called 'app'. Creating an instance & storing in a variable called 'app'
- Once the above steps are complete you can try run the application using
python3 run.py
- Gandalf quote sourced from Good Reads
- Gandalf character information sourced from wikipedia
- Balin quote sourced from The Character Quotes
- Balin character information sourced from wikipedia
- Thorin Oakenshield quote sourced from bookroo
- Thorin Oakenshield character information sourced from wikipedia
- Bilbo Baggins quote sourced from LOTR Project
- Bilbo Baggins character information sourced from wikipedia
- Thorin README.md image sourced from wallpaper-house
- Introduction banner image sourced from live.staticflickr
This website to be used for educational purposes.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent
