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 'Black Holes', 'Space Missions', 'Astrophysics' and many more. Posts can be liked up or refoked whit down. 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
- AstroShare Blog
- Development Tools
- CSS Management for Project Structure
- Colors
- Fonts
- Icons
- Technologies Used
- UX & Agile
- Testing
- Deployment
- Bugs & Fixes
- License
- Credits
- Bootstrap: Bootstrap is a popular front-end development framework that helps developers create responsive, mobile-first websites quickly and efficiently. It provides a collection of pre-designed HTML, CSS, and JavaScript components like buttons, forms, navigation bars, and grid layouts. By using Bootstrap, developers can build modern, visually consistent web pages without writing extensive custom code. It's widely appreciated for its ease of use, customization options, and ability to adapt to various screen sizes, making it a go-to tool for fast web development.
- Modular Design: Modular design is a system design approach that divides a system into independent, interchangeable modules. Each module performs a specific function, enabling flexibility, easy maintenance, scalability, and reusability.
- Consistent Aesthetic: To maintaining a unified and cohesive visual style across all elements of a design. This includes consistent use of colors, fonts, shapes, and layout, ensuring that all components appear harmonious. It enhances user experience by creating familiarity and brand identity, making designs more professional and visually appealing.
In my project, I decided to use a single CSS file, styles.css, to manage all the styling across the application. These variables are defined within styles.css, and ensuring they work correctly is crucial for applying themes consistently across the site.
By consolidating all the styles into one file, I make managing themes straightforward. If I need to switch themes or make adjustments, I only need to modify this single CSS file, which allows for a seamless transition to a new look and feel across the entire application. This approach not only simplifies maintenance but also reinforces my focus on code reuse and consistency.
Additionally, having a single CSS file helps me avoid complications related to injecting styles through Bootstrap, ensuring that the CSS variables function as intended throughout the application.
The homepage starts with a 'hero section' featuring an embedded video stream in replay, along with a parallax effect designed to captivate visitors. This section offers users the option to engage with the Blog Post.
Following this, the AstroBlog section provides a brief introduction to the purpose of the site, helping visitors quickly understand what the site is about.
To build more interest, I have incorporated an 'Astronomy Picture of the Day' (APOD) section where users and visitors always have a new astronomical item to explore, providing an easy and quick overview of the latest posts.
In a zigzag pattern, the most popular categories are displayed on the homepage. To encourage further engagement with the blog, a 'Latest Contributors' section is also included.
For astronomical enthusiasts, a nice widget is incorporated that tracks the current position of the International Space Station (ISS). When clicking on the 'Go To the ISS' button, a new page appears with an independently generated world map showing the ISS’s location.
At the bottom of the page, I have included a subscription section where users can join the mailing list to receive newsletters, information, and relevant benefits.
Finally, the page concludes with a footer that reinforces credibility and includes essential links, such as the social media links for the blog.
The Front Page is designed to give a quick overview of a list of 5 blog posts ranked by the date added, with the most recent post at the top of the page.
-
NavBar: The 'navbar' has a dual function and can be used by both visitors and authenticated users.
- For Visitors & Users: can quickly navigate back to the "homepage" by clicking the home icon or to the 'front page blog posts' by clicking the left arrow icon.
- For Visitors: Visitors can always read posts but cannot participate. They have the option to view posts by category or to join Astro Share Blog by registering.
- For Users: Users have full CRUD (Create, Read, Update, Delete) functionality for their own posts. The 'Add Post' option appears, and they see 'Logged in as,' giving them the ability to change their profile settings and details.
-
Blog Post Snippets: Each blog post is presented as a snippet along with a corresponding image.
- For Visitors: The
[read more]link redirects to the article detail page where the full post can be read. - For Users: Users have the same functionality as visitors, but on the redirected page, they have full control over their posts.
- For Visitors: The
-
Detailed Article Posts: On this page, each post is treated individually.
- For Visitors: Visitors can read the full blog post and any comments (if available). They cannot like or comment on posts. Visitors can click on the author's name to view the author’s profile page.
- For Users: Users can read the post, comment, and 'Like' the posts. They can only 'Dislike' posts they have already liked.
The option to dislike posts outright is not part of the blog’s policy.
To ensure a seamless experience across devices, Bootstrap is used to make the Home- & Frontpage fully responsive. On mobile devices, the table features horizontal scrolling to prevent content compression, maintaining clarity and usability. Additionally, each table row highlights with a colour change on hover, making it easier for users to track their interactions as they navigate.
The color palette for this project has been carefully selected to ensure a professional and clean aesthetic, aligning with the brand identity and enhancing user experience. Below is a breakdown of the primary colors used across the application:
As for colors I decided to use Color-Hunt. https://colorhunt.co
- Primary Color:
#352F44- Is a dark, muted purple with gray undertones, giving it a sophisticated, moody, and elegant feel. clarity and focus. -
- Secondary Color:
#5C5470- (also atrribute color) Is a muted, medium-dark purple with gray undertones, offering a subtle and sophisticated appearance. -
- Primary Color Highlight:
#AD91FC- Highlight color for hover effects, is a soft, pastel lavender with a light, calming appearance, often associated with a gentle, serene feel. -
- Background Color:
#B9B4C7- is a soft, muted lavender-gray with cool undertones, giving it a calm and subtle appearance. -
- Accent Color:
#FAF0E06- Is a soft, pale beige with warm undertones, often referred to as linen, giving it a light, neutral, and calming feel. -
- Main Text Color:
#FFFFFF- Tis pure white, the brightest and most neutral color, representing simplicity, cleanliness, and clarity. -
- Secondary Text Color:
#000000- (--main-text-color-invers) Is pure black, the darkest color, symbolizing elegance, power, and sophistication. -
- Warning Color:
#FF0000- Is a bold, bright red, commonly associated with intensity, urgency, and passion. -
- Dark Text Shadow:
2px 2px 4px rgba(0, 0, 0, 0.5)- A bolder text shadow used on white backgrounds, ensuring that text stands out clearly. -
This color palette was chosen not only for its visual appeal but also for its contribution to a cohesive and user-friendly interface, reinforcing the professional and serious tone of the application.
The colour customization process in this project was designed to offer flexibility and personalisation. I have implemented a series of CSS Variables to define various colour palettes.
Key elements of the colour customization process include:
-
Multiple Colour Palettes: I have created several distinct colour palettes, each with its unique style—ranging from more traditional to modern and alternative designs. The default palette, known as the root palette, is the primary theme that all users see upon first visiting the site.
-
CSS Variables: The different colour palettes are implemented using CSS Variables, which allows for dynamic and flexible styling of various elements across the site. This ensures a consistent and responsive design while providing a personalised experience for each user.
I used a combination of classic and modern fonts to diversify myself, I've integrated Google Fonts to find a typeface that complements the website's aesthetic. For the main text, I've opted for Montserrat due to its classic appearance. Its make it easy to read long sentences.
As for icons and officious reason Bootstrap Icons.
The wireframes for this project served as a crucial guide during the development process, essentially acting as a blueprint for the design and layout of the website. My focus was primarily on two key pages: the index (or homepage) and the frontpage blog post. Given the repetitive nature of the blog post, I decided that it was a better idea to separate the homepage and the frontpage. The homepage serves more as an introductory page, while the frontpage blog post is a more active working page for the blog posts.
I chose to highlight only two wireframes in this README as they are the most critical to the overall user experience. Other pages did not require such detailed wireframing and followed more standard, basic templates.
Wireframe for Homepage Desktop
Wireframe for Frontpage Blogpost Desktop
Wireframe for Homepage Responsive
Wireframe for Frontpage Blogpost Responsive
The favicon was created with Favicon.io.
- Python - Provides the functionality for the site.
- HTML5 - Provides the content and structure for the website.
- CSS3 - Provides the styling for the website.
- JavaScript - Provides interactive elements of the website
- Gitpod - Cloud based IDE
- Bootstrap - A CSS framework that helps building solid, responsive, mobile-first sites
Bootstrap: Integrated to utilize its responsive grid system and pre-built components, ensuring the site is mobile-friendly and adaptable to different screen sizes.
- Django - A model-view-template framework used to create the Review | Alliance site
- Balsamiq - Used to create the wireframe.
- Pexels - Used for background image and animation video.
- Github - Used to host and edit the website.
- Eraser - Used to created the Database layout schema.
- Heroku - A cloud platform that the application is deployed to.
- Lighthouse - Used to test performance of site.
- Responsive Design Checker - Used for responsiveness check.
- Wave Web Accessibility Evaluation Tool - Used to validate the sites accessibility.
- Favicon - Used to create the favicon.
- Google Chrome DevTools - Used to debug and test responsiveness.
- ChatGPT AI tool for troubleshooting and repetitive tasks.
- HTML Validation - Used to validate HTML code
HTML: The foundation for structuring the web pages, providing the semantic markup needed for the site's content.
- CSS Validation - Used to validate CSS code
PostgreSQL: The primary database used to store user data, blog post listings, article details, ... chosen for its flexibility and scalability.
- PEP8 Validation - Used to validate code
- JSHint Validation - Used to validate JavaScript code
JavaScript: Employed to add interactivity and dynamic elements to the site, enhancing the user experience with features like form validation and asynchronous content updates.
-
The NASA Astronomy Picture of the Day APOD API provides daily access to a curated astronomy image or photograph, accompanied by a brief explanation written by a professional astronomer. The APOD API delivers metadata, such as the image title, description, and copyright information, as well as the image itself, which often features stunning celestial objects, phenomena, or space exploration events. This API is widely used by developers to integrate educational and visual content related to space into applications, promoting public interest in astronomy and science.
-
A personal API key need to be created on The NASA OPEN APIs
-
A dedicated GitHub repository can be found here
-
The ISS API (International Space Station) provides real-time data about the location and activities of the ISS. It offers information such as the station's current position, upcoming pass times over specific locations, and crew member details. This API is commonly used by developers to track the ISS’s orbit, predict viewing opportunities, and display relevant data to users interested in space exploration and the operations of the space station.
-
More information about the ISS API and how to implement can be found here
-
There also a free ISS Tracker Widget avialable on isstracker.pl
-
A newsletter subscription integration with Google Gmail allows users to easily sign up for newsletters directly from their Gmail account. This integration typically works by adding a simple "Subscribe" option within Gmail, streamlining the process of joining mailing lists or newsletters. It ensures that subscription emails are correctly categorized (e.g., in the "Promotions" tab) and helps users manage and organize newsletters within their inbox. Developers can integrate newsletter services using Gmail’s API to automate sending, managing, and delivering newsletter content to subscribers' inboxes.
-
More information how to integrate the Gmail API can be found here
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 - Not Logged In
The database schema was created with eraser
ERD - Diagram
I used a PostgreSQL provided by Code Institute as relational database.
-
FieldTypes:
- AutoField: An integer field that automatically increments.
- CharField: A text field with a maximum length.
- EmailField: A CharField that checks if the value is a valid email address.
- DateTimeField: A field for storing date and time.
- DateField: A field for storing dates.
- TextField: A large text field.
- OneToOneField: A one-to-one relationship.
- ForeignKey: A many-to-one relationship.
- IntegerField: An integer field.
- DecimalField: A fixed-precision decimal number.
- URLField: A CharField for URLs.
- ResizedImageField: An image field with resizing options.
-
Relationships:
- A User has one UserProfile.
- A UserProfile belongs to one User.
- A User has one Author name
- A Post category can have only one Categort
- A Comment is only linked to one Post.
- A Post like can belong to many Users.
note: The Subscriber Model has only one particlular function and that is to make a list for all user who to join the newsletter, they don't have to be active member of the blog post website.
- The complete User Experience and Agile methology are explained to this link here
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:
I ensured that the HTML structure of AstroBlog adheres strictly to web standards. I 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 Results
homepage
frontpage
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
Ensuring accessibility is a key priority for AstroBlog. 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:
- Proper use of ARIA attributes: We have utilized ARIA attributes effectively to enhance the accessibility of dynamic content and interactive elements, ensuring screen readers can accurately convey the information to users.
- Keyboard Navigation: All interactive elements, including forms, buttons, and navigation links, are fully accessible via keyboard navigation, making the site usable without a mouse.
- Contrast Ratios: We carefully selected our color scheme to ensure sufficient contrast between text and background colors, making the content readable for users with visual impairments.
- Alt Text for Images: All images include descriptive
altattributes, 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 astroblog as we develop new features and enhancements.
I have conducted a thorough accessibility audit using the WAVE (Web Accessibility Evaluation Tool). There is a smooth transition between the header of the page and the rest of the main page. Nevertheless, there are some issues to address due to the background MPEG replay. WAVE is dynamic and cannot make a persistent measurement of background contrast.
Details
Click to view Wave Homepage Result
I have 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. I believe these design choices ensure the buttons remain accessible and visually clear, even if they do not fully meet WAVE’s contrast recommendations.
Details
Click to view Contrast Errors homepage footer
Additionally, contrast warnings were noted in the Flash messages—interestingly, all colors except yellow were flagged. While we understand that white text on a transparent background might pose a readability challenge, WAVE does flaged it as an issue. Conversely, other colors, which do not seem problematic to us, were marked for contrast errors.
Details
Click to view Contrast Errors front-page pagination
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 I will continue exploring potential solutions to these issues, I have prioritized maintaining a visually cohesive and intuitive theme for the site.
Note: I'm fully aware of the contrast issues highlighted by the WAVE Validation Tool. It is my duty to address these in future updates to ensure an even higher level of accessibility across the entire platform. I appreciate the insights provided by the tool and will use this feedback to guide our ongoing improvements.
My Lighthouse validation results have been very promising, with high scores across most categories. One area where I noticed a slightly lower score is in SEO, and I’m actively working on improvements to achieve even better results. Lighthouse has been instrumental in helping me organize my files and optimize for performance.
Details
Click to view Lighthouse Homepage Result
Details
Click to view Lighthouse Frontpage Result
A specific recommendation from Lighthouse was to use the WebP format for images to improve load times. In response, I made sure that all images served through the browser are now in WebP format. However, I also understand that too much compression could negatively impact the user experience, especially on larger screens. So, I made a conscious decision to balance performance with visual quality. After gathering feedback from a diverse group of users, I confirmed that the image quality is well-received across various devices. As a result, I decided to maintain slightly larger image sizes to prioritize a smooth and visually appealing experience, even if it means sacrificing a little bit of performance.
Additionally, Lighthouse suggested reducing the CSS payload, which I’m currently considering. One option I’m exploring is breaking the main styles.css file into smaller files tied to specific widgets. This would allow me to send only the necessary CSS for each page, potentially cutting down the overall size of the CSS file and improving load times.
While the desktop version scores are very high, the mobile version, although still passing, has some room for improvement. I’m committed to refining these areas to ensure the best possible experience across all devices.
Although my project doesn't include an extensive amount of JavaScript, I can ensured that the code we do have is fully validated using JSHint. I'm pleased to report that my JavaScript code has passed the validation process with a 99% clean bill of health—no errors whatsoever.
There is only one warning that issue has probably to do JSHint interpreter itself.
Details
Click to view JSHint Result
All Python files as well env.py and manage.py, have been passed through the Code Institute PEP8 Linter.
Details
Click to view PEP8 Result
PEP8 Compliant| Directory | File | Check |
|---|---|---|
| AstroBlog | Settings.py | PASS |
| AstroBlog | urls.py | PASS |
| AstroBlog | env.py | PASS |
| AstroBlog | manage.py | PASS |
| Blogger | admin.py | PASS |
| Blogger | apps.py | PASS |
| Blogger | forms.py | PASS |
| Blogger | models.py | PASS |
| Blogger | urls.py | PASS |
| Blogger | views.py | PASS |
| Members | admin.py | PASS |
| Members | apps.py | PASS |
| Members | forms.py | PASS |
The website has undergone thorough testing across a variety of devices, including desktop computers, tablets, and smartphones. We focused on ensuring that the responsiveness of the site is consistent and effective across all screen sizes, providing an optimal user experience regardless of the device used.
To achieve this, we employed media queries to adapt the layout for different screen sizes. This approach ensures that when the device's dimensions fall within specific ranges, certain elements will reposition themselves, maintaining readability and proper alignment.
For instance, on smaller screens, such as smartphones, we adjusted the distribution of content to ensure that all elements are easily accessible and clearly visible, avoiding any overlap or readability issues. The result is a fluid and intuitive experience across devices, meeting our goal of a responsive design that performs well on all tested platforms.
I have conducted extensive testing to ensure that the website is fully compatible across a range of web browsers. Specifically, the site has been tested on:
Google Chrome
Microsoft Edge
Opera
Mozilla Firefox
Details
Click to view Google Browser Result
Details
Click to view Edge Browser Result
Details
Click to view FireFox Browser Result
Details
Click to view Opera Browser Result
In each browser, the website performs smoothly, maintaining consistent functionality and appearance. We focused on ensuring that all features, from user registration to job application processes, operate seamlessly regardless of the browser used.
No significant issues were encountered during the tests, confirming that our site is accessible and reliable across these popular browsers. This ensures that users can interact with the platform without any unexpected disruptions, regardless of their preferred browser.
Manual Testing Result Report
Navbar
| Homepage – Template | #17 | ||
|---|---|---|---|
| Scenario | Action | Result | Check |
| Click the “Go To Blog” Button | should navigate to Frontpage - Blogpost | Redirect to Blog | PASS |
| Click “Subscribe” #42 | Should navigate to Subscription | Redirect to section bottom homepage | PASS |
| Click “Go to APOD” #40 | Should navigate to Astronomy Picture of the Day | Redirect to APOD page | PASS |
| Click “Go to ISS” #41 | Should navigate to Track the International Space Station page | Redirect to ISS page | PASS |
| Fill in “Subscribe to our Newsletter”Fill in Name & Email after Submit | Should navigate to Check Email Page | Redirect to “Check your Email” page | PASS |
| Frontpage – blogpost Template | |||
|---|---|---|---|
| NavBar – if user is logged out (visitors) | |||
| Scenario | Action | Result | Check |
| Click House Icon | Should navigate to “Homepage” | Redirect to Homepage | PASS |
| Click Arrow Left | Should navigate to “Frontpage – Blogpost” | Redirect to Frontpage | PASS |
| Click Category List #32 | Dropdown menu to filter specific blogpost categories | Redirect to Posts per Categorie | PASS |
| Click Category List – Blog Posts Categories | Dropdown menu to shows all aviable categories and there discription | Redirect to Category List Page | PASS |
| Click Search Query #31 | Search for specific key words in the Blogpost | Redirect to Search post list out of blogpost specific keyword | PASS |
| Click Register | Should navigate to Register page | Redirect to Register page | PASS |
| Click Login | Should navigate to Login page | Redirect to Login Page | PASS |
| Navbar – If first time user is Logged In (registered users) | #20 | ||
|---|---|---|---|
| Scenario | Action | Result | Check |
| Click Logged is as: [user] | Should navigate to Create Profile Page | Redirect to Create Profile Page | PASS |
| Click Add Post | Should navigate to Add Post | Redirect to Create Add Post Page | PASS |
| NavBar – if after create a profile | #18 | ||
|---|---|---|---|
| Scenario | Action | Result | Check |
| Click Logged is as: [user] | Should navigate to Edit Profile Page | Redirect to Edit Profile Page | PASS |
| Frontpage – Blogpost If [user] Not Logged In (Visitors) | #18 | ||
|---|---|---|---|
| Scenario | Action | Result | Check |
| Click [Read More] | Should navigate to Article Detail Page | Redirect to Article Details Page | PASS |
| Click [Pagination buttons] | Should navigate to other Frontpage Blogpost | Redirect to Frontpage Blogpost | PASS |
| Back to Top | Should navigate to top of Frontpage | Redirect to Top op Frontpage | PASS |
| Frontpage – Blogpost If [user] Logged In (Users) | #18 | ||
|---|---|---|---|
| Scenario | Action | Result | Check |
| Click “Edit” for which to user has create the post | Should navigate to Edit Article Blogpost | Redirect to Edit Article Blogpost | PASS |
| Click “Delete” for which to user has create the post | Should navigate to Delete Blogpost | Redirect Delete to Blogpost | PASS |
| Addpost page Template | #21 | ||
|---|---|---|---|
| Scenario | Action | Result | Check |
| Post | Should navigate to Add new post | Redirect to Add Newpost | PASS |
| Back to Blog | Should navigate to Frontpage Blogpost | Redirect to Frontpage Blogpost | PASS |
| Article detail blog post | #25 | ||
|---|---|---|---|
| Scenario | Action | Result | Check |
| Click high lighted author name | Should navigate to Author Profile Page | Redirect to Profile Page | PASS |
| Click Like (visitors) | must be logged in to comment | no redirect to comments | PASS |
| Click Like (only autheticated users) | Like button available | increase counter total likes | PASS |
| Click unlike | Unlike button available | decrease counter total likes | PASS |
| Add Comment (vistors) | not able to make a comment | no redirect to comments | PASS |
| Add Comment (only autheticated users) | Should navigate to Add Comments | Redirect to Add Comments | PASS |
| Back to Blog | Should navigate to Frontpage Blogpost | Redirect to Frontpage Blogpost | PASS |
| Add comment Template | #10 | ||
|---|---|---|---|
| Scenario | Action | Re-Action | Check |
| Cick Add Comment | Should navigate to Add Comment | Redirect to Add Comment | PASS |
| Back to Blog | Should navigate to Frontpage Blogpost | Redirect to Frontpage Blogpost | PASS |
| Login Template | #20 | ||
|---|---|---|---|
| Scenario | Action | Result | Check |
| Click Login | After Filled in correct credintials | Redirect to Frontpage Blogpost | PASS |
| Register Template | #20 | ||
|---|---|---|---|
| Scenario | Action | Result | Check |
| Click on Register | Should navigate to Login | Redirect to Login | PASS |
| Author Profile Template | #16 | ||
|---|---|---|---|
| Scenario | Action | Result | Check |
| Click Twitter icon | Should navigate to Twitter | Redirect to Twitter | PASS |
| Click Instagram icon | Should navigate to Instagram | Redirect to Instagram | PASS |
| Click Facebook | Should navigate to Facebook | Redirect to Facebook | PASS |
| Click Globe | Should navigate to Website | Redirect to Codeinstiture | PASS |
| Back to Blog | Should navigate to Frontpage Blogpost | Redirect to Frontpage Blogpost | PASS |
| Search Template | #31 | ||
|---|---|---|---|
| Scenario | Action | Result | Check |
| Back to Blog | Should navigate to Frontpage Blogpost | Redirect to Frontpage Blogpost | PASS |
| Edit Profile Page Template | #21 | ||
|---|---|---|---|
| Scenario | Action | Result | Check |
| Click Edit Settings | Should navigate to Edit Profile | Redirect to Edit Profile | PASS |
| Click Show Profile | Should navigate to User profile | Redirect to User Profile | PASS |
| Click Update Profile | Should navigate to User profile | Redirect to User Profile | PASS |
| Edit Profile | #17 | ||
|---|---|---|---|
| Scenario | Action | Result | Check |
| Click Change Password | Should navigate to Change Password | Redirect to Change Password | PASS |
| Click Update Profile | Should navigate to Frontpage Blogpost | Redirect to Frontpage Blogpost | PASS |
| Back to Blog | Should navigate to Frontpage Blogpost | Redirect to Frontpage Blogpost | PASS |
| Create Profile Page | #17 | ||
|---|---|---|---|
| Scenario | Action | Result | Check |
| Click Create Profile | Should navigate to Frontpage Blogpost | Redirect to Frontpage Blogpost | PASS |
| Check Email Template | #42 | ||
|---|---|---|---|
| Scenario | Action | Result | Check |
| Click Return to Homepage | Should navigate to Homepage | Redirect to Homepage | FAIL |
| Check Confirm Subscription Template | #42 | ||
|---|---|---|---|
| Scenario | Action | Result | Check |
| Click Return to Homepage | Should navigate to Homepage | Redirect to Homepage | PASS |
| Scenario #41 | Action | Result | Check |
|---|---|---|---|
| ISS_location Template | |||
| Click Back to Blog | Should navigate to Frontpage Blogpost | Redirect to Frontpage Blogpost | PASS |
| Nasa_Picture Template | #40 | ||
|---|---|---|---|
| Scenario | Action | Result | Check |
| Click Back to Blog | Should navigate to Frontpage Blogpost | Redirect to Frontpage Blogpost | PASS |
| Footer | |||
|---|---|---|---|
| Scenario | Action | Result | Check |
| Click © 2024 Astro Blog by Filip Van Elslande | Should navigate to Homepost | Redirect to Homepage | PASS |
| Click Twitter icon | Should navigate to Twitter | Redirect to X.com | PASS |
| Click Instagram icon | Should navigate to Instagram | Redirect to Instagram.com | PASS |
| Click Facebook | Should navigate to Facebook | Redirect to Facebook | PASS |
| Click Globe | Should navigate to Website | Redirect to Codeinstitute | PASS |
| Search Template | #31 | ||
|---|---|---|---|
| Scenario | Action | Result | Check |
| Click Back to Blog | Should navigate to Hompage | Redirect to Homepage | PASS |
| 401 Page Template | |||
|---|---|---|---|
| Scenario | Action | Result | Check |
| Click Back to Blog | Should navigate to Hompage | Redirect to Homepage | PASS |
| 404 Page Template | |||
|---|---|---|---|
| Scenario | Action | Result | Check |
| Click Back to Blog | Should navigate to Hompage | Redirect to Homepage | PASS |
| 500 Page Template | |||
|---|---|---|---|
| Scenario | Action | Result | Check |
| Click Back to Blog | Should navigate to Hompage | Redirect to Homepage | PASS |
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 list of requirements in the requirements.txt file by using the command pip3 freeze > requirements.txt
- Log in (or sign up) to Heroku
- Click on the New button and select Create new app
- Give it a unique name and choose the region Europe
- Click the Settings tab, go to the Config Vars section and click on the Reveal Config Vars button
- Add all variables from env.py to ConfigVars of Heroku
Details
Click to view details Config Vars Heroku
- Click the Add button
- Click the Deploy tab, go to the Deployment method section, select GitHub and confirm this selection by clicking on the Connect to Github button
- Search for the repository name on github Astro Blog and click the Connect button
- Add in the setting.py the Heroku app URL into ALLOWED HOSTS
- Gather all static files of the project by using the command python3 manage.py collectstatic in the terminal
- Make sure that DEBUG=FALSE in settings.py
- Create a Procfile in the root directory and add web: gunicorn astroshare-blog.wsgi
- In Heroku enable the automatic deploy or manually deploy the code from the main branch
- Generate an env.py file in the root directory of the project
- Configure the environment variables within this file
- Create a virtual environment
- Install all required dependencies using pip install command into the .venv
- Add dependencies to the requirements.txt file using pip3 freeze > requirements.txt command
- Log in to GitHub.
- Navigate to the repository for this project by selecting Harmonica-Men/AstroShare-Blog
- Click at the top of the repository on the Fork button on the right side
- Log in to GitHub.
- Navigate to the repository for this project by selecting Harmonica-Men/AstroShare-Blog
- In the top-right corner, click on the green Code button
- Copy the HTTPS URL in the tab Local
- Go to the code editor of your choice and open the terminal
- Type
git cloneand paste the URL you copied into your terminal - Press the enter key
- Navigate to Cloudinary
- Sign up or log in to account
- Go to the dashboard
- Click on Go to API Keys button
- Generate a new API Key
- Provide the API environment variable in format: CLOUDINARY_URL=cloudinary://<your_api_key>:<your_api_secret>@ds5rjhhxu in env.py and Config Vars
- Update settings.py
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
- The link works only if you are a student of Code Institute
Details
PostgreSQL database creation step1
-
After you filled in your LMS account the PostgresSQL database manager will automatically generate a new database for you.
Details
PostgreSQL database creation step2
-
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.
Details
PostgreSQL database creation step3
-
Note: These databases are limited in time and have a life time of operation of 18 months after the date of creation.
Details
PostgreSQL database creation step4
- Navigate to Gmail
- Sign up or log in to account
- Go to the settings and enable 2-step verification and IMAP
- Navigate to your Google account
- Search in search bar for App password
- Create new app password and copy this as variable in env.py and Config Vars
- Update settings.py
- In order to properly work with the NASA APOD API, I was unable to hide the API KEY from views.py (line 266) and the JavaScript (line 6). After extensive debugging, I was forced to hardcode the API KEY into the code.
- The issues I struggled with were how to enforce the JavaScript onto a JSON response fetch, which was too complicated.
- After that, I also had problems recalling the
NASA_API_KEYfrom settings.py. - For demonstrational purposes, I hardcoded the API KEYS to show the potential of the APIs.
- Further more in the newsletter subscription there should be a confirmation message displayed but was included but fail to render. Instead a 404 page was returned.
Astro Share Blog is licensed under the Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.
You are free to:
-
Share: Copy and redistribute the material in any medium or format.
-
Adapt: Remix, transform, and build upon the material.
Under the following terms:
-
Attribution: You must give appropriate credit, provide a link to the license, and indicate if changes were made. You may do so in any reasonable manner, but not in any way that suggests the licensor endorses you or your use.
-
NonCommercial: You may not use the material for commercial purposes.
-
ShareAlike: If you remix, transform, or build upon the material, you must distribute your contributions under the same license as the original.
For more information about the Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License, visit here.
- I would like to express my deepest gratitude to my excellent mentor Student Mentor, Daisy Mcgirr for her numerous tips and wonderful assistance during the creation of this project.
- Furthermore, I would like to thank Lino Bollansee. I greatly appreciate his frequent comments during the creation of my project.
This is for educational use