Stay ahead of the game with My Sport Blog News, your go-to source for the latest updates, insights, and analyses in the world of sports. Whether you're a die-hard fan, a casual follower, or an aspiring athlete, our blog covers everything from breaking news and match highlights to in-depth features and exclusive interviews.

• Link to deployed site - https://my-sportblog-d25b82c351ce.herokuapp.com/
• Link to GitHub repository - https://github.com/baselhn-cmd/mysportblog-pp4

• My sport blog
  • Table of Contents
  • Wireframes
  • Post and Comment Relationship Diagram
  • User Stories
  • Features
  • Technologies Used
  • Future Features
  • Setting up Django
  • Deploying to Heroku
  • Testing
    • Manual Testing
  • Bugs
    • Django Testing
    • Automated Testing
  • Credits
    • Content
    • Media
    • Libraries & Frameworks
    • Acknowledgements

• At the start of the project, I created some basic wireframes to visualize the design I had in mind for the site. I used moqups.com to develop these wireframes, covering the home page, sign-in, signup, and about pages.

• Initial plan

• As a site user, I can view a paginated list of posts so that I can select which post I want to view.
• As a Site User / Admin, I can view comments on an individual post so that I can read the conversation.
• As a Site User I can register an account so that I can comment on a post.
• As a Site User I can leave comments on a post so that I can interact with the listings
• As a Site User I can modify or delete my comment on a post.
• As a Site Admin I can create, read, update and delete posts so that I can manage the listings.
• As a Site Admin I can create draft posts so that I can finish writing the content later.
• As a Site Admin I can approve or disapprove comments so that I can filter out objectionable comments.

• Pagination The posts are paginated so that the user can view 6 posts per page. There is a link to the next page at the bottom of the page. When the user is not on the first page of listings, there is a link to the previous page.

• Navbar The navbar is anchored to the top of the page, providing effortless navigation throughout the site. It features a concise set of essential links, including:

Home page About page Login/Logout page Register page This design ensures that users can quickly access key sections of the website, enhancing overall usability and user experience

• Login Status

A prominent banner, situated below the navigation buttons, dynamically displays the user's login status, clearly indicating whether they are:

Logged in Not logged in This intuitive feature keeps users informed about their current login state, ensuring a seamless and personalized experience on the site.

• About Page This site talking about the developer

• Register Page

• Login Page

• Logout Page

The project leverages a range of technologies to create a robust and scalable web application. Here's a breakdown of the technologies used:

HTML: Provides the structure and content of the site CSS: Styles the site using Bootstrap and Google Fonts JavaScript: Links buttons to functionality and enhances user interaction

Python: Powers the backend of the site using Django as the web framework Deployment and Version Control Heroku: Hosts the application and provides a scalable infrastructure Git: Manages version control and tracks changes to the codebase GitHub: Stores the code and facilitates project planning and collaboration

Postgres: Serves as the database management system for the project ElephantSQL: Hosts the database and provides a reliable storage solution

Draw.io: Creates wireframes and visualizes the site's layout and design Cloudinary: Hosts images and provides a scalable media storage solution

• The next feature of the site will be like the post i´m working on but it´s not done yet

Setting Up Django: A Step-by-Step Guide

To set up Django for my site, I followed these steps:

Installation of Required Packages I installed the necessary packages, including Django, Gunicorn, Psycopg2, Django Heroku, Django Crispy Forms, Pillow, Cloudinary, DJ Database URL, and Whitenoise.

Creating a New Django Project and App Next, I created a new Django project and app, laying the foundation for my site.

Database Setup and Superuser Creation I migrated the database and created a superuser to manage the site's admin tasks.

Configuration Files I created a Procfile and a requirements.txt file, which are essential for deploying the app on Heroku.

Admin Account and Models I created an admin account and defined the models for the site, then migrated the database again to apply the changes.

Database Hosting and Connection I used Elephantsql to host the database and connected it to the site using a newly created instance. The DJ Database URL package helped link the database to the site.

Views, URLs, Templates, and Static Files I created the views and URLs for the site, followed by the templates and static files.

Forms and Heroku Deployment I created the forms for the site and then logged into Heroku to create a new app. I linked the app to my code base via GitHub and deployed it early to monitor for any bugs during the build process. By redeploying the app, I ensured everything was working as expected.

Config Vars and Final Touches Finally, I added the necessary config vars to Heroku to connect the database and Cloudinary image hosting, completing the setup process.

To deploy the app on Heroku, I followed these steps:

• Creating a New Heroku App I started by creating a new app on Heroku, which would serve as the platform for hosting my application.

• Linking to GitHub Repository Next, I connected the Heroku app to my GitHub repository, allowing me to manage my codebase and track changes.

• Configuring Environment Variables I then added the necessary config vars to Heroku, which enabled me to connect the database and Cloudinary image hosting to the app.

• Manual Deployment and Testing In the deploy section, I manually deployed the app and closely monitored the build process for any bugs or issues. By redeploying the app and verifying that everything was working as expected, I ensured a smooth and successful deployment.

During the deployment process, I encountered several bugs that needed to be addressed to ensure the site's usability and accessibility.

• Background Color Issue Initially, the deployed site's header and footer were not displaying the correct background color, making the text difficult to read. I resolved this issue by altering the CSS, implementing a color via Bootstrap, and collecting the static files again.

• Contrast Errors While testing the site, I discovered contrast errors that were not apparent during the development process. A Wave report highlighted these issues, and I addressed them by changing the color scheme of the site to be more readable and inclusive.

• Wave

• The content for this site was inspired by the Code Institute Django project "I think therefore I blog".
• The posts and news in blog taken from Thesun and News.

• The images used in this site were obtained from Thesun and News.
• Font - The font I used called Madina One was obtained from Google Fonts.
• Data storage - The data for this site is managed using ElephantSQL.

• The site uses the Django web framework.
• The site uses the Bootstrap framework.

• I would like to thank my mentor Mo Shami for his help and guidance throughout the project.

• I would like to thank the Code Institute for the educational material and and support throughout the project.

• Big Thank to Sarah and Sean in Tutor Assistance for the great helping.