Integration status
YouFic, short for "You Fiction", is a website that facilitates the sharing of user created fiction stories. The name "YouFic" (short for You "Fiction") is a play on the title of the iconic website "YouTube". With YouTube, users can upload videos created by themselves for all to see. YouFic offers a similar service for people who want to share their fiction stories with the world.
The goal of the website is to provide a central place where readers of fiction can access the latest user created stories. It also aims to be a place where aspiring writers could potentially get noticed by publishers.
The website is designed to be pleasant to use on both desktop and mobile devices. Good user experience on mobile devices is essential as many many people read whilst on the move on-board public transport etc. This dual functionality is achieved through the use of responsive design principles.
User story 1:
As a regular reader of fiction, I would like to browse the stories available and quickly select the one I am interested in. The short descriptions featured on the website for each story helped me select the stories I was interested in.
User story 2:
As a fan of science fiction, I would like to filter my browsing session to only display science fiction stories. I was able to use the websites category links to achieve this.
User story 3:
As an aspiring writer, I would like a service where I can quickly and easily publish my work and build a name for myself. After registering with the website, I was able to submit my stories for all to read.
User story 4:
As a fan of amateur fiction, I like that there is a resource for writers and fans to consume and create content. I was able to support the website by clicking on the donate link and helping pay for the upkeep of the website.
Wireframes
Main index page wireframe
Here we see the main layout to be used throughout the website. We have a navigation bar with buttons that will link the user to various sections of the site. We have a home button that can instantaneously bring the user back to the index page from anywhere on the website. We see a drop down list that the user can select a category of story to read. We see the story's laid out in a grid fashion. The use will be able to click on any of the stories in the grid and they will be taken to a page that displays that story.
Image... Main index page
Login page wireframe
Here we see a typical login dialogue. There is a password field and a username field along with instructions for the user. Note the social media links section in the footer.
Image... login page
Submit a story page wireframe
This is what the user should see should they be logged in and click the "submit a story" button. There are various fields for the user to fill out such as the title of the story as well as the users name that will be the author of the story. The user also should have the choice of four category's for their story. This category will be used to sort the story's on the main page.
Image... submit a story page
Must register page wireframe
Here we see what should happen should a user try to submit a story without being a member of the website. The user should be conveniently linked to the registration page should they see this message.
Image... must register page
Donate page wireframe
The user should be informed that their contribution is appreciated. There should also be minimal barriers in the way of a user making a payment. It should be simple and fast. Note the credit card details field as well as the security fields such as CVV and expiry date fields.
Image... donate page
- Responsive
- Browse as guest
- Browse as member (allowing upload of content)
- Make a donation to the running of the website
- Submit a story to the database
- Read the story's of other members
- Works well on both desktop and mobile devices
There are three main apps developed for the website that could be potentially used again in other projects.
Accounts
A heavily modified version of the Accounts app developed based on tutorials by the Code Institute. As the app was developed for Django 1, the main modifications revolve around updating syntax to target Django 2.
Donate
Handles payment functionality. Makes use of checkout.js to render the payment form.
Story
Renders all of the story thumbnails, deals with sorting the story's into categories. Also displays individual story's for reading by the user.
Story:
title (CharField) author (CharField) description (TextField) image (ImageField) category (CharField, Adventure, Fantasy, Mystery, SciFi) text (TextField) published (DateTimeField)
Accounts by Code Institute
The website utilises a heavily modified version of the "Accounts" Django app created by Code Institute as part of the tutorial series "Authentication and Authorisation".
https://github.com/Code-Institute-Solutions/AuthenticationAndAuthorisation
Stripe 'checkout.js'
Checkout.js by Stripe encapsulated much of the payment functionality used to create the 'Donate' button.
The following tutorial by William Vincent provided inspiration for payment integration on this website:
https://testdriven.io/blog/django-stripe-tutorial/
Forms Bootstrap
Many of the forms used throughout the website were styled and implemented using forms-bootstrap.
To install it, use 'pip3 install forms-bootstrap'
Whitenoise
Whitenoise middleware was used to provide a simple static file hosting solution on the production build of the website.
To install it, use 'pip3 install whitenoise'
Django
A Python based web framework
Version: 3.0.3
https://www.djangoproject.com/
Visual Studio Code
A full featured IDE for use with many languages and frameworks
https://code.visualstudio.com/
Languages
HTML5, Javascript, CSS, Python
Paint.Net
To retouch product photographs.
Travis
Continuous integration testing was carried out with the aid of Travis
Stripe
All payment functionality for this website is handled by the Stripe payment service.
GitHub
Version control was handled through the integrated Git features on VSCode. Code hosting was provided by GitHub.
Pillow 7.0.0
For image processing used version 7.0.0 of Pillow. Pillow is a Python imaging
Python Imaging Library (abbreviated as PIL) (in newer versions known as Pillow) is a free library for the Python programming language that adds support for opening, manipulating, and saving many different image file formats.
https://pypi.org/project/Pillow/
Gunicorn
Green Unicorn is a WSGI server used to host the production build.
Shop Homepage theme
The main layout of the site is acheived through the use of the Shop Homepage theme from Start Bootstrap.
https://startbootstrap.com/templates/shop-homepage/
Chrome
Main web browser used for development.
https://www.google.com/chrome/
Heroku
The server of choice for hosting the production build.
SQLite3
Provided with Django, this simple database solution was used for development as well as initial production deployment. Note that it is not suitable for long term deployment.
Pencil
Prototyping program used to create the early wireframes.
Functional testing
The following tests were conducted on the website to test its functionality.
Test 1. Index page - All category's
- Visit the website
- Click the link to the side labelled "All category's"
- A list of all story's currently held in the database should be displayed
Test 2. Index page - Single category
- Visit the website
- Click the link to the side labelled "Fantasy"
- A list of all story's currently held in the database belonging to the 'Fantasy' should be displayed
Test 3. Home button
- Visit the website
- Click the link in the navigation bar for the 'Donate' page
- The user should be brought to the Donate page
- Now click the 'Home' button
- The user should be redirected to the index page showing all story's currently in the database
Test 4. Donate page tests
- Visit the donate page
- Click the donate button
- On the pop-up dialogue, enter and email address and an incorrect credit card number
- Click the 'Make Payment' button
- The pop up should give an error message relating to the incorrect credit card number
- Now enter a working test credit card number (4242 4242 4242 4242).
- Enter an expiry date for the year 2019.
- Click the 'Make Payment' button
- The pop up should give an error message relating to the incorrect expiry date
- Now enter an expiry year of 2022.
- Enter a CVV number of only two digits
- Click the 'Make Payment' button
- The pop up should give an error message relating to the incorrect CVV number
- Enter a correct CVV number (of any three digits)
- Click the 'Make Payment' button
- The payment should be processed
- The user should be redirected to a 'thank you' page
Successful stripe payments
Here we can see that the donate functionality is working. Stripe.com offers account holders a summary of all transactions on their account. Although the payments shown here are tests, if a real card were used, real money would be transferred.
Image... Screenshot of Stripe.com showing successful payments.
Test 5. Login / Register tests
- Visit the website
- If the user is logged in, click the logout button
- The footer should display the message "Currently browsing as Guest"
- Now click the 'Register' button
- Enter a user name of 'TestUser' and and email address of 'testuser@gmail.com'
- Leave the password field blank
- Click the 'Register button'
- The form should inform the user that a password must be entered
- Enter a password in the password field as well as the confirmation field
- The user should now be redirected to the index page and the footer should read 'Logged in as TestUser'
- Click the logout button
- The user should be redirected to the index page
- The footer should again read "Currently browsing as Guest"
Test 6 Submit page tests
- With the user logged out, click the 'submit a story' button
- The user should be redirected to the 'submit' page
- The user should be informed that only registered users can submit story's
- Click the login button
- The user should be redirected to the login page
- Enter some valid details and login
- Again click the 'submit a story' button
- The user should be redirected to the 'submit' page only this time, there should be a number of fields for entering some story details
- Fill out all of these fields with the exception of the field labeled 'title'
- Click the 'Publish story' button
- The user should be informed that the 'title' field needs to be filled in
- Now enter a title and click the 'Publish story' button
- The user should be directed to the index page
- Click the category selector for the category of the story input in step 9
- The story should no be available for reading
Testing on various devices / emulators / browsers
The site running on a desktop computer running Chrome:
Image... Chrome browser rendering the website
The site running on an android phone (emulated):
Image... Samsung Galaxy rendering the website
Running the website locally
Here are the steps required to run this website with the VSCode IDE
- Download this GitHub repo and unzip
- Open the unzipped folder in VSCode
- Open a terminal
- Type: 'python -m venv env' to create a virtual environment
- Type: 'env\scripts\activate' to activate the virtual environment
- Type: 'pip3 install django' to install Django 2
- Type: 'python manage.py makemigrations' followed by 'python manage.py migrate' to create a database based on the models defined in the repository source code
- Type: 'python manage.py runserver' to activate the inbuilt Django test server
- Open a browser on the address 'localhost:8000'
- You should now see the index page however there will be no story's currently in the database. These can be easily input by creating a user account and entering them from the 'submit' page
- In order to access the admin functionality,go to the terminal
- Type 'python manage.py createsuperuser'
- Enter a name, email address and password
- Now go to a browser and type the address 'localhost:8000/admin'
- You can now log in and manipulate the database from Django's admin software
Running the website on Heroku
To deploy to Heroku, the following steps were taken.
- Gunicorn was installed as the WSGI webserver.
- Whitenoise was installed to handle static files.
- Environment variables were taken out of the source code and put into a separate file.
- An app was created on Heroku called 'youfic'
- This app was linked to the YouFic GitHub repository.
- The app was set to automatically deploy upon each GitHub commit.
- Environment variables were added to the settings page on the Heroku app.
- Media root and static root constants were set-up to reflect the static and media directory's of the project directory structure. This allowed the media files to be found by referencing the static root in code.
- The Code Institute team
- Spencer Barriball
- Code Institute students on Slack
- @ckz8780 on Slack for fixing my MEDIA_ROOT issue
Django documentation v3.0:
https://docs.djangoproject.com/en/3.0/
Code Institute tutorials.
Start Bootstrap
Theme templates.
All photographs used on the website were obtained from Google Images under free free use terms.
https://www.google.com/advanced_image_search
The example stories used on the website were obtained with permission from FanFiction.net