This is The Football Shelf a simple project, a website designed to be responsive and accessible for a range of devices, making it easy to navigate for the information the user is seeking in relation to the greatest game.. football.

View the live project here.

• User stories

  • First Time Visitor Goals

    • As a first-time user, I want to know the main purpose of the site immediately upon arriving on the site.
    • As a first-time user, I want first time impressions to be appealing, the idea being that it won't intimidate the user with an overload of content.
    • As a first-time user, I want the site UX to be intuitive for ease of use. I want the user to be able to easily navigate throughout the site to find content and services the user is looking for.
    • As a first-time user, I want to be able to register with the site and create my own profile which I can log in to at any time.

  • Returning Visitor Goals

    • As a returning user, I want to be able to log into the site with my own profile at any time.
    • As a returning user, I want to be able to add football books of my own to the site.
    • As a returning user, I want to be able to edit/delete any book contributions I have made to the site.
    • As a returning user, I want the site to be responsive to all devices.

• Design

  • Structure

    • The structure of the website was purposely designed to maintain a fluid, consistent display throughout as to not look cluttered, easy to navigate and easy to find what you are looking for.

    • Website Colors and Font: Website colors and font remain consistent throughout.

  • Colour Scheme

    • The color scheme I was aiming for on my website is simple, easy on the eye and appealing. I kept the colors simple and I feel that the contrast works.

  

  • Typography

    • Bree Serif is the main font used throughout the whole website with San-serif as the fallback font in case for any reason the font isn't being recognized on different operating systems.

• Navigation Bar: Allows users to navigate the site easily.

  

• A Search Bar: where users can search for keywords that appear in the Football Library.

  

• Clicking on the collapsible displays books in an accordion style.

  

• A welcome message just under the navbar.

• A simple card with an option to add a Football Book to the library.

  

• A form with multiple fields for the user to fill out. If a user wishes to add a book to the library then all fields are required to be filled out. At the end of the form there is a submit button, if a field is left blank it will prevent the user from submitting the book to the library database.

  

• Only the Admin can edit/delete all genres on the site, otherwise the content must belong to the session user in order for it to be edited or deleted.

  

• The register/log in/log out pages share the same layout and style, each have input fields for usernames and passwords and provide the same functionality.
• The register page asks users to input a username and password they wish to use for accessing the site. Once these are provided and submitted they are then added to an external database.
• Log In page asks the users to input their credentials from registration to give access to their user page and other pages to the website.

• Register Page Wireframe - view

• Log In Page Wireframe - view

• Home Page Wireframe - view

• Home Page Collapsible Wireframe - view

• User Page Wireframe - view

• Add Book Page Wireframe - view

• Manage Genres - view

• Register Page Wireframe - view

• Log In Page Wireframe - view

• Home Page Wireframe - view

• Home Page Collapsible Wireframe - view

• User Page Wireframe - view

• Add Book Page Wireframe - view

• Manage Genres - view

• The sitemap was created using Octopus
• The sitemap can be found here

1. Flask:
   • Flask was used as the main python framework in the building of this project.
2. Heroku:
   • Heroku was used as a cloud based platform to deploy this site.
3. MongoDB:
   • MongoDB Atlas was used as the database for the creation of this project.
4. Jinja:
   • Jinja was used for templating.
5. Freeformatter-Css beautifier:
   • This was used to format the CSS stylesheet.
6. Freeformatter-Html beautifier:
   • This was used to format each HTML page.
7. Font Awesome:
   • Font Awesome was used on all pages throughout the website to add icons for aesthetic and UX purposes.
8. Materializecss:
   • Various aspects of this website were structured using Materialize.
   • Materialize was used to make this website responsive.
9. CSS Tricks:
   • This was used as a general reference resource.
10. Balsamiq:
    • Balsamiq was used to create the wireframes during the design process.
11. Google DevTools:
    • Google Dev Tools was used throughout the project for various styling and testing purposes.
12. Coolors:
    • Coolors.co was used to create the project's color palette.
13. Git
    • Git was used for version control by utilizing the Gitpod terminal to commit to Git and Push to GitHub.
14. GitHub:
    • GitHub is used to store the project's code after being pushed from Git.
15. StackOverflow:
    • Stack Overflow was used as a general reference resource.
16. Responsive Design Checker:
    • Used to check website response across device types.

Testing information can be found here in the separate TESTING.md

This project was developed using Gitpod IDE and pushed to Github using the in-built terminal. Github can only host static websites it was necessary to deploy this project to Heroku because it is a compatible hosting platform for a back-end focused websits like this one.

This project was deployed using Heroku and stored in GitHub.

Before deploying the website to Heroku, the following three must be followed to allow the app to work in Heroku:

1. Create requirements.txt file that contains the names of packages being used in Python. It is important to update this file if other packages or modules are installed during project development by using the following command:

   • pip freeze --local > requirements.txt

2. Create Procfile that contains the name of the application file so that Heroku knows what to run. If the Procfile has a blank line when it is created remove this as this may cause problems.

3. Then push these files to GitHub. Once those steps are done, the website can be deployed in Heroku.

1. Log into Heroku.
2. Click the New button.
3. Click the option to create a new app.
4. Enter the app name in lowercase letters.
5. Select the correct geographical region.

Navigate to the settings tab and then click the Reveal Config Vars button and add the following:

1. key: IP, value: 0.0.0.0
2. key: PORT, value: 5000
3. key: MONGO_DBNAME, value: (the name of the database that is being used for the project)
4. key: MONGO_URI, value:

- This can be found in MongoDB by navigating to the clusters section of your MongoDB account.
- Click the cluster where the database is located.
- Click the connect button.
- Select the connect you application button.
- Copy the link provided to your application and ensure you have substituted the password and dbname with the correct values).

5. key: SECRET_KEY, value: (This is a custom secret key set up for configuration to keep client-side sessions secure).

1. Click the Deploy tab
2. In the Automatic deploys section, choose the branch you want to deploy from then click Enable Automation Deploys.

1. Click the deploy tab and connect to GitHub.
2. Type the name of the repository into the search bar presented.
3. Click the Code dropdown button next to the green Gitpod button.
4. When the correct repository displays click the connect button.

It is important to note that this project will not run locally unless an env.py file has been set up by the user which contains the IP, PORT, MONGO_DBNAME, MONGO_URI and SECRET_KEY which have all been kept secret in keeping with best security practices.

1. Log into GitHub.
2. Select the respository.
3. Click the Code dropdown button next to the green Gitpod button.
4. Download ZIP file and unpackage locally and open with IDE. Alternatively copy the URL in the HTTPS box.
5. Open the alternative editor and terminal window.
6. Type 'git clone' and paste the copied URL.
7. Press Enter. A local clone will be created.

Once the project been loaded into the IDE it is necessary to install the necessary requirements which can be done by typing the following command.

• -pip install -r requirements.txt

1. Log into GitHub.
2. In Github go to (https://github.com/Elippsis007/football_shelf_m3).
3. In the top right hand corner click "Fork".

• Materialize:: Materialize was used throughout the project mainly to make the site responsive using the Materialize Grid System.

1. Materialize:
   • For guidance on Materialize use and adaptations.
2. Font Awesome:
   • Font Awesome was used on all pages throughout the website to add icons for aesthetic and UX purposes.
3. w3Schools:
   • For checking proper syntax of HTML and CSS elements.
4. W3C Markup Validator
   • For checking markup validity of HTML.
5. W3C CSS Validator
   • For checking CSS styling validity.
6. Stackoverflow
   • I used Stackoverflow to help me with issues I was having when it was styling, margins, centering a div.

• All content was written by the developer.

• My mentor Gerry for continuous helpful feedback and support.

• Tutor support at Code Institute for their support.

• I'd like to thank my girlfriend, mates and family for testing the website on their devices and for suggesting changes and bugs.

Book Depository: https://www.bookdepository.com/

Fontawesome: https://www.fontawesome.com

Facebook: https://www.facebook.com

Twitter: https://www.twitter.com

Instagram: https://www.instagram.com