search

Harmonica-Men / AstroShare-Blog

ASTRONOMY BLOGS
0 stars 0 forks source link

readme

AstroShare Blog

AstroShare Blog is a fictional blog posting news site where information on astronomically related topics can be discussed and verified users can blog posts. There are a number of categories to choose from. There is a comments section below each post. The idea is basically to create the ultimate space blog and discussion center for enthusiasts, experts and curious minds alike! Here users can post, read and comment on the latest news stories about space exploration, astronomy and much more. Each post is tagged by topic, making it easy to navigate through categories like 'Astronomy', 'Space Emissions', 'Astrophysics' and more. Posts can be voted up or down, with the most engaging content highlighted. Users can also leave comments on posts to join the conversation. Every post and comment is timestamped, which promotes real-time discussions and builds a vibrant, interactive community around space topics.

A live version of the project can be accessed here: AstroShare Blog

responsiveness image

Table Of Contents

User Stories and Epics

Astro Blog Share is for those who are interested in Astronomical subjects and like to share there toughs in a deticated blog. The blog can be used as a discussion platform for anybody who have a special affliation whit astronomy.

A user story is an explanation of a software feature written from the perspective of the end user. Its purpose is to articulate how a software feature will provide value to the customer. User stories were created with the help of GitHub issues. Each user story contains:

I used an Agile methodology approach to plan this project. This was implemented through the GitHub Project board with milestones, epics, user stories and tasks. Each user story was classified with a label according to MoSCoW prioritization.
The Kanban board can be seen here.

Milestones

The project was divided into three milestones, each containing the corresponding epics and user stories:

  1. Setting Up The Project @ Bear minimums

    • Task: Set up the project repository and initialize Django project.
    • Create a new repository on GitHub, GitPod.
    • Set up the virtual environment and install Django.
    • Initialize a new Django project and create a base application.
    • Configure settings for the project static files, static and README.md
    • Deploy early to a hosting platform Heroku

  2. [Basic Blog Functionality]()

    • Task: Implement basic blog functionality including models, views, and templates.
    • Define the models for blog posts (e.g., Post, Category, Tag).
    • Create views to list all posts, view individual posts, and manage categories/tags.
    • Design templates for the blog homepage, individual post pages, and category/tag pages.
    • Implement URL routing for the blog.

  3. User Authentication

    • Task: Add user authentication to allow for author logins and secure post management.
    • Set up Django’s built-in authentication system.
    • Create registration, login, and logout views and templates.
    • Implement user-specific actions, such as creating, editing, and deleting blog posts.

  4. Admin Interface

    • Task: Set up the Django admin interface for managing blog content.
    • Register blog models with the Django admin.
    • Customize the admin interface for better usability (e.g., list displays, search fields).

  5. Commenting System

    • Task: Implement a commenting system for blog posts.
    • Create models for comments linked to blog posts.
    • Create views and templates for adding and displaying comments.
    • Implement moderation features for comments (e.g., approval workflow).

  6. Styling and Frontend

    • Task: Apply CSS and JavaScript to enhance the look and feel of the blog.
    • Use a CSS framework like Bootstrap for basic styling.
    • Customize templates to ensure a consistent and responsive design.
    • Add JavaScript for interactive elements (e.g., comment submission, post likes).

  7. Search and Filtering

    • Task: Implement search and filtering capabilities.
    • Add a search bar to allow users to search for posts.
    • Implement filtering by categories, tags, and publication dates.
    • Optimize search and filter queries for performance.

  8. SEO and Performance Optimization

    • Task: Optimize the blog for search engines and improve performance.
    • Implement SEO best practices (e.g., meta tags, sitemap, robots.txt).
    • Optimize images and static files for faster loading.
    • Use caching to improve page load times.

  9. Testing and Deployment

    • Task: Write tests and deploy the project.
    • Write unit tests and integration tests for critical functionality.
    • Set up continuous integration (CI) to automate - and/or manual testing

User stories

A user story is an explanation of a software feature written from the perspective of the end user. Its purpose is to articulate how a software feature will provide value to the customer. User stories were created with the help of GitHub issues. Each user story contains:

Below is an example of how the user stories where structured for this project.



List of Epics:

User Stories with their id:

User Stories Table of Contents

  1. Welcome and Introduction
  2. Sign-Up Process
  3. Navigation and Exploration
  4. Creating and Sharing Content
  5. Interaction and Collaboration
  6. Profile and Community Building
  7. Ease of Use and Accessibility
  8. Continuous Engagement

  9. [Epics]()

    Welcome and Introduction

    As a user:

    • I want to see a visually appealing landing page with a space theme and a welcoming headline.
    • I want to read a brief introduction about the community and its features.
    • I want to have prominent "Sign Up" and "Log In" buttons to easily join or access the blog.
    • I want to watch a short introductory video or animation showcasing the blog's features.

    Back to User Stories Table of Contents

    Back to Top

    Sign-Up Process

    As a user:

    • I want to click on "Sign Up" and fill out a simple form with my Username, Email, Password, and Confirm Password.
    • I want to have the option to sign up using my social media accounts (Google, Facebook).
    • I want to be prompted to complete my profile by uploading a profile picture, writing a short bio, and optionally adding links to personal websites or social media profiles after signing up.

    Back to User Stories Table of Contents

    Back to Top

    Navigation and Exploration

    As a user:

    • I want to be directed to the main dashboard with a personalized greeting after completing the sign-up.
    • I want an easy-to-navigate menu with options like Home, Explore, Create Post, My Profile, Notifications, Settings, and Log Out.
    • I want to see a home feed with the latest posts from users, including photos, articles, and discussions about various astronomical topics.
    • I want each post to include the author’s profile picture, name, post title, content preview, and interaction buttons (Like, Comment, Share).

    Back to User Stories Table of Contents

    Back to Top

    Database

    PostgreSQL uitleg psycopg2 (pip install) 2.9.6 Cloudinary werking generate new API-key ... (pip install)

    Creating and Sharing Content

    As a user:

    • I want to click on "Create Post" and access a simple and intuitive editor.
    • I want to have a title field, content field with rich text formatting options, and the ability to add photos either by dragging and dropping or uploading from my device.
    • I want to add tags to categorize my post and a "Post" button to publish my content.

    Back to User Stories Table of Contents

    Back to Top

    Flowchart

    This flowchart was created to determine the flow of the website. It shows which pages are available to the user. It takes into account if the user is logged in to the website or not.

    Flow Chart

    Back to Top

    Entity Relationship Diagram

    The database design for this project includes Four tables. The first table is a review table. This table houses all the data associated with making a review on the site. There is a customer table, which houses the details of the customer and this is linked to a booking table via a foreign key relationship. The booking table contains the information needed in order for users to make a booking. The last table present is the user table. This table has the information necessary for users to have an account on the website and has a foreign key relationship with the customer table. ERD

    Back to Top

    Interaction and Collaboration

    As a user:

    • I want to leave comments on posts with a clear text field and an "Add Comment" button.
    • I want to be able to reply to comments and like or dislike them.
    • I want to invite other users to collaborate on a post.
    • I want real-time collaboration with a shared editor for multiple contributors.
    • I want to receive notifications for new comments, likes, and collaboration invites, with a notification bell icon in the menu bar showing a dropdown list of recent notifications.

    Back to User Stories Table of Contents

    Back to Top

    Profile and Community Building

    As a user:

    • I want to explore my profile page that displays my information, including my profile picture, bio, posts, and activity.
    • I want an "Edit Profile" button to update my information and settings.
    • I want to use the Explore page to search for other users.
    • I want to follow other users to receive updates on their posts and activities.
    • I want to use a direct messaging feature for private conversations.

    Back to User Stories Table of Contents

    Back to Top

    Ease of Use and Accessibility

    As a user:

    • I want the blog to be fully responsive and work seamlessly on desktop, tablet, and mobile devices.
    • I want fast loading times and smooth transitions between pages.
    • I want high contrast mode and text resizing options for better accessibility if I am visually impaired.
    • I want a keyboard navigable interface and screen reader compatibility.
    • I want an easily accessible help section with FAQs and tutorials, along with a contact support option for direct assistance.

    Back to User Stories Table of Contents

    Back to Top

    Continuous Engagement

    As a user:

    • I want personalized content recommendations based on my interests and activity.
    • I want regular email updates with highlights from the blog and information about upcoming astronomical events.
    • I want to participate in community events such as virtual star-gazing sessions, photo contests, and Q&A sessions with astronomy experts.
    • I want to engage in interactive challenges and quizzes to keep learning and stay engaged with the blog.

    Back to User Stories Table of Contents

    Back to Top

Deployment

Heroku Deployment

This site was deployed to and is currently hosted on the Heroku platform. The steps for deploying to Heroku, using PostgreSQL as the database host, are as follows:

Create a new PostgreSQL Code Institute database.

From codeinstitute every student can maintain up to eight databases to run there projects. Here is a step by step guide to install PostgreSQL from Code Institute to the cloud!

  1. Navigate to PostgreSQL from Code Institute and input with your LMS account PostgreSQL database creation step1

  2. After you filled in your LMS account the PostgresSQL database manager will automatically generate a new database for you. PostgreSQL database creation step2

  3. You now have a brand new PostgreSQL Code Institute database The link to this database and how to manage all your other databases will be sent to my email. PostgreSQL database creation step3

  4. Note: These databases are limited in time and have a life time of operation of 18 months after the date of creation. PostgreSQL database creation step4

  5. infoknop

  6. copy/paste url-link

  7. paste this in your env.py & heroku varibles.

Deploy the project

In the previous topic, I have created a PostgreSQL database. In this topic, you are challenged to deploy your project to Heroku. First you go to the Heroku website and login whit your credentials.

  1. Set up your Heroku account ...

    Part 1 - Create the Heroku app:

  2. Navigate to your Heroku dashboard and create a new app with a unique name in a GDPR region Europe Note: No Django static file collection will be required during the build.

  3. In your new app’s settings tab, ensure the Config Vars click on Reveal Config Vars button to define new variables in the inputs fields:

    "DATABASE_URL", ""

    "SECRET_KEY", ""

    "CLOUDINARY_URL", ""

    Part 2 - Update your code for deployment:

  4. Use pip3 to install gunicorn~=20.1 and freeze it to the requirements.txt file. The commands at the terminal are:

    pip3 install gunicorn~=20.1 pip3 freeze --local > requirements.txt

  5. In the Procfile, add a command using gunicorn and myblog wsgi file to start the webserver.

  6. In the myblog/settings.py file, set the DEBUG constant to False and append the '.herokuapp.com' hostname to the ALLOWED_HOSTS list.

    web: gunicorn myblog.wsgi

    Note: There is a space after the colon. Note: The Procfile has no file extension.

    Top tip! It's a good habit to always set DEBUG to False before any deployment. Once you have completed deployment, you can set it back to True locally to continue development. Double check Have you changed DEBUG to False and added , '.herokuapp.com' to the ALLOWED_HOSTS?

    DEBUG = False ,'.herokuapp.com'

  7. Git add, commit and push the code to your GitHub repo.

    git add . git commit -m "readies code for deploy" git push origin main

Part 3 - Deploy to Heroku:

  1. In your new app’s Deploy tab, search for your GitHub repo and connect it to the Heroku app. Manually deploy the main branch of this GitHub repo is also the prefered method. Note: Start typing your project repo name into the search box and click on the GitHub repo you want to deploy from. After manually deploying the main branch, you can view the build output in the application’s Activity tab in the dashboard.

    In your new app’s resources tab, ensure you are using an eco dyno and delete any Postgres database Add-on.

  2. Click Open app buttin to see your deployed app. If everythings goes well you on the frontpage of myblog.

    Note: The build must be complete before you can open the app.

import os

os.environ.setdefault( "DATABASE_URL", "") os.environ.setdefault( "SECRETKEY", "(j(j+@%s$a955-5gw=m@b-%#$slmv$0aixrck&odnq*h+ig@0") os.environ.setdefault( "CLOUDINARY_URL", "")

Credits

w3 schools

Used to reference Python Structure

Stack Overflow

Used to reference different syntax issues from existing older boards. Also used to query clear function issues when I ran into them as referenced in the bug section.

Acknowledgements

Daisy McGirr

Bootstrap

describe Frontpage & Homepage

3 way proces , urls , views , html

widgets in forms

LOGIN_RREDIRECT_URL & LOGOUT

sluggyfy could have (maybe)

1to1 edit profile

update readme

Testing

HTML Validation

All pages have been passed through the W3C HTML Validator successfully save for a few minor issues which have been left 'as is' as attempts to correct them proved unsuccessful and lead to results which devalued the user experience. Specifically, these were:

We ensured that the HTML structure of AstroBlog adheres strictly to web standards. We utilized the W3C Validator to validate our HTML code, striving to minimize and eliminate all possible errors. There are many templates to consider but the main pages where is the focus of stite are the Homepage and the Frontpaga-Blogpost. After experimenting whit different container layout and fixing all the issues validation results showed zero errors.

The detail of these test can evaluate on this link.

Click to view HTML Validation Homepage Result HTML Validation Result Homepage showing zero errors

HTML Validation Result Frontpage-Blogpost showing zero errors

CSS Validation

Valid CSS!

The CSS of AstroBlog has been carefully crafted and validated to ensure it adheres to the highest standards. I utilized the W3C CSS Validator to check for any errors, and I'm pleased to report that our stylesheets passed with zero errors.

This thorough validation process ensures that the user interface is both visually appealing and fully compliant with modern web standards. We took particular care to validate our responsive design elements to ensure consistency across all devices.

Here’s the validation result:

Click to view CSS Validation Result CSS Validation Result showing zero errors

Accessibility

Ensuring accessibility is a key priority for XemiJobs. We've taken great care to make sure our platform is inclusive and usable by as many people as possible, regardless of their abilities or the devices they are using.

Throughout the development process, we adhered to the Web Content Accessibility Guidelines (WCAG) to guarantee that our site meets accessibility standards. This includes:

These efforts help ensure that our site is not only compliant with accessibility standards but also provides an inclusive user experience. We continue to monitor and improve the accessibility of XemiJobs as we develop new features and enhancements.

Wave Validation

We conducted a thorough accessibility audit using the WAVE (Web Accessibility Evaluation Tool). The results were highly satisfactory, especially for the main page, where we encountered zero errors. However, we did find a few contrast issues, primarily related to the navigation elements within the carousel.

To address these contrast issues, we added a transparent background to the carousel buttons. Despite this adjustment, the contrast warnings persist. We believe that these contrast issues do not significantly impact usability, as the primary goal for the carousel is to showcase images clearly. The transparency ensures that the images are visible while still allowing users to intuitively locate the buttons.

Carousel showing controller buttons


Additionally, contrast warnings were noted in the Flash messages—interestingly, all colors except yellow were flagged. While we understand that white text on a yellow background might pose a readability challenge, WAVE does not flag it as an issue. Conversely, other colors, which do not seem problematic to us, were marked for contrast errors.

Wave flash contrast errors


We also identified contrast issues with the modal buttons, which follow a similar color pattern to the Flash Danger alerts. However, the inclusion of shadow effects and other design enhancements significantly aids visibility. We believe these design choices ensure the buttons remain accessible and visually clear, even if they do not fully meet WAVE’s contrast recommendations.

Wave button contrast error


Overall, the WAVE validation confirms that our website adheres to accessibility standards, with only a few minor contrast issues that have been carefully considered in the design process. While we will continue exploring potential solutions to these issues, we have prioritized maintaining a visually cohesive and intuitive theme for the site.

We identified some contrast issues specifically related to the numbers displayed on our error pages (e.g., 404, 403, 401). On the 404 page, no changes were made, as we believe the background image sufficiently offsets any potential visibility issues with the numbers. However, on the 403 and 401 pages, we made deliberate changes to the color of certain numbers to enhance contrast and ensure readability.

Wave button contrast error 1
Wave button contrast error 2


Specifically, we altered the colors of the "4" and "3" on the 403 page and the "4" and "1" on the 401 page to address the contrast errors flagged by WAVE. We retained the original color of the "0" to maintain visual consistency and a playful design element, although it technically does not meet the strict contrast criteria set by WAVE. We do not consider this to be a significant issue, as the overall visual experience is still clear and user-friendly.

Note: We are fully aware of the contrast issues highlighted by the WAVE Validation Tool. Our team is committed to addressing these in future updates to ensure an even higher level of accessibility across the entire platform. We appreciate the insights provided by the tool and will use this feedback to guide our ongoing improvements.

PEP8

All Python files in the booking_sys and eaststreet apps, as well env.py and manage.py, have been passed through the Code Institute PEP8 Linter. The only warnings given were for the settings.py file which contains a small number of long lines (i.e. greater than 80 characters) under AUTH_PASSWORD_VALIDATORS; as this is code implemented by Django itself at setup, these lines will be left unchanged.

JSHint

The small JavaScript snippet under the footer of base.html has been passed through JShint without issue.

Accessibility & Performance

The Structure Plane

The following site-maps show how the site is structured to logged in users whitout a profile, logged in users whit a profile and not logged in users.

Site Map - Logged In whitout a Profile

Site Map - Logged In whitout a Profile

Site Map - Logged In whit a Profile

Site Map - Logged In whit a Profile

Site Map - Logged Out

Site Map - Not Logged In