The site's aim is to provide a place for users to share characters they no longer need, or to find character ideas from those uploaded from other users. The site targets fantasy writers firstly but the character lists can be utilised by role-players or anyone with an idea they'd like to share.
Firstly the site aims to benefit the user community, and secondly to grow a user database by running competitions via the monthly newletter with user-submitted short-stories and awards for best uploads.
-
- I want easily understand the site's purpose.
- I want to navigate the site's content.
- I want to understand how to create my own characters.
-
- I want to see characters I have created.
- I want to edit or delete my characters.
- I want to contact the site admin.
-
- I should be able to edit / delete any character.
- I want to edit or add new character roles.
-
- #8e24aa (Deep Purple) - Nav, forms and footer.
- #00e676 (Green), #ff1744 (Red), #2979ff (Blue), #ffea00 (Yellow) for buttons.
- Standard whitesmoke for body background.
-
- font-family:'Montserrat' for body font, and font-family:'Permanent Marker' for headers and some flash messages. Both from Google Fonts. Sans Serif is used a fallback.
- Responsive on all devices with:
- CSS Media Queries for showing/hiding elements on scaling.
- Collaspible Header with side nav for mobile devices.
- Contains interactive elements such as:
- Searchable database.
- User authentication via register/log in/ log out.
- Loops to hide/show various navigation options depending on user status.
- Contact form linked with Emailjs.
- C.R.U.D. functionality scaled with user status.(user/ unregistered / admin).
- Email.JS - for contact form.
- GitHub
- Jquery
- GitPod - IDE.
- Materialize (including JQuery) -Utilized for responsiveness via columns, buttons and navbars.
- Google Fonts - Used for header and body fonts throughout.
- Font Awesome - For icons.
- Google Chrome's Responsive Viewer found here
- Google Chrome's lighthouse function.
- Jinja - For template engine.
- Flask - For creating views and methods.
- Werkzeug - For password hashing.
- MongoDB - Database.
- Heroku - For hosting.
- Using W3C validator both HTML and CSS were checked by direct input. Issues arising were promptly corrected.
- JsHINT- Used for Java Script validation. Warnings relating to the use of 'let' to declare variables. The script was not amended to address these.
-
I want to easily understand the site's purpose.
- The index page utilises eye-cathcing colours, fonts and clean lines with an upfront description of the sites aim.
- Users are immediately granted access to the site's database via clickable images which redirect to the characters page.
- Users are made aware of the site's policy, and the added benefits to registering.
-
I want to navigate the site's content.
- A static, collaspible header contains all the nav elemnets available to new users. Although registration/login is rerquired to access more functions, the main database is available to read. As are the contact, register and Log In pages.
-
I want to understand how to create my own characters.
- The index and characters pages inform users how to create characters. New users can register a username and password which instantly grants them create, update and delete functionality for their characters. Upon registration, new users are brought to their profile page which, in time, will display all their characters, on first visit they are offered a chance to create their first character.
- On clicking 'create' a form is rendered where the user can populate the required fields. The character's role must come from an existing list via a dropdown. All users are free to populate the other fields as they wish.
- Upon completeion, the user is redirected to the characters page with a flash messsage for confirmation, and their new character is added to the database. The new character is also viewable from their profile page.
-
I want to see characters I have created.
- A returning user can log in, afterwhich they are brought to their profile page which displays any previously created characters listed from newest addition to oldest. The profile page is always available in the nav bar for logged in users.
-
I want to edit or delete my characters.
- Only characters created by a user can be edited or deleted by that user. Characters can be deleted or edit from the user's personal profile page or from the main characters page.
- Characters eligible for edit or delete will have the available buttons displayed in their drop down.
- To Edit : clicking the edit button renders a form populated with the selected character's information. The user can make their intended changes and click 'Save Changes', or cancel the request altogether. Both options return the user to the characters page with a flash confirming edits or a reloaded characters' page in the case of a cancel.
- To Delete : clicking the delete button calls a modal to warn the user all deletions are permenant. The user can cancel the process at the modal, or proceed to final confirmation by accepting the warning. Upon accepting the modal warning a 'delete forever' button is displayed which when clicked deletes the selected character from the database with a flash message to confirm.
-
I want to contact the site admin.
- All users can navigate to the contact page in the nav bar. There is a simple form available to contact the site's admin. First name, email and a message is all that is required. Links to social media accounts are also available in the footer.
-
I should be able to edit / delete any character.
- Upon log in, an administrator is brought to their profile page which lists all their characters. The characters page which lists all charcaters is also available but unlike standard users, the admin has the ability to edit or delete all characters in the database.
- To Edit : clicking the edit button renders a form populated with the selected character's information. The admin can make their intended changes and click 'Save Changes', or cancel the request altogether. Both options return the admin to the characters page with a flash confirming edits or a reload characters' page in the case of a cancel.
- To Delete : clicking the delete button calls a modal to warn the admin all deletions are permenant. The admin can cancel the process at the modal, or proceed to final confirmation by accepting the warning. Upon accepting the modal warning a 'delete forever' button is displayed which when clicked deletes the selected character from the database with a flash message to confirm.
-
I want to add, edit or delete new character roles.
- When logged in as admin, the roles page becomes available. The page lists all roles currently live on the site from which users can choose for their characters. Roles are listed in alphabetical order.
- To Add : a 'Add Role' button is prominently displayed at the top of the roles page. Clicking the button brings the admin to add_role.html which contains a single row form the admin can populate. (There is a built in check to stop duplicate roles being created which flashes a message and returns admin to the roles page.) Here they can cancel the operation, or proceed with their addition. Adding a role diverts the admin back to the roles page with a flash message as confirmation.
- To Edit : a 'Edit / Delete' button is available to the admin for each populated role. Upon clicking the admin is brought to
edit_role.html which pre-populates the single row form with the current role selected for edit or delete. The admin can
cancel the request, or proceed with editing. A usccessful edit returns the admin to the roles page with flash message for
confirmation.
| Page | Performance | Accessibility | Best Practise | Seo |
|---|---|---|---|---|
| Index | 99 | 92 | 93 | 90 |
| Characters | 99 | 94 | 100 | 89 |
| Profile | 99 | 100 | 100 | 89 |
| Roles | 99 | 94 | 100 | 89 |
- URL access:
- Python checks for the presence of the session cookie before progressing to pages via the url. In the case of admin only access it also checks the user both exists AND is the admin. Here is a code example: (if session and session[" user "] == "admin":) ref app .py , line 213, add character role. This check can be found throughout the app .py file for any views which require valid log in such as create_character, edit_character, edit_role, add_role, and all delete functionality.
- Unregistered user:
- Can only view the following pages. Home, characters, register, log in and contact.
- Cannot create, edit or delete characters. All relating buttons remain hidden.
- Cannot login prior to registering. Though, the flash messaging doesn't explicity say the username is unregistered, it does flag an issue to the user regarding their details entered. Both login and register have corresponding links and notes to each other. 'New here? Register Account' or 'Already Registered? Log in'.
- Cannot use URL to access any other pages.
- Registered and logged in users:
- Can also view the profile page.
- Can create, update and delete only their own characters.
- Cannot use url to access any extra pages such as roles.html.
- Admin :
- Can view all pages including the roles page.
- Can create, update and delete all created characters.
- Internal page links and external links in the footer were manually tested.
- Loops are utilised throughout to check user status and decide which nav bar elements can be viewed.
- Loops are also tasked with displaying only characters created by a user on their profile page.
- A loop also ensures users are kept abreast of all currently searchable roles on the characters page.
- Also on the characters page, a loop nudges users to log in or register if no user is detected, but hides the nudge if user exists.
- Create a requirements.txt file. Command in gitpod is 'pip3 freeze --local> requirements.txt'
- Create a Procfile (Capital 'P' and no file extension).
- Push the two new files to your repository.
- Login in to Heroku and from the dasjboard select 'New' > 'Create new app'.
- Create a unique app name utilising '-' instead of spaces. Select your closest region from the dropdown. Then click 'Create app'.
- To connect the app use the 'Connect to Github' option for a simplified process. Enusre you github user profile is display after selction. Then, serach for the github repository you wish to connect. Then click 'Connect'.
- Go to settings at the top of the heroku page. Then, scroll down 'Reveal Config Vars'.
- Here you enter the following data from your env .py file : Keys for IP, PORT, SECRET_KEY, MONGO_URI, MONGO_DBNAME and their corresponding values.
- Return to the delopy tab in heroku and click 'Enable Automatic Deployment, then 'Deploy Branch'.
- Upon success you will see 'Your app was successfully deployed' and an option to view the app.
- A live version can be found here: I Need A Hero
The project was developed using GitPod workspace, committed to git and pushed to GitHub using the built in function within Gitpod. To deploy this page from the GitHub respository, the following steps were taken.
- Log in to GitHub.
- From the list of repositories on screen select 'I_Need_A_Hero'.
- Select Settings from the menu.
- Scroll down to GitHub Pages
- Under Source click the dropdown menu labelled none and select the Master Branch.
- On selecting Master Branch the is automatically refreshed, the website is now deployed.
- A link can be found in the GitHub pages section, and also in the about section within I_Need_A_Hero.
-
Go to GitHub Repository: I_Need_A_Hero
-
Select 'Code' dropdown button (next to green 'gitpod' button).
-
These are your three options Clone-Options.
- Copy the URL to your local IDE such as Visual Studio.
- Intsall GitHub desktop.
- Download the Zip file and use with local IDE such as Visual Studio.
- Validation for character form taken from Code Institute project walkthrough video. Ref script.js line 45 > 72.
- Initially uploaded characters were created by the developer.
- README layout taken from Code Institute's sample README.
- Code Institute Tutorials, student support and my Mentor.