Forex Comics: Foreign Exchange Comics.
This is the third milestone project of my Code Institute Full Stack Software Development studies. The objective for this project is to "Create a web platform to enable the exchange of foreign language comic books", using the CRUD operations of Create, Read, Update, and Delete.
It is designed for three types of users, broadly defined as language learners, booksellers and schools/colleges. This particular project is underpinned by my own love of learning languages and comic books/graphic novels. In fact, I spent three years living in Colombia and picked up Spanish quite quickly through the aid of Los Muertos Vivientes (The Walking Dead), which accelerated my language learning as well as introduced me to fellow nerds with whom I could practice.
It is my conviction that language learning can be fun, and with the abundance of comics readily available, they can introduce readers to various languages in a way that rote textbooks and stolid boring list tables cannot.
- User story 1: A language learner who wants to improve their proficiency in a specific language.
- User story 2: A bookseller who wants to sell their comic books/raise awareness of their store (digital or physical).
- User story 3: A language school/college that wishes to supply novel language comics to the classroom and curriculum to attract and engage students.
- User story 4: Comic book fans in general who want to read widely.
- User story 5: Comic book fans who want to meet likeminded people and/or others from different cultures/countries.
I wanted to adopt a comic-book style theme with this project. Somewhat 'blocky' to mimic a comic strip layout, and with vibrant colours to make it more fun.
- Materialize 1.0.0
- Despite instructions to the contrary in a Code Institute video, I decided to adopt the most recent version of Materialize which behaved itself pretty well.
- Used Parallax theme because it closely resembled my wireframe mockup, had an elegant style and I wanted to try a new CSS framework having previously worked with Bootstrap.
- A grid layout system was similary used in Materialize although there were a few differences in naming conventions expecially in making content responsive.
- jQuery 3.4.1
- I used the most recent version of jQuery for my Javascript framework.
- Flask 1.1.1
- Flask is a web framework that enable web applications builds which I was determined to use to make backend coding easier.
I wanted to use bright colours, particularly red and blue from Materialize to enforce a 'Superhero' theme - think Superman. I purposely styled the buttons, footer and header this way to ensure consistency keeping it simple.
#00bcd4(cyan - primary colour used in base.html for navbar and footer, and Database comic button for edit)#f44336(red - secondary colour used in Database comic button for view and closely resembles head parallax)#fb8c00(orange darken-1 - tertiary colour used to reset Database, and for affiliate link on specific comic page - designed to give it an Amazon look)
- I used the Materialize Icon library for icons which appear on forms, the comic card in Database and the respective comic page.
- I imported the Montserrat theme from Google Fonts for this project and have used it throughout the site. My motivation for choosing this theme is because I felt it was a little softer than the default, and more appropriate for the intended target audience.
I used Balsamiq for desktop wireframes for two reasons:
- Students have free access to the desktop version until the end of 2019.
- I really enjoyed how simple and easy it is to use for mockups especially in conversations with my assigned mentor for brainstorming.
- Used Materialize's Parallax Template for its ease of use and simple design.
- Deployed a Sticky navbar which makes navigation easier for the user, especially on mobile.
- Navigation items from left to right:
- Logo - Simple logo which will act as link to home page on smaller devices (centered on mobile).
- Home - Link back to the home page.
- Learner - Link to learner (students) section of website
- Bookseller - Link to the Bookseller section of site.
- School - Link to the School section of site.
- Database - The place where my comics reside.
- Add Comic - Grant users the ability to add comics.
Sidenav pops out on small to medium devices (max-width 992 px) and contain the aforementioned nav links.
- Two parallexes (paralli?) run across the home page and subsequent user profile sections. Images fit the criteria required by Materialize to render correctly. Image references listed in the Media section at the bottom of this document.
- Simple grid system allowed me to center align and effectively communicate to the user, the next steps based on their profile of Learner, School or Bookseller. Their choice is of course dependent on their user profile and interest.
- Displayed when no filter choice is selected.
- Displayed with the request for deletion of comic on the comic page.
- On Add Comic section there is a simple Materialize collapsible form.
- Displayed in the Learner section, built with HTML and styled with CSS.
- Materialize popup notification which I've used in the Learner section to reveal comic meetups.
- Used Parallax theme footer and simply indicated purpose of site, share my Github and linking to Facebook.
I have a strong desire to fully flesh out this micro-site to become a business. To that end, there will need to be many more features to reward and ensure the customer journey and exchange is seamless.
Pagination - I've purposely kept the database small to display my prowess in manipulating the data for the users needs. As needs evolve, and more people (especially Booksellers and Schools) become involved, then a much more comprehensive database and a way to effectively display these comics will be required.
Comic Page | Affiliate Links - Affiliate links which connect to either 3rd party vendors and/or Booksellers who are registered and have a digital online store. Currently, this is set on all comic pages to point to the Amazon site. It makes no sense to make 'affiliate' a form field for users, therefore this would be something that either the Bookseller, and/or website administrator would input either on the 'Add Comic' or 'Edit Comic' section. Access and rights to use that feature would be enabled via their login rights - the affiliate addition only visible to the aforementioned parties.
Registration/Log-in - Hugely important for future progress. The current ability for every visitor to add/delete comic could cause havoc to my database. NB. Post-Completion, this event DID actually take place - my db wiped. As a result, I've hidden my db details (as they were public on github before) and removeed the ability for users to delete! Lesson learnt! For the purposes of this project, I decided against setting up a registration page as it was not part of the requirements. Suffice to say, it will be added once I cover Django in the course.
Add Comic/Image - I would like users to be able to upload comic images from their phone or device, instead of linking to an image source online.
- AWSCloud9 - Primary IDE for coding and enabled me to connect and push to Github/Heroku as needed.
- Gitpod - Used for the closing stages of my project because I ran out of credits on AWS.
- GitHub - Used to store code in a remote repository, hosting and for successful deployment of site.
- HTML
- HTML5 - Used to structure pages, forms and associated content with user profiles as well as database. It also featured in the nav and footer sections of the page.
- CSS
- CSS3 - Used as the base for cascading styles.
- JQuery
- jQuery 3.4.1 - Used to improve and simplify Javascript code.
- Materialize
- Materialize 1.0.0 - Used as the overall CSS design framework.
- Flask
- Flask 1.1.1 - Used as a microframework.
- Jinja 2.10.3 - Used as a template engine w/ Flask.
- Heroku
- Heroku - Used for app hosting.
- Python
- Python 3.6.7 - Used as the back-end programming language.
- MongoDB
- MongoDB Atlas - Storage of my online remote database.
I used five active collections in my ForexComix database.
- DBComix: Multiple documents, each displaying comic fields (language, genre, condition, difficulty, etc.)
- Languages: 8 Documents for each language.
- Genre: 6 Documents for each genre.
- Condition: 4 Documents for each state.
- Difficulty: 3 Documents for each level (Easy, Medium, Hard)
- MongoDB Atlas - Storage of my online remote database.
I used five active collections in my ForexComix database.
- PyMongoDB
- PyMongo 3.9.0 - Python API for MongoDB.
Testing for each user scenario:
- User story 1: A language learner who wants to improve their proficiency in a specific language. | Site serves its purpose allowing exchange of comics. ✅
- User story 2: A bookseller who wants to sell their comic books/raise awareness of their store (digital or physical). | Booksellers can add their comics, clarify that it is 'NOT' owned by individual, and denote their biz/shop in Description field. ✅
- User story 3: A language school/college that wishes to supply novel language comics to the classroom and curriculum to attract and engage students. | Achieved. School can access database of comics. Subscription will be a future requirement to be built. ✅
- User story 4: Comic book fans in general who want to read widely. | Multiple languages, interests covered as well as meetups which will be organised at a future date. ✅
- User story 5: Comic book fans who want to meet likeminded people and or others from different cultures/countries. | Meetings forthcoming as discussed above. As a reference, comic book fans will be served by site which displays various comic themes appealing to comic fans. ✅
All the comics listed have been created by myself via mobile device (Samsung Galaxy A10) and on desktop. I have also shared the site with friends and family to test, both for responsiveness, and ease of use. The feedback I received revealed that the user experience, trialling as either a learner, seller or school was overwhelmingly positive. Adding, Editing and Deletion of various comics was successfully completed by multiple users.
Add Comic
- [CRUD] Add a new comic. Selecting this option in the navbar will lead to a responsive form where a user can complete requisite fields. Changes are updated to MongoDB, and are immediately reflected in the Database section of the site.
Read/View Comic
- [CRUD] Read/Review comic, either from the database page (display all), filter, or by drilling into the comic in question to find its appropriate page.
Edit/Update Comic
- [CRUD] Update a comic by clicking the relevant button on the card in the Database section. Current values are shown to the user on the edit comic page with simple edits easy to make.
Delete Comic
- [CRUD] Delete a comic. By clicking the 'Delete' button within the specific comic page, it prompts a modal which (when user wants to delete) will bring the user back to (updated) database page.
Filter Comic
- Despite it not being a requirement of the project, I felt it was important to enable a filter option. This is critical for students who have a particular language in mind. This successfully works and the filter can be applied to either Language or Genre. Further options would be overkill at this stage, especially for such a small database.
Regular testing was conducted throughout the course of this project, especially before commits to Github.
Responsive/Mobile-first design was tested using Chrome developer tools to ensure desired layout was achieved. As well as Chrome, I also used Safari (12.0) and Firefox (68.0.2) which collectively successfully affirmed my project's responsiveness. To test responsiveness, the following mobiles were tested Galaxy S5, Pixel 2, Pixel 2 XL, iPhone 5/SE 6/7/8 Plus X, iPad and iPad Pro. All successfully passed in mobile responsiveness of the page.
HTML
- HTML Checker. Successfully passed the checker without triggering any errors.
CSS
- W3C CSS Validator. One error occurred but it pertained to the Materialize.min.css URI, in particular, claiming unknown vendor extensions for numerous elements.
| Number | Issue | Resolution |
|---|---|---|
| 1 | Source image not displaying for added comic | Fixed |
| 2 | Pagination | Not a priority for this project |
| 3 | Comics aren't being drilled into correctly | Fixed w/ help from mentor |
| 4 | No filters applied to comics | Finally achieved w/ help from mentor |
| 5 | Modal affecting deletion of chosen comic | Changed button from it being on the card to it being on page - works fine |
| 6 | Buttons on cards askew in iPad mode | Changed grid layout to m4 to accommodate and changed card type |
| 7 | Stock image provided if user doesn't upload one of their own | TBC (For now, made it a required field) |
| 8 | CSS styling over-riding by Materialize framework | To counter this, I made inline edits to HTML when custom stylesheet wouldn't apply changes |
Deployed using the Master Branch on hosting platform GitHub Pages.
The following steps were taken:
- Create a
masterbranch in Github repository - Use Local AWS Cloud9 environment to build the site
- Commit files to the staging area using bash terminal commands:
git status;git add (specify directory);git commit -m "add message" - Push files to the working environment using
git push, which updates the repository - Publish site from
masterbranch usingsettingstab in the main page of the repository, selectsourceasmaster branch, thensave
Deployed on Heroku using the master branch on GitHub. To implement this project on Heroku, the following steps were taken:
- Create a requirements.txt file so Heroku can install the required dependencies to run the app.
sudo pip3 freeze --local > requirements.txt- My file can be found here.
- Create a Procfile to tell Heroku what type of application is being deployed, and how to run it.
echo web: python run.py > Procfile- My file can be found here.
- Sign up for a free Heroku account, create your project app, and click the Deploy tab, at which point you can Connect GitHub as the Deployment Method, and select Enable Automatic Deployment.
- In the Heroku Settings tab, click on the Reveal Config Vars button to configure environmental variables as follows:
- IP :
0.0.0.0 - PORT :
8080
- IP :
- App should be successfully deployed to Heroku at this point.
N.B. - I ran out of credits on AWS Cloud9 shortly before completion of this milestone which required the creation of a new repo, app and migration to Gitpod IDE. Please note original (incomplete) repos albeit with the majority of my commits on Github and Heroku app.
- I have taken liberties with the specification of the comics, choosing to demonstrate a range of fields allowing easy filter for users.
- The content of the various user profile sections is my own.
- Responsiveness and device images from Responsive Design
- Favicon created at Favicon.io
- Logo created at Logohub.io
- Image Gallery:
- Comic Database covers - the sources for these have all been stated in the appropriate field (a requirement). To see these, the user can 'Edit' each comic in turn.
- Modal Code via Andreas Molle on JS Fiddle.
- CI Slack Channel where I've lurked for answers to many questions throughout this project, especially when it comes to the move to Gitpod and filtering of comics (Hat tip to ShaneMuir)
- Inspiration and structural format for this README from Travel Tim's oustanding project
- Brian Macharia, my CI mentor, for his support and patience.