Photography Blog
Introduction
Photography Blog is a dynamic web application created for photography enthusiasts who wish to showcase their work and connect with a community of like-minded individuals. This platform allows users to upload their photos, categorize them, and engage with others through comments and likes. Whether you’re an amateur photographer or a seasoned professional, the Photography Blog offers a space to share your visual stories with the world.
View the live project here: Photography Blog
Am I Responsive
Here's deployed site: Am I Responsive
Project Overview
Photography Blog is a web application designed for photographers to share their work with a community. Users can upload photos, categorize them, leave comments, and interact with others by liking photos. The project emphasizes a user-friendly interface with responsive design, making it accessible on both desktop and mobile devices.
Developer Goals
The primary goals for the development of the Photography Blog are:
- Create an Intuitive User Interface: Develop a user-friendly and responsive interface that allows users to easily navigate the site, upload photos, and interact with other users.
- Implement Robust User Authentication: Ensure that user data is securely handled with proper authentication mechanisms, allowing users to manage their profiles and content.
- Enable Content Management: Provide users with the ability to upload, edit, and delete their photos, as well as categorize them for better organization and discovery.
- Foster Community Interaction: Encourage user engagement through features like comments and likes, creating a social environment around photography.
- Ensure Mobile Responsiveness: Design the site to be fully responsive, ensuring a seamless experience on devices of all sizes, from desktops to smartphones.
- Utilize Cloud Storage for Media: Integrate cloud storage solutions to efficiently manage and serve images, optimizing performance and scalability.
- Provide Comprehensive Error Handling: Implement custom error pages to handle common HTTP errors gracefully, improving the user experience even when things go wrong.
User Goals
For users, the Photography Blog aims to fulfill the following goals:
- Easily Share Photography: Users should be able to effortlessly upload and categorize their photos, making them accessible to others.
- Engage with the Community: Users should be able to interact with other photographers through comments and likes, building a sense of community.
- Explore a Wide Range of Photography: The platform should provide an easy way to browse and discover photos across different categories, helping users to find inspiration and new connections.
- Manage Personal Content: Users should have control over their own content, with the ability to edit or delete their photos and manage their profile settings.
- Access from Any Device: Users should enjoy a consistent and intuitive experience across all devices, whether they are on a desktop or mobile device.
- Search for Specific Content: The platform should offer a search feature that allows users to quickly find photos or posts that match their interests.
- Secure and Private Experience: Users should feel confident that their personal information is secure, and that they have privacy controls over their content.
Problem Statement
Background
Photography is a powerful medium for storytelling, yet existing platforms often fail to provide photographers with the tailored experience they need. General social media sites overwhelm quality content with sheer volume, making it difficult for photographers to stand out and connect meaningfully with their audience.
Problem
Photographers face several challenges on current platforms:
- Lack of Niche Communities: General platforms don’t offer specialized spaces for photographers.
- Content Overload: Quality work often gets lost in a sea of posts.
- Limited Content Control: Users need better tools to manage and showcase their work.
- Poor Engagement: Existing interaction tools are often inadequate for meaningful feedback.
- Mobile Responsiveness Issues: Many platforms fail to provide a consistent visual experience across devices.
Requirements
To address these challenges, the Photography Blog must:
- Offer User-Friendly Design: Easy navigation and content management.
- Encourage Engagement: Features like comments, likes, and search to enhance interaction.
- Ensure Responsiveness: Consistent design across all devices.
- Provide Secure Authentication: Protect user data and content.
- Foster Community Building: Tools that promote connections among photographers.
Target Audience
This platform is designed for:
- Amateur Photographers: Looking to share and improve their skills.
- Professional Photographers: Seeking to showcase their portfolios and connect with peers.
- Photography Enthusiasts: Interested in exploring and engaging with visual content.
- Content Creators: Searching for a dedicated space to share high-quality photography.
- Art Directors & Agencies: Looking for new talent and inspiration.
Entity-Relationship Diagram (ERD)
The Entity-Relationship Diagram (ERD) representing the relationships between the User, Category, Photo and Comment models.
- User to Photo: A one to many relationship where a user can upload many photos.
- Category to Photo: A one to many relationship where each photo belongs to one category.
- Photo to Comment: A one to many relationship where a photo can have many comments.
- User to Comment: A one to many relationship where a user can make many comments.
- User to Photo (Likes): A many-to-many relationship where users can like many photos, and many users can like each photo.
Learning Outcomes
-
Django Framework Proficiency:
- Develop a strong command of Django, a high-level Python web framework, by understanding its architecture, core components, and best practices for building robust, scalable web applications.
-
Bootstrap Integration:
- The integration of Bootstrap into Django projects to create responsive, mobile-first web designs efficiently, enhancing both the aesthetic appeal and user experience.
-
Python Programming Skills:
- Improve Python programming skills, with a focus on writing clean, efficient, and maintainable code that seamlessly integrates with Django’s architecture.
-
Image Handling with Pillow and Cloudinary:
- Learn to install and use Pillow, a powerful Python Imaging Library, to handle image processing tasks like uploading and resizing.
- Gain proficiency in integrating Cloudinary, a cloud-based service, to efficiently manage image storage, processing, and delivery. Leverage its APIs for advanced image optimization and manipulation.
-
CRUD Operations:
- The implementation of Create, Read, Update, and Delete (CRUD) operations in Django, enabling full management of data models and enhancing dynamic content interaction.
- Learn to build views and templates to handle these operations efficiently and securely.
-
User Authentication and Authorization:
- Gain expertise in implementing user authentication and authorization mechanisms in Django, ensuring secure access control for different parts of the application.
- Learn to integrate Django’s built-in authentication system to manage user login, registration, password management, and permission settings.
-
Template Rendering and Static Files Management:
- Understand Django’s template engine and how to create dynamic HTML templates that render data seamlessly from the backend.
- Learn to manage static files (CSS, JavaScript, images) in Django, ensuring efficient loading and organisation, particularly in production environments.
-
Javascript Integration and Engancement
- Develop JavaScript skills to enhance interactivity and user experience in Django applications.
- Learn to write custom JavaScript code for dynamic features such as search bars, toggle and dropdown.
User Experience (UX)
The goal of this project is to create a seamless and enjoyable user experience for amateur photographers. The blog is designed to be intuitive, visually appealing, and functional, ensuring users can easily navigate the site, upload their work, and engage with the community.
User Stories
- As a Site User I can view a paginated list of posts so that easily select a post to view.
- As a Site User / Admin I can view the number of likes on each post so that I can see which is the most popular or viral.
- As a Site User, I want to log in, so that I can access my account and manage my posts.
- As a Site User, I want to upload photos, so that I can share my work with others.
- As a Site User, I want to edit or delete my posts, so that I can manage my portfolio.
- As a Site User, I want to comment on posts, so that I can provide feedback and engage with the community.
- As a Site User, I want to log out, so that I can securely leave the site.
and more. Link to the Kanban board here
Development Plan
This project was organized and executed using Agile methodology. A Kanban board within GitHub Projects was utilized to track progress and manage tasks, ensuring a structured and iterative development process. Link to the Kanban board here
Features
User Authentication
- Sign Up: New users can create an account.
- Login/Logout: Users can log in and out securely.
- Profile Management: Users can manage their profile and view their uploaded photos.
Photo Management
- Upload Photos: Users can upload photos with titles, descriptions, and categorise them.
- Edit/Delete Photos: Users can edit or delete their photos.
- Photo Gallery: Users can browse through all photos uploaded by others.
- Like Photos: Users can like or unlike Photos.
- View Photo Details: Clicking on a photo displays a detailed view with the photo, title, description, likes, and comments.
Comments
- Comment on Photos: Users can leave comments on photos.
- Delete Comments: Users can delete their comments.
Search Functionality
- Search Bar: Users can search for photos by title or content directly from the navbar.
Pagination
- Paginated Views: The photo gallery and comments are paginated for easy navigation.
Responsive Design
- Mobile Friendly: The site is fully responsive, ensuring a seamless experience on mobile devices.
Error Handling
- Custom Error Pages: The site includes custom error pages for 404, 500, 403 and 400 errors.
Model Design
Design
The design of the Photography Blog is modern and minimalist, with a focus on showcasing high-quality images. The layout is clean and simple, with ample whitespace to create a visually appealing experience for users. The color scheme is a combination of neutral tones, with accents of blue to evoke a sense of creativity and inspiration.
base.html
-
Navigation Bar: The navigation bar is placed at the top of the page, providing easy access to the main sections of the blog, including Home, Blog, About, Contact and user-specific options like My Photo List and Logout.
-
Responsive Bahavior:
- The navigation bar collapses into a hamburger menu on smaller screens.
- It uses Bootstrap's responsive classes to ensure proper alignment and spacing.
-
Header Image:
-
The header image spans the full width of the screen and adjusts its height based on the viewport. It serves as a visually engaging introduction to the site.
-
Implementation:
- The image is set as a background image in the CSS, using the background-size: cover property to maintain aspect ratio and cover the container.
- The header image is responsive and adapts to different screen sizes without losing its aspect ratio.
-
Welcome Section:
- The homepage of the Photography Blog features a prominent welcome section designed to engage visitors immediately. This section includes a welcoming message, a visually appealing lens image, and a call-to-action button inviting users to explore the blog.
-
Lens Image:
- The welcome section includes a high-quality image of a camera lens, symbolizing the focus of the blog—photography.
- Placement and Sizing: The image is placed below the welcome message and is responsive to screen size. It is designed to scale appropriately on mobile devices, tablets, and desktops, maintaining its visual impact without overwhelming the text.
-
Action Button:
- The button text reads "Explore My Blog," encouragaing users to dive deeper into the content.
- Footer:
- The footer is kept minimal and clean, with a dark background and white text. It includes social media icons and is centered for symmetry.
- The footer's layout adjusts to ensure all elements remain accessible and visually appealing on all screen sizes.
blog.html
-
The blog page showcases a collection of photography posts, organized into categories like Landscape, Portrait, Wildlife, Street, and Macro.
-
Layout:
- Category Navigation: A horizontal navigation bar at the top allows users to filter photos by category. The active category is highlighted for easy identification.
- Photo Grid: Posts are displayed in a responsive grid layout, ensuring that images adjust smoothly across different screen sizes. Each photo is accompanied by a title and a short description.
-
Responsive Design:
- Mobile: The grid adjusts to a single column, ensuring photos and text are easily viewable.
- Tablet and Desktop: The grid expands to multiple columns, providing a balanced and visually appealing display of content.
-
Interactive Elements:
- Photo Links: Each photo links to a detailed view where users can see the full post, read comments, and interact with the content.
- Pagination: Users can navigate through multiple pages of posts with easy-to-use pagination controls at the bottom.
Category Pages: Landscape, Portrait, Wildlife, Street, Macro
-
Each category page presents a curated selection of photography posts focused on a specific theme, allowing users to explore content based on their interests.
-
Layout:
- Category-Specific Navigation: Users can switch between different categories using the navigation bar at the top. The current category is prominently highlighted.
- Photo Display: Similar to the blog page, photos are displayed in a responsive grid layout with titles and short descriptions. Each image represents a unique perspective within the chosen category.
-
Responsive Design:
- Mobile: The grid adapts to a single column for optimal viewing on smaller screens.
- Tablet and Desktop: Multiple columns are used to display photos, ensuring a balanced and organized presentation across devices.
-
Interactive Elements:
- Photo Links: Clicking on a photo takes the user to a detailed view, where they can explore the full post, read and leave comments, and interact with the content.
- Pagination: For categories with a large number of posts, pagination controls are provided to navigate through multiple pages.
-
Category-Specific Content:
- Landscape: Focuses on natural scenery, capturing the beauty of the outdoors.
- Portrait: Highlights individual and group portraits, showcasing emotions and expressions.
- Wildlife: Features photography of animals and nature, emphasizing the diversity of wildlife.
- Street: Captures the essence of urban life, with photos taken in streets and public places.
- Macro: Delves into the details of small subjects, offering close-up views that reveal intricate details.
-
Photo Management Features:
- View Photos: Every user, whether logged in or not, can view all photos uploaded by any user. Each photo can be viewed in detail by clicking the "View" button, which redirects to a detailed view of the photo along with its description and any associated comments.
- Edit Photos: Users who have uploaded photos have the option to edit them. When logged in, if a user views their own photos, they will see an "Edit" button alongside the photo. This button allows them to modify the photo's details, such as the title, description, or the photo itself.
- Delete Photos: Similarly, users have the ability to delete their own photos. The "Delete" button appears next to photos owned by the logged-in user. Upon clicking, the user is prompted to confirm the deletion, ensuring that photos are not accidentally removed.
landscape.html -
portrait.html -
wildlife.html -
street.html -
macro.html -
Add Photo Page -
-
The "Add Photo" page is an essential feature of the Photography Blog, allowing users to contribute their own photography to the site. This page is only accessible to logged-in users. The key features of the "Add Photo" page include:
-
Photo Upload: Users can easily upload their photos by selecting a file from their device. The photo will be stored and displayed on the blog, categorized according to the user's choice.
-
Title and Description: Along with the photo, users are required to provide a title and a description. The title helps in identifying the photo, while the description allows the user to share the story or context behind the image.
-
Category Selection: Users can categorize their photos by choosing from predefined categories such as Landscape, Portrait, Wildlife, Street, and Macro. This helps in organizing the photos within the blog and aids in easy navigation for viewers.
-
Form Validation: The form on the "Add Photo" page includes validation to ensure all required fields are filled out correctly. If any issues are detected, the user is prompted to correct them before submission.
Success Page The success.html page is a dedicated confirmation page displayed after a user successfully uploads a photo to their portfolio. The page is designed with user experience in mind, featuring a clean and centered card that conveys the success message. The card header, styled in green, signals the successful upload with the message "Photo Uploaded Successfully!" Users are informed that their photo is now visible in their portfolio. Additionally, the page provides easy navigation with buttons allowing users to either view their photos or upload another one.
Key Features:
- Responsive Design: The layout adjusts for different screen sizes, ensuring a consistent user experience on both desktop and mobile devices (including 320px mobile screens).
- Clear Navigation: Buttons within the card allow users to quickly access their photo list or initiate another photo upload. _ Aesthetic and Functional Layout: The card's centered position, clear typography, and green success header contribute to a positive user experience.
- Success Message: After successfully uploading a photo, users are redirected to a success page, and a success message is displayed. This confirms that their photo has been added to the blog and is visible to other users.
My Photo List Page
-
The "My Photo List" page is a personalized feature for logged-in users, providing them with a dedicated space to manage their uploaded photos. This page displays all the photos a user has uploaded to the Photography Blog. The key features of the "My Photo List" page include:
-
Personal Photo Gallery: Users can view a gallery of all the photos they have uploaded. Each photo is displayed with its title and a brief description, offering a quick overview of the user's contributions to the blog.
-
View, Edit, Delete Options: For each photo in the gallery, users have the following options:
-
View: Opens the detailed view of the photo, allowing the user to see it in full size along with all associated comments and likes.
-
Edit: Allows the user to modify the title, description, or even replace the photo. This is useful for updating content or correcting any mistakes.
-
Delete: Provides the option to remove the photo from the blog. A confirmation prompt ensures that users do not accidentally delete their content.
-
Pagination: The photo list is paginated to ensure that the page remains easy to navigate, even for users with a large number of uploads. Users can easily navigate between pages to view all their photos.
-
Responsive Design: The "My Photo List" page is designed to be fully responsive, ensuring a seamless experience across different devices, including desktops, tablets, and mobile phones.
This page serves as a personal management tool, giving users full control over their uploaded content on the Photography Blog. It encourages users to maintain and curate their gallery, contributing to the overall quality and organization of the site.
View Page
The View Page displays detailed information about a specific photo, including its title, description, and the photographer's username. Key features include:
- Photo Display: Large view of the image with detailed information below.
- User Interactions: Authenticated users can comment, like, and view the photo’s popularity.
- Owner Controls: If the user owns the photo, "Edit" and "Delete" buttons are available.
- Responsive Design: The page is fully responsive, ensuring optimal display across all device sizes.
Edit Page
The Edit Page allows users to modify the details of their uploaded photos. Key features include:
- Form for Editing: Users can update the title, description, and category of the photo using a pre-filled form.
- Image Update: Option to change the photo if necessary.
- User Authentication: Only the photo's owner can access and edit the photo.
- Success Messages: After successfully updating the photo, the user is redirected with a confirmation message.
- Responsive Design: The form layout adjusts seamlessly across all device sizes, ensuring a smooth editing experience.
Delete Photo
The Delete Page allows users to permanently remove their uploaded photos. Key features include:
- Confirmation Prompt: Users are asked to confirm their decision to delete a photo to prevent accidental deletions.
- User Authentication: Only the owner of the photo has access to delete it, ensuring security and control.
- Success Messages: Upon successful deletion, users are redirected to the blog page with a confirmation message.
- Responsive Design: The confirmation layout is optimized for all device sizes, providing a consistent user experience.
About Us
The About Us page provides visitors with insights into the mission and vision of the Photography Blog. Key elements include:
- Introduction: A brief overview of the blog's purpose, highlighting its role in inspiring and educating photography enthusiasts.
- Mission Statement: Details on how the blog aims to connect photographers of all levels, offering tutorials, gear reviews, and inspiring photo galleries.
- Community Focus: Emphasis on building a community where photographers can share their experiences, engage in discussions, and showcase their work.
- Responsive Design: The page is fully responsive, ensuring readability and visual appeal across all devices.
Contact Us
The Contact Us page is designed to facilitate communication between visitors and the Photography Blog team. Key features include:
- Contact Form: A straightforward form that allows users to submit inquiries, feedback, or requests. The form includes fields for name, email, and message, ensuring that the team can respond effectively.
- Success Message: Upon successful submission, users receive a confirmation message, assuring them that their message has been received.
- Responsive Design: The page is fully responsive, ensuring that the form is easy to use on all devices, from desktops to mobile phones.
- Security: The form includes validation and protection against spam, ensuring that all submissions are genuine and relevant.
Sign Up
The Sign Up page allows new users to create an account on the Photography Blog. It includes a simple and user-friendly form where users can enter their desired username, email, and password. Upon successful registration, users are automatically logged in and redirected to the homepage. A success message is displayed to welcome the new user.
- User Registration: Users can sign up by providing a username, email, and password.
- Automatic Login: After registration, users are automatically logged in.
- Success Feedback: A confirmation message is shown to the user upon successful registration.
- Form Validation: The form includes validation to ensure all required fields are filled out correctly.
Login
The Login page provides a secure way for returning users to access their accounts on the Photography Blog. The page features a straightforward form where users can enter their username and password. After a successful login, users are redirected to the homepage.
- User Authentication: Users can log in with their registered username and password.
- Redirect on Success: After logging in, users are redirected to the homepage.
- Error Handling: If login credentials are incorrect, an error message is shown, prompting the user to try again.
Error Page
The Photography Blog includes custom error pages to enhance user experience when something goes wrong. These pages ensure that even in the case of errors, users receive clear and helpful feedback. The custom error pages include:
-
400 Bad Request: This page appears when the server cannot process the request due to a client error, such as a malformed request syntax. It provides a simple, clear explanation and a link to navigate back to the homepage.
-
403 Forbidden: This page is shown when a user tries to access a resource they do not have permission to view. It clearly explains the issue and encourages the user to contact the site administrator if they believe this is an error.
-
404 Not Found: This page is displayed when a user attempts to access a page that doesn't exist. It provides a friendly message, suggesting that the user may have mistyped the URL or clicked on a broken link. The page includes a button to redirect users back to the homepage.
-
500 Internal Server Error: In the event of a server issue, this page informs the user that something went wrong on the server side. It suggests trying again later and includes a link to return to the homepage.
Design Choices
The design choices were influenced by the need to create a platform that is easy to navigate and visually appealing. The use of a minimalist layout and neutral color scheme allows the focus to be on the photography, while the accents of blue add a touch of personality to the design.
Colours
The colors used in the design are:
- Primary Text Color: #333 - Used for the main text across the website.
- Background Color: #f9f9f9 - Used for the overall background of the site and form backgrounds.
- Header Background Color: #333 - Used for the header and other key areas, providing a dark contrast.
- Button Primary Color: #4CAF50 - Used for primary action buttons, such as submit and upload.
- Button Hover Color: #3e8e41 - The hover state for primary buttons, creating an interactive feel.
- Alert Success Background: #dff0d8 - Used for success messages, like after form submissions.
- Alert Success Text: #3c763d - Text color for success alerts.
- Alert Danger Background: #f2dede - Used for error or danger messages.
- Alert Danger Text: #a94442 - Text color for error alerts.
- Footer Background Color: #333 - Provides a dark footer with contrasting white text.
- Footer Text and Icon Color: #fff - Ensures good readability against the dark background.
Fonts
The fonts used in your project are:
Arial, sans-serif: This is the main font used throughout your CSS for body text and headings. It's a widely used, clean, and highly readable font that is supported across all browsers and devices.
Wireframes
- Wireframes were created to visualize the layout and design of the photography blog.
Desktop Wireframes
| Page | Wireframes | Pass |
|---|---|---|
| About Us | Screenshot of result |
:white_check_mark: |
| Add Photo | Screenshot of result |
:white_check_mark: |
| Blog | Screenshot of result |
:white_check_mark: |
| Contact Us | Screenshot of result |
:white_check_mark: |
| Homepage | Screenshot of result |
:white_check_mark: |
| Landscape | Screenshot of result |
:white_check_mark: |
| Login | Screenshot of result |
:white_check_mark: |
| Macro | Screenshot of result |
:white_check_mark: |
| Photo List | Screenshot of result |
:white_check_mark: |
| Portrait | Screenshot of result |
:white_check_mark: |
| Sign Up | Screenshot of result |
:white_check_mark: |
| Street | Screenshot of result |
:white_check_mark: |
| Wildlife | Screenshot of result |
:white_check_mark: |
| Success | Screenshot of result |
:white_check_mark: |
Mobile Wireframes
| Page | Wireframes | Pass |
|---|---|---|
| About Us | Screenshot of result |
:white_check_mark: |
| Add Photo | Screenshot of result |
:white_check_mark: |
| Blog | Screenshot of result |
:white_check_mark: |
| Contact Us | Screenshot of result |
:white_check_mark: |
| Homepage | Screenshot of result |
:white_check_mark: |
| Landscape | Screenshot of result |
:white_check_mark: |
| Login | Screenshot of result |
:white_check_mark: |
| Macro | Screenshot of result |
:white_check_mark: |
| Photo List | Screenshot of result |
:white_check_mark: |
| Portrait | Screenshot of result |
:white_check_mark: |
| Sign Up | Screenshot of result |
:white_check_mark: |
| Street | Screenshot of result |
:white_check_mark: |
| Wildlife | Screenshot of result |
:white_check_mark: |
| Success | Screenshot of result |
:white_check_mark: |
Testing
Validator Testing
HTML Validation
ll pages were validated, and the code was pasted in. A filter was applied to remove issues related to the Django templating system.
| Tested | Result | View Result | Pass |
|---|---|---|---|
| base | No errors | Screenshot of result |
:white_check_mark: |
| about | No errors | Screenshot of result |
:white_check_mark: |
| add photo | No errors | Screenshot of result |
:white_check_mark: |
| blog | No errors | Screenshot of result |
:white_check_mark: |
| confirm delete | No errors | Screenshot of result |
:white_check_mark: |
| contact | No errors | Screenshot of result |
:white_check_mark: |
| edit photo | No errors | Screenshot of result |
:white_check_mark: |
| homepage | No errors | Screenshot of result |
:white_check_mark: |
| landscape | No errors | Screenshot of result |
:white_check_mark: |
| marco | No errors | Screenshot of result |
:white_check_mark: |
| photo detail | No errors | Screenshot of result  |
:white_check_mark: |
| photo list | No errors | Screenshot of result  |
:white_check_mark: |
| portrait | No errors | Screenshot of result |
:white_check_mark: |
| search results | No errors | Screenshot of result |
:white_check_mark: |
| street | No errors | Screenshot of result |
:white_check_mark: |
| wildlife | No errors | Screenshot of result![Result]() |
:white_check_mark: |
CSS Validation
| Tested | Result | View Result | Pass |
|---|---|---|---|
| styles.css | No errors | Screenshot of result |
:white_check_mark: |
Python linter (PEP8)
| Tested | Result | View Result | Pass |
|---|---|---|---|
| admin.py | No errors | Screenshot of result |
:white_check_mark: |
| apps.py | No errors | Screenshot of result |
:white_check_mark: |
| forms.py | No errors | Screenshot of result |
:white_check_mark: |
| models.py | No errors | Screenshot of result |
:white_check_mark: |
| url.py | No errors | Screenshot of result |
:white_check_mark: |
| views.py | No errors | Screenshot of result |
:white_check_mark: |
JShint
| Tested | Result | View Result | Pass |
|---|---|---|---|
| script.js | No errors | Screenshot of result |
:white_check_mark: |
Accessibility
PageSpeed Insights Accessibility Results
I used Google PageSpeed Insights to evaluate the accessibility of our website on both mobile and desktop platforms. PageSpeed Insights provides a score out of 100 for accessibility, which measures how well the content of the web pages is accessible to all users, including those with disabilities.
Desktop Accessibility Scores
| Tested | Result | View Result | Pass |
|---|---|---|---|
| Homepages | 89 | Screenshot of result |
:white_check_mark: |
| Blog page | 84 | Screenshot of result |
:white_check_mark: |
| Landscape page | 84 | Screenshot of result |
:white_check_mark: |
| Portrait page | 84 | Screenshot of result |
:white_check_mark: |
| Wildlife page | 88 | Screenshot of result |
:white_check_mark: |
| Street page | 88 | Screenshot of result |
:white_check_mark: |
| Macro page | 84 | Screenshot of result |
:white_check_mark: |
| About Us page | 89 | Screenshot of result |
:white_check_mark: |
| Contact page | 88 | Screenshot of result |
:white_check_mark: |
| Login page | 88 | Screenshot of result |
:white_check_mark: |
| Signup page | 88 | Screenshot of result |
:white_check_mark: |
Mobile Accessibility Scores
| Tested | Result | View Result | Pass |
|---|---|---|---|
| Homepages | 100 | Screenshot of result |
:white_check_mark: |
| Blog page | 89 | Screenshot of result |
:white_check_mark: |
| Landscape page | 89 | Screenshot of result |
:white_check_mark: |
| Portrait page | 89 | Screenshot of result |
:white_check_mark: |
| Wildlife page | 94 | Screenshot of result |
:white_check_mark: |
| Street page | 94 | Screenshot of result |
:white_check_mark: |
| Macro page | 89 | Screenshot of result |
:white_check_mark: |
| About Us page | 100 | Screenshot of result |
:white_check_mark: |
| Contact page | 100 | Screenshot of result |
:white_check_mark: |
| Login page | 100 | Screenshot of result |
:white_check_mark: |
| Signup page | 100 | Screenshot of result |
:white_check_mark: |
Key Accessibility Highlights
-
Consistent High Scores: The accessibility scores are consistently high across both mobile and desktop platforms, indicating that the site is well-optimized for accessibility on different devices.
-
Responsive Design: The website's design adapts well to both mobile and desktop screens, ensuring that content remains accessible and usable regardless of the device being used.
-
Color Contrast: All text elements meet the recommended contrast ratio, ensuring that text is easily readable against background colors on both mobile and desktop devices. This is crucial for users with visual impairments.
-
Alt Text for Images: All images include descriptive alt attributes, allowing screen readers to convey the purpose of images to users who are visually impaired, on both mobile and desktop.
-
Keyboard Navigation: The site is fully navigable using a keyboard, which is essential for users with motor disabilities who cannot use a mouse. Interactive elements like links, buttons, and forms are easily accessible via keyboard on both platforms.
-
Form Labels: All forms, such as those on the Contact Us page, have associated labels, making it clear to screen reader users what information is required on both mobile and desktop.
-
ARIA Landmarks: Appropriate ARIA (Accessible Rich Internet Applications) landmarks are used to help assistive technologies understand the structure of the page and navigate through sections effectively on both devices.
Areas for Improvement
While the overall accessibility scores are high, there are a few areas where improvements could be made:
-
Interactive Element States: Ensuring that all interactive elements, such as buttons and links, have visible focus states that are easy to identify when using a keyboard, especially on mobile where touch interactions are more common.
-
Language Attributes: Ensuring that the lang attribute is correctly set on all pages to help screen readers determine the correct language of the content on both mobile and desktop.
-
Form Validation: Enhancing client-side form validation with more descriptive error messages that are accessible to screen readers, particularly in mobile environments where screen space is limited.
-
Skip Navigation Links: Adding "skip to content" links to allow keyboard users to bypass repetitive navigation menus and jump directly to the main content, which is especially helpful on mobile where screen size is smaller.
Technologies Used
Language Used:
-
HTML: Used for structuring the content on the web pages. It forms the backbone of the project, ensuring that all elements are correctly placed and accessible.
-
CSS: Used for styling the HTML elements, providing the visual appearance and layout of the web pages. CSS ensures the platform is visually appealing and user-friendly.
-
JavaScript: Adds interactivity and dynamic behavior to the web pages. It enhances the user experience by allowing for real-time updates, form validations, and interactive elements.
-
Python: a primary programming language for the backend of the project. It is used in conjunction with the Django framework to handle server-side logic, data processing, and integration with the database.
Frameworks - Libraries - Programs Used:
-
Django Purpose: A high-level Python web framework that encourages rapid development and clean, pragmatic design. Use Case: Used for building the backend, managing databases, handling user authentication, and rendering templates.
-
Bootstrap Purpose: A popular front-end framework for developing responsive, mobile-first websites. Use Case: Used for styling the website, creating responsive layouts, and ensuring a consistent design across devices.
-
Cloudinary API Purpose: A cloud-based image and video management service. Use Case: Used for handling image uploads, storage, and optimization, ensuring fast and reliable content delivery.
-
Pillow Purpose: A Python Imaging Library that adds image processing capabilities to your Python interpreter. Use Case: Used to manage and process image uploads, including resizing and format conversions.
-
JavaScript Purpose: A programming language that enables dynamic content on web pages. Use Case: Used for front-end interactions such as the search bar functionality, dropdowns, and form validations.
-
GitHub Purpose: A platform for version control and collaborative development. Use Case: Used to host the project repository, manage version control with Git, and collaborate through issues and pull requests.
-
JQuery Purpose: A fast, small, and feature-rich JavaScript library. Use Case: Used to simplify HTML document traversal and manipulation, event handling, and animation.
-
SQLite Purpose: A lightweight, disk-based database that doesn’t require a separate server process. Use Case: Used as the database for storing all application data during development.
-
Chrome DevTools Purpose: A set of web developer tools built directly into the Google Chrome browser. Use Case: Used for debugging JavaScript, analyzing runtime performance, and optimizing website responsiveness.
-
Balsamiq Purpose: A wireframing tool that allows designers to create sketches of their web pages or applications. Use Case: Used for creating wireframes and mockups to plan the layout and design of the website before development.
-
Responsive Design Mode Purpose: A browser tool that allows developers to view their website on different screen sizes and resolutions. Use Case: Used to test and ensure the website is responsive across a range of devices, including mobile phones and tablets.
-
Coolors.co Purpose: An online tool for generating color palettes. Use Case: Used to select and create the color scheme for the website, ensuring a visually appealing design.
-
StartBootstrap.com Purpose: A website offering free and premium Bootstrap themes and templates. Use Case: Used as a resource for finding Bootstrap templates and inspiration for the website’s design.
-
Heroku Purpose: Used to deploy the Django application. Use Case: Heroku is a cloud platform that lets companies build, deliver, monitor, and scale apps.
Future Plans
-
Enhanced User Profiles
- Description: Develop detailed user profiles where photographers can showcase their portfolios and follow others.
- Objective: To create a more personalized and interactive community experience.
-
Advanced Search and Filtering
- Description: Implement advanced search options based on categories and tags to help users find specific content easily.
- Objective: To improve content discoverability and user experience.
-
Mobile App Development
- Description: Create a mobile app for Android and iOS to allow users to access and upload content on the go.
- Objective: To increase accessibility and engagement with a mobile-friendly solution.
-
Social Media Integration
- Description: Add features that allow users to share their photos directly to social media platforms like Instagram and Facebook.
- Objective: To broaden the reach of shared content and attract more users.
-
Photography Challenges
- Description: Organize photography challenges to engage the community and showcase talent.
- Objective: To increase user participation and foster a vibrant community atmosphere.
-
FAQ Page
- Description: Develop a comprehensive FAQ page to address common user queries and provide guidance on using the site.
- Objective: To enhance user support and reduce the need for direct inquiries by offering readily accessible information.
Bugs
During the development and testing phases of this project, several bugs were identified and subsequently fixed. Below is a summary of the bugs encountered, along with the steps taken to resolve them.
Known Issues
Search Functionality
- Currently, the search feature on the website is not functioning as expected. Users may encounter issues when attempting to search for photos by title or description. This is a known bug that will be addressed in a future update.
Bug List and Fixes
-
Bug: Navigation Menu Not Collapsing on Mobile
- Description: On mobile devices, the navigation menu was not collapsing correctly after a menu item was selected, leaving the menu open and obstructing content.
- Cause: The JavaScript responsible for toggling the navigation menu was not correctly targeting the collapse element.
- Fix: Updated the JavaScript to properly target the collapse element and added an event listener to close the menu after a link is clicked.
- Status: Fixed
-
Bug: Image Upload Fails on Certain File Types
- Description: Users reported that the image upload feature would fail when attempting to upload certain file types, such as .gif and .bmp.
- Cause: The server-side validation was too restrictive, only allowing .jpg and .png files.
- Fix: Updated the validation rules to include additional image file types and added appropriate error handling to inform the user if an unsupported file type is uploaded.
- Status: Fixed
-
Bug: Form Validation Errors Not Displaying
- Description: When users submitted forms with invalid data, the form would refresh but not display any validation error messages, leaving users unaware of what needed to be corrected.
- Cause: The form template was not properly rendering the validation error messages passed from the backend.
- Fix: Updated the form templates to correctly display validation errors by including error messages next to each form field.
- Status: Fixed
-
Bug: 500 Internal Server Error on Photo Detail Page
- Description: Users occasionally encountered a 500 Internal Server Error when attempting to view the Photo Detail page.
- Cause: The issue was caused by a null reference in the database when trying to fetch details for a photo that had been deleted or did not exist.
- Fix: Implemented additional checks to ensure that the photo exists before attempting to load the detail page, and provided a user-friendly error message if the photo is not found.
- Status: Fixed
-
Bug: Slow Load Times on Blog Page
- Description: The Blog page was experiencing slow load times, especially when there were many posts with large images.
- Cause: Images were not being optimized for web display, leading to unnecessarily large file sizes.
- Fix: Integrated image compression on upload and added lazy loading for images to improve page load times.
- Status: Fixed
Heroku Deployment
This project uses Heroku, a platform as a service (PaaS) that enables developers to build, run, and operate applications entirely in the cloud.
Deployment steps are as follows, after account setup:
- Select New in the top-right corner of your Heroku Dashboard, and select Create new app from the dropdown menu.
- Your app name must be unique, and then choose a region closest to you (EU or USA), and finally, select Create App.
- From the new app Settings, click Reveal Config Vars, and set the value of KEY to
PORT, and the value to8000then select add. - Further down, to support dependencies, select Add Buildpack.
- The order of the buildpacks is important, select
Pythonfirst, thenNode.jssecond. (if they are not in this order, you can drag them to rearrange them)
Heroku needs three additional files in order to deploy properly.
- requirements.txt
- Procfile
You can install this project's requirements (where applicable) using:
pip3 install requirements.txt
If you have your own packages that have been installed, then the requirements file needs updated using:
pip3 freeze > requirements.txt
The Procfile can be created with the following command:
echo web: node index.js > Procfile
Local Deployment
This project can be cloned or forked in order to make a local copy on your own system.
For either method, you will need to install any applicable packages found within the requirements.txt file.
pip3 install -r requirements.txt.
The database provided by Django db.sqlite3 is only accessible within the workspace environment. In order for Heroku to be able to access the database, a new database suitable for production needs to be created. I am using a postgreSQL database instance hosted on CI Database as this service is free.
Requirements
The requirements.txt file lists all the dependencies needed to run the project. Below is a brief description of each package included in this file:
- asgiref==3.8.1: ASGI (Asynchronous Server Gateway Interface) reference implementation, used by Django for handling asynchronous requests.
- cloudinary==1.40.0: A Python client library for integrating with Cloudinary, a cloud service that offers image and video management.
- dj-database-url==2.2.0: A utility for configuring Django databases via environment variables, commonly used for configuring databases in production environments like Heroku.
- dj3-cloudinary-storage==0.0.6: A Django storage backend for integrating with Cloudinary, allowing Django to directly store media files in Cloudinary.
- Django==5.0.6: The main web framework used for building this project. Django is a high-level Python web framework that encourages rapid development and clean, pragmatic design.
- django-allauth==0.63.3: A Django package that provides a comprehensive authentication system, including registration, social account authentication, and email confirmation.
- django-summernote==0.8.20.0: A Django application that integrates the Summernote WYSIWYG editor, making it easy to add rich text editing capabilities to Django forms and models.
- gunicorn==22.0.0: A Python WSGI HTTP server for UNIX, commonly used to serve Django applications in production environments.
- oauthlib==3.2.2: A generic and reusable OAuth request-signing logic library, used for handling OAuth 1 and OAuth 2 authentication flows.
- pillow==10.3.0: A Python Imaging Library (PIL) fork that provides image processing capabilities, used in Django for handling image uploads and manipulation.
- psycopg2==2.9.9: A PostgreSQL database adapter for Python, required for interacting with a PostgreSQL database from Django.
- PyJWT==2.8.0: A Python library for generating and verifying JSON Web Tokens (JWTs), used for handling authentication and secure communications.
- requests-oauthlib==2.0.0: An OAuthlib integration with the popular requests library, providing OAuth authentication support in HTTP requests.
- sqlparse==0.5.0: A non-validating SQL parser used by Django's ORM to work with SQL queries. It helps in formatting and analyzing SQL code.
- whitenoise==6.7.0: A middleware for serving static files directly from your web application, especially useful in production environments to improve performance by serving static files efficiently.
Cloudinary
Specifically, when you set DEFAULT_FILE_STORAGE to use Cloudinary, all media files, including static files, might be uploaded to Cloudinary during the collectstatic process. This can cause unexpected behavior, especially if you intended to keep static files locally.
-
To avoid issues: Temporarily Remove Cloudinary Storage: Before running python3 manage.py collectstatic, temporarily remove or comment out the DEFAULT_FILE_STORAGE setting.
-
Run Collectstatic: Execute the collectstatic command to gather all static files locally.
-
Re-enable Cloudinary: After collecting static files, re-enable the DEFAULT_FILE_STORAGE to Cloudinary if needed.
In the current configuration, I've added 'SECURE': True to the CLOUDINARY_STORAGE settings to ensure all media files are loaded over HTTPS, which enhances security.
Credits
-
Images:
-
Documentation and Tutorials:
-
Django Allauth For seamless authentication integration.
-
Django documentation Essential for understanding Django’s robust framework.
-
Django Search Box For implementing search functionality.
-
Bootstrap: Crucial for creating responsive, mobile-first designs.
-
Daisy's walkthrough A fantastic resource that helped guide the development process.
-
Build a Photographer Personal Portfolio with Django 2020 Inspired the structure and features of this project.
-
Tools:
-
Pillow For handling image processing.
-
Cloudinary For managing media assets efficiently.
-
Pexels For providing high-quality stock images.
-
perplexity Assisted in generating ideas and refining content.
-
Grammerly Ensured the project's documentation was clear and professional.
-
Gitpod: The online IDE that facilitated the development of this project.
-
Code Institute: Provided foundational knowledge and the environment to apply it.
-
Stack Overflow: An invaluable resource for solving coding challenges.
-
W3Schools: Quick and reliable reference for HTML, CSS, and JavaScript.
-
Hackathon:
-
Hackathon: Participating in this event sharpened my coding skills and provided an opportunity to work in a team environment, ultimately earning 3rd place (Bronze).
Acknowledgements
-
I would like to express my sincere gratitude to the Hackathon team for the incredible learning experience. The challenges and teamwork during the event significantly enhanced my skills in Django, and I'm proud to have achieved 3rd place (Bronze).
-
Special thanks to Paul Thomas O'Riordan, Kristyna, my Cohort Facilitator, Rory Patrick Sheridan, my Code Institute Mentor, and Tim Nelson, my second Mentor, for their guidance and support throughout this journey. Your encouragement has been invaluable to my growth as a developer.