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
User opens the blog website:
Landing Page:
Call to Action:
User clicks on "Go To The Blog" or "Astro Blog":
Call to Action:
User clicks access to Navigation Bar"
Call to Action
User clicks on "Sign Up":
Sign-Up Form:
Profile Setup:
User clicks on "Add Post":
Add Post Page:
User interacts with a post:
Commenting:
Collaborative Features:
User explores their profile and connects with others:
User Profile:
Community Engagement:
User enjoys a seamless experience:
Responsive Design:
Accessibility:
User stays engaged and returns to the blog:
Content Recommendations:
Events and Challenges:
AstroShare offers a user-friendly, engaging, and collaborative platform for astronomy enthusiasts to share knowledge, interact with the community, and enjoy a seamless and enriching experience.
Primarily adults and young adults (18-65 years old) who have a keen interest in astronomy and space exploration.
This demographic is likely to be tech-savvy and comfortable using digital platforms for both learning and social interaction.
Individuals who are passionate about astronomy, including amateur astronomers, space enthusiasts, students studying astronomy or related sciences, and professionals working in the field.
Varied, but likely to include individuals with at least a high school education and a strong interest in science, particularly astronomy and space sciences.
Some users may have advanced degrees or be pursuing careers in astronomy or related fields.
Users who are comfortable with technology, including social media platforms, online communities, and content creation tools.
They are likely to engage actively in online discussions, share content, and collaborate with others on the platform.
The platform may attract users globally, given the universal interest in astronomy.
However, regions with active amateur astronomy communities, space research institutes, or strong educational programs in astronomy may have a higher concentration of users.
Users who enjoy sharing knowledge, participating in discussions, and engaging with multimedia content such as photos and videos related to astronomy.
They may also value community building, collaborative projects, and staying updated with the latest astronomical discoveries and events.
While primarily targeting users comfortable with digital platforms, efforts should be made to ensure accessibility features such as high contrast mode, text resizing, and screen reader compatibility to accommodate users with visual impairments or disabilities.
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.
The project was divided into three milestones, each containing the corresponding epics and user stories:
Setting Up The Project @ Bear minimums
[Basic Blog Functionality]()
User Authentication
Admin Interface
Commenting System
Styling and Frontend
Search and Filtering
SEO and Performance Optimization
Testing and Deployment
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:
As a new website user, I am able to identify the website's goal so that I can decide whether to continue or leave. [#9]()
As a new user, I can register an account so that I can create and manage wish lists or items of other wish lists. #12
As a registered user, I want to log in to my account so that I can create, read, update and delete my wish list(s) [#13]()
As a registered user, I want to manage my profile so that I can update my account. [#13]()
As a registered user, I want to edit my wishlist so that I can update its details. [#16]()
As a registered user, I want to be able to delete a wishlist so that I can remove outdated or unnecessary lists. [#17]()
As a registered user, I want to edit items in my wishlist so that I can update their details.[#19]()
As a registered user, I want to be able to delete items from my wishlist so that I can remove unwanted items.[#20]()
As a registered user, I want to reserve an item of a wishlist, so that no other user will purchase this. [#23]()
As a registered user, I want to be able to collaborate on a wishlist with others so that we can collectively manage it. [#24]()
As a logged-in user, I want to update my profile information so that my account details are current. [#14]()
As a frequent website user, I can easily login to my account so that I have access to my wish lists and items I want to purchase. [#9]()
As a user of the website I want to create a wish list for a specific occasion so that I can organize my desired items. [#15]()
As a user, I want to add items to my wishlist so that I can keep track of things I want. [#18]()
As a user, I want to share my wishlist with others so that they can see my wishlist and know what I want to have. [#22]()
As a developer, I want to define a database structure so that it matches the objectives of the project. [#10])
As a developer I want to set up and configure a database so that I can store and manage the application data securely and efficiently. [#11]()
As a developer, I need to verify that all html files pass the W3C validation so that the code is executed correctly. #25
As a developer, I need to verify that my css files pass the W3C validation so that the code is executed correctly. #26
As a developer, I need to verify that my JavaScript files pass the jshint validation so that the code is executed correctly. #27
As a developer, I need to verify that my python files pass the pep8 validation so that the code is executed correctly. #28
As a developer, I want to implement python test procedures so that I can assess functionality, usability, responsiveness and data management throughout the web application. #29
As a developer, I want to implement JavaScript test procedures so that I can assess functionality, usability, responsiveness and data management throughout the web application. #30
As a developer, I want to implement manual test cases so that I can assess functionality, usability, responsiveness and data management throughout the web application. #31
As an admin, I want to access the site's administrative features so that I have access to the admin panel. #8
[Epics]()
As a user:
Back to User Stories Table of Contents
As a user:
Back to User Stories Table of Contents
As a user:
Back to User Stories Table of Contents
PostgreSQL uitleg psycopg2 (pip install) 2.9.6 Cloudinary werking generate new API-key ... (pip install)
As a user:
Back to User Stories Table of Contents
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.
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.
As a user:
Back to User Stories Table of Contents
As a user:
Back to User Stories Table of Contents
As a user:
Back to User Stories Table of Contents
As a user:
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:
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!
Navigate to PostgreSQL from Code Institute and input with your LMS account
After you filled in your LMS account the PostgresSQL database manager will automatically generate a new database for you.
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.
Note: These databases are limited in time and have a life time of operation of 18 months after the date of creation.
infoknop
copy/paste url-link
paste this in your env.py & heroku varibles.
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.
Set up your Heroku account ...
Part 1 - Create the Heroku app:
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.
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:
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
In the Procfile, add a command using gunicorn and myblog wsgi file to start the webserver.
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'
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:
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.
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", "
Used to reference Python Structure
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.
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
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.
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:
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:
alt
attributes, providing context to users who rely on screen readers.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.
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.
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.
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.
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.
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.
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.
The small JavaScript snippet under the footer of base.html has been passed through JShint without issue.
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 whit a Profile
Site Map - Logged Out