SophieMcGee / donegalexplorers

0 stars 1 forks source link

Donegal Explorers - Project Portfolio 4

This document provides an overview of the Donegal Explorers website I have developed using Django, HTML, CSS, and JavaScript. The purpose of this project is to offer a digital platform where users can browse, add, and manage events happening in Donegal. This website allows event organisers to promote their events while giving local residents an easy way to discover upcoming activities, plan their schedules, and engage with the community. With user authentication, event submission, and notifications, Donegal Explorers aims to build an interactive space to connect people with local events.

The live site can be viewed here - Donegal Explorers

Donegal Explorers responsive design

Contents

The Donegal Explorers website is designed to provide users with a comprehensive platform for discovering, organising, and managing events in Donegal. The primary goal is to create a user-friendly space where event organisers can submit and promote their events, and site visitors or registered users can browse, save, and rate events. This project also emphasises building community engagement through features like event calendars, user feedback via ratings and comments, and personalised notifications.

Key objectives include:

Back to top

Agile Methodology

Agile Methodology

Throughout the development of the Donegal Explorers website, Agile methodology was followed to ensure that the project was delivered efficiently, with flexibility and adaptability to evolving requirements. The Agile process facilitated regular reflection, continuous improvement, and incremental delivery of valuable features. This iterative approach was particularly beneficial for managing scope and ensuring high-quality outcomes aligned with user needs.

Key Agile Practices Utilised:

  1. Sprint Planning and Milestones

    • The project was broken down into multiple milestones, representing key features or sections of the website (e.g., User Authentication, Enhanced Event Interactions, etc.).
    • Each milestone was treated as a sprint, with a clear focus on what functionality would be completed and tested before moving to the next.
    • I set deadlines for each milestone but remained flexible, revisiting and adjusting priorities as needed to ensure the highest priority features were delivered first.
  2. User Stories

    • User stories were the foundation of each milestone. They were written from the perspective of different types of users (e.g., event organisers, site visitors) to capture the desired functionality.
    • Each user story was assigned a priority (e.g., Must Have, Should Have, Could Have) to guide development focus.
    • The GitHub project board helped track user stories, categorise them into specific sprints, and ensure they were addressed iteratively.
    • User stories helped ensure that features were aligned with user goals and needs, ensuring a user-centric design process.
  3. GitHub Project Board

    • A GitHub Projects board was created and used to manage tasks, user stories, and feature development.
    • The board was organised into columns such as Backlog and In Progress, allowing for easy tracking of the progress of each task.
    • This board provided full visibility into the progress of each feature and task, ensuring that the project remained on track and any blockers were identified early.
    • For example, when the "Event Submission" user story was completed, it was moved to Done.

    GitHub Project Board - Donegal Explorers

  4. Regular Retrospectives

    • Retrospectives were conducted at the end of each sprint/milestone to reflect on what went well, what could be improved, and any issues encountered.
    • This iterative feedback process allowed me to refine the development process, address technical debt, and ensure any lessons learned were incorporated into future sprints.
    • Retrospectives were critical in improving feature delivery times, identifying potential challenges early, and enhancing code quality over time.
  5. Continuous Integration and Testing

    • I applied continuous integration principles by running tests after the completion of each milestone.
    • Each feature was tested in isolation and integrated into the overall project only when it met the acceptance criteria defined by its user story.
    • Any issues identified during testing were tracked in GitHub issues and addressed before moving forward, ensuring the integrity of the codebase throughout development.
  6. Prioritisation Using MoSCoW

    • The MoSCoW method (Must Have, Should Have, Could Have, Won’t Have) was applied to prioritise features and user stories, ensuring that the most critical aspects were addressed first.
    • For example, user authentication (Must Have) was implemented before features like comment moderation (Could Have).
    • This approach helped maintain focus on delivering the core functionalities needed for the website to function, while leaving less critical features for later development.

Example Milestones and User Stories

The project was divided into several major milestones, each covering specific functionalities of the website. Each milestone was made up of detailed user stories that were tracked, tested, and completed throughout the project. These are available to view in the section below.

User Experience (UX)

Client Background and Goals

The Donegal Explorers platform is designed to provide a comprehensive and intuitive space for discovering and managing events in Donegal. As both the developer and a local resident, I recognised the need for a platform that would simplify event management while encouraging community engagement. The goals for this website include:

Back to top

Target Audience

Following market research into other event websites and the types of events in the area, the platform is designed to meet the needs of the following target audiences:

Back to top

User Stories

User Stories Summary

Below is a table that summarises the milestones/epics which were maintained within Github Projects. Each milestone represents an area of focus in the development process and includes user stories that were worked on to achieve specific goals.

Milestone Summary
Frontend Design Covers the frontend design and features, including favicon, layout consistency, and site info.
User Account and Authentication Handles user registration, login/logout, email verification, password reset, and email resends.
Enhanced Event Interactions Focuses on user interactions with events, including rating events and viewing event details.
User Feedback and Notifications Covers user feedback mechanisms such as notifications for event interactions and confirmations.
Initial Event Management Setup Handles core event management tasks, including adding, editing, and deleting events.
Site Navigation and Information Improves user experience by providing clear and accessible navigation and event information.
Event Calendar and Saved Events Allows users to save events to a calendar and manage their event attendance.
Administrator Tools Focuses on providing admin functionalities such as moderating user comments on events.
Testing and Documentation Covers automated testing for key features and documentation for developers and users.

Back to top

The section below provides a comprehensive overview of each user story in the project, organised by milestones, along with the status of each user story.

Detailed User Stories

User Story: View the site favicon * **Issue**: As a user, I can see a favicon in the browser tab so that I can easily identify the site when multiple tabs are open. - The favicon is visible in the browser tab. - The favicon matches the site branding. - The favicon appears correctly across different browsers and devices. * **Label**: Could Have * **Milestone**: Frontend Design

User Story: Customise site layout * **Issue**: As a user, I can experience a consistent layout and design across all pages so that the site feels cohesive and easy to navigate. - The layout is responsive across all screen sizes. - Consistent design elements (e.g., header, footer) are visible on all pages. - The colour scheme is applied site-wide for uniformity. * **Label**: Should Have * **Milestone**: Frontend Design

User Story: Clear Organisation Information * **Issue**: As a site visitor, I can quickly view information about Donegal Explorers so that I can understand if the site meets my needs. - An 'About' section is visible on the homepage with key site information. - A clear call to action (e.g., sign up or log in) is displayed. - The homepage provides easy access to other important sections (e.g., events). * **Label**: Could Have * **Milestone**: Frontend Design

### **User Account and Authentication**
User Story: Resend verification email * **Issue**: As a new user, I can request to resend the verification email so that I can activate my account if I didn’t receive the first email. - A "Resend Verification Email" option is available on the registration confirmation page. - Users receive a new verification email if the first one wasn’t received. - Users can only request resending the email once every few minutes to prevent spam. * **Label**: Should Have * **Milestone**: User Account and Authentication

User Story: Reset password * **Issue**: As a user, I can reset my password so that I can regain access to my account if I forget my login information. - A "Forgot Password" link is visible on the login page. - Users receive a password reset email with a secure link. - Users can successfully reset their password and log in. * **Label**: Must Have * **Milestone**: User Account and Authentication

User Story: Login and Logout * **Issue**: As a site user, I can log in and log out of my personal account so that I can manage my events securely. - A login form requires valid credentials (email and password). - Users receive a notification when successfully logged in or logged out. - Incorrect login attempts display an error message. * **Label**: Must Have * **Milestone**: User Account and Authentication

User Story: User Registration * **Issue**: As a first-time visitor, I can create an account on the Donegal Explorers app so that I can add, edit and delete my own event listings. - The registration page requires a valid email address, username and password. - Users are redirected to a success message after registering. - Email verification is required to activate the account. * **Label**: Must Have * **Milestone**: User Account and Authentication

### **Enhanced Event Interactions**
User Story: Rate events * **Issue**: As a user, I can rate events so that I can share my feedback with other users. - Users can rate events from 1 to 5 stars. - The average rating is displayed on the event detail page. - Users can only rate an event once. * **Label**: Should Have * **Milestone**: Enhanced Event Interactions

User Story: View an Event * **Issue**: As a site user, I can view detailed information about an event so that I can decide if I want to attend. - The event detail page shows the event name, location, description, and an image. - The event page includes a comment section for user feedback. - The page URL is generated using the event's slug. * **Label**: Should Have * **Milestone**: Enhanced Event Interactions

User Story: Filter events by rating * **Issue**: As a user, I can filter events by rating so that I can easily find high-quality events. - A filter option allows users to sort events by average rating. - The event list updates dynamically based on the selected rating filter. - The filter can be combined with other sorting options (e.g., date, location). * **Label**: Could Have * **Milestone**: Enhanced Event Interactions

### **User Feedback and Notifications**
User Story: Get confirmation notifications * **Issue**: As a user, I can receive confirmation notifications after submitting, editing, or deleting an event so that I know my actions were successful. - A confirmation message appears after submission, editing, or deletion. - The message provides feedback on the action taken (e.g., "Event successfully edited"). - Success messages disappear after a few seconds or when dismissed by the user. * **Label**: Should Have * **Milestone**: User Feedback and Notifications

User Story: Receive event interaction notifications * **Issue**: As a user, I can receive notifications when someone comments on my event so that I can engage with feedback and respond. - Users receive a notification when comments are added to their events. - Notifications can be viewed in the user’s account or via email. - Notifications are customizable (e.g., opt-in or out). * **Label**: Should Have * **Milestone**: User Feedback and Notifications

### **Initial Event Management Setup**
User Story: Event Deletion * **Issue**: As an event organiser, I can delete an event I have added so that I can remove events that are no longer relevant. - Users are asked to confirm before deleting an event. - A success message appears after the event is deleted. - Only the event owner can delete the event. * **Label**: Must Have * **Milestone**: Initial Event Management Setup

User Story: Event Editing * **Issue**: As an event organizer, I can edit an event I have submitted so that I can update the information as needed. - The event editing form allows users to modify event details (name, date, location, description). - Users receive a success notification when edits are saved. - Only the event owner or an admin can edit the event. * **Label**: Must Have * **Milestone**: Initial Event Management Setup

User Story: Event Submission * **Issue**: As an event organiser, I can submit a new event so that it can reach more families and increase attendance. - The event submission form requires event name, date, location, and description. - Users receive a notification when an event is successfully submitted. - Submitted events are saved to the database and displayed in the event listings. * **Label**: Must Have * **Milestone**: Initial Event Management Setup

### **Site Navigation and Information**
User Story: View Event Calendar * **Issue**: As a registered user, I can view my saved events in a calendar so that I can keep track of the events I plan to attend. - The calendar displays saved events for the selected month. - Clicking on an event in the calendar shows more details about the event. - Users can navigate through months to view past and future events. * **Label**: Must Have * **Milestone**: Site Navigation and Information

User Story: Simple Site Navigation * **Issue**: As a site user I can navigate easily around the app so that I can quickly find relevant content. - A clear navigation bar should be visible on all pages to provide access to every section. - The navbar should be responsive to all screen sizes, with a burger menu for small mobile devices. * **Label**: Must Have * **Milestone**: Site Navigation and Information

### **Event Calendar and Saved Events**
User Story: Add an Event to Calendar * **Issue**: As a registered user, I can add an event to my calendar so that I can keep track of events I plan to attend. - A link to "Add to Calendar" appears on the event details page. - Users are notified when an event is successfully added to their calendar. - The calendar reflects all added events and allows users to view details. * **Label**: Must Have * **Milestone**: Event Calendar and Saved Events

User Story: View Saved Events * **Issue**: As a registered user, I can view the events I have saved so that I can manage them easily. - A "My Events" page displays the events saved by the user. - The page shows basic event info with options to view more details. - Users can edit or delete saved events. * **Label**: Must Have * **Milestone**: Event Calendar and Saved Events

### **Inital Event Management Setup**
User Story: Event Deletion * **Issue**: As an event organiser, I can delete an event I have added so that I can remove events that are no longer relevant. - Users are asked to confirm before deleting an event. - A success message appears after the event is deleted. - Only the event owner can delete the event. * **Label**: Must Have * **Milestone**: Inital Event Management Setup

User Story: Event Editing * **Issue**: As an event organiser, I can edit an event I have submitted so that I can update the information as needed. - The event editing form allows users to modify event details (name, date, location, description). - Users receive a success notification when edits are saved. - Only the event owner or an admin can edit the event. * **Label**: Must Have * **Milestone**: Inital Event Management Setup

User Story: Event Submission * **Issue**: As an event organiser, I can submit a new event so that it can reach more families and increase attendance. - The event submission form requires event name, date, location, and description. - Users receive a notification when an event is successfully submitted. - Submitted events are saved to the database and displayed in the event listings. * **Label**: Must Have * **Milestone**: Inital Event Management Setup

### **Administrator Tools**
User Story: Moderate event comments * **Issue**: As a site administrator, I can moderate user comments on events so that inappropriate content can be removed. - Admins can delete or hide inappropriate comments. - Admin actions are logged for transparency. - Admins can filter comments by reported status for easier moderation. * **Label**: Could Have * **Milestone**: Administrator Tools

### **Testing and Documentation**
User Story: Run Automated Tests * **Issue**: As a developer, I can run automated tests for key features so that I ensure the site works as expected. - Automated tests are created for user registration, event submission, and browsing. - The test suite can be run easily and provides pass/fail feedback. - Tests cover edge cases (e.g., invalid data submission). * **Label**: Must Have * **Milestone**: Testing and Documentation

User Story: Document Site Features * **Issue**: As a developer, I can document all site features so that users and other developers can understand how to use and contribute to the project. - A clear, comprehensive documentation file (e.g., README) is available. - The documentation includes instructions for setting up the project locally. - Documentation includes details on all key features and how to use them. * **Label**: Must Have * **Milestone**: Testing and Documentation

There are some areas which remain open within Github Projects, as they are reserved for future development to further enhance the site's functionality. The Enhanced Event Interactions milestone still has room for growth, particularly with features like filtering events by rating. This will enable users to quickly identify high-rated events, offering a more tailored event discovery experience. The Administrator Tools milestone also has open tasks related to comment moderation. This will provide site administrators with more control over user-generated content, ensuring the platform maintains a positive and safe environment for all users. These open tasks highlight the project's ongoing commitment to scalability, user engagement, and security. They represent important steps in the site's long-term roadmap. [Back to top](<#contents>) ## Market Research The development of Donegal Explorers was guided by in-depth market research to ensure the platform would effectively meet the needs of its users. This research focused on understanding user expectations, analysing competitors in the event management and community-driven platforms space, and identifying design trends that would make the site both functional and user-friendly. The insights gathered helped shape the platform’s features, layout, and user interactions. ### Competitor Analysis A comprehensive analysis of competitors in the event management and community websites space was conducted to better understand market trends, user preferences, and areas for improvement. Competitor websites provided valuable insights into how events are listed, how users interact with the platform, and the best practices for a user-friendly experience. These competitors included platforms that catered to both large-scale and local events. The following websites were analyzed: - **[Eventbrite](https://www.eventbrite.com/)**: Focuses on global events and offers advanced event management tools, user registration, and ticketing options. - **[Meetup](https://www.meetup.com/)**: Known for creating local communities and organizing smaller-scale events, with a strong focus on user engagement and feedback. - **[Ticketmaster](https://www.ticketmaster.com/)**: Specialises in larger events with integrated ticket purchasing, and focuses on providing a seamless experience for event discovery and bookings. - **[Facebook Events](https://www.facebook.com/events/)**: A social-driven platform for organising and discovering local and global events with built-in user engagement through comments and sharing. #### Design Implications Based on the competitor analysis, several key design considerations emerged that influenced the final structure and features of Donegal Explorers: - **Clear Event Listings**: - Events are clearly listed with relevant information (name, date, location) for easy browsing. - Users can click through to view more detailed event descriptions. - **User Feedback and Interaction**: - An option for users to rate events was included to help others identify popular or well-rated events. - Commenting systems were added to encourage user interaction and feedback on events. - **Simple and Intuitive Navigation**: - Easy-to-use navigation was implemented, allowing users to quickly find upcoming events or return to saved events. - A responsive design ensures the site works smoothly on all screen sizes, improving the mobile experience. - **Calls-to-Action (CTAs)**: - Clear and prominent CTAs were included throughout the platform to guide users toward creating or saving events, as well as engaging with event content. - **Consistent Branding**: - The design features a cohesive colour scheme and layout across all pages to give the platform a professional and polished appearance. - **Mobile Accessibility**: - Ensured that all design elements, including buttons and event listings, are fully responsive for mobile users, given the increasing use of mobile devices to discover and plan events. [Back to top](<#contents>) # Design ## Planning and Development The planning and development of the Donegal Explorers website followed a user-centric approach, ensuring that the platform is intuitive, responsive, and accessible. The design process followed the five planes of UX—Strategy, Scope, Structure, Skeleton, and Surface. This method helped create a visually appealing and functional website that caters to the needs of its users, allowing them to easily browse, interact, and manage events. ### Strategy The strategy phase focused on understanding the needs of the users and defining the goals of the platform. Donegal Explorers aims to offer a seamless experience for locals and visitors to discover events in Donegal. The website is designed to simplify event management for both organisers and attendees by offering clear navigation, user feedback features, and event submission tools. The overall goal of the platform is to create a space where event organizers can effectively promote their events, and where users can discover and interact with those events with ease. The user research and target audience analysis heavily informed the design strategy, ensuring the platform meets the specific needs of local residents, visitors, and event organizers. ### Scope With the strategy in place, the scope was determined to identify the key features needed for an optimal user experience. The website includes essential functionality like event browsing, event submission, user authentication, and interaction features such as comments and event ratings. Additionally, the scope covered mobile responsiveness, ensuring the platform works seamlessly across all devices. The scope includes the following pages and functionalities: - **Homepage**: Provides quick access to event listings and key information. - **Event Detail Page**: Allows users to view detailed information about individual events. - **User Pages**: Enables users to manage their saved events and view notifications. - **Event Submission**: Allows event organisers to submit new events with ease. ### Structure The structure plane focused on organising the content to create a logical flow for users. A clear information architecture was implemented, ensuring that users can easily navigate through the website. The homepage prioritises key event information and provides access to event listings, while the event detail pages include critical information about each event. The structure is designed to guide users through the platform, making it easy to find events, submit events, and manage personal accounts. The key structural elements include: - A **navigation bar** that allows users to quickly switch between sections (events, calendar, and account management). - **Event filtering options** to help users browse events by category, date, or rating. - **Call-to-action buttons** throughout the site to encourage user engagement, such as adding events to a calendar or submitting a new event. ### Skeleton In the skeleton phase, wireframes were developed to outline the layout and structure of key pages. Wireframes focused on the placement of navigation elements, event listings, and user interaction features to ensure a smooth user experience. Key design considerations during the skeleton phase included: - **Responsive layout**: The wireframes were built to ensure the design adapts seamlessly across various screen sizes, from desktop to mobile. - **Content hierarchy**: Events, user actions, and navigation options are displayed prominently, reducing the need for excessive scrolling or searching. Below are the wireframes created for the platform: ![wireframe](docs/readme_images/wireframe.png) This wireframe is available to view in Figma via THIS LINK. ### Surface The surface plane focused on the visual design of the website. This phase emphasised creating a cohesive and visually appealing interface, with consistent branding across all pages. The chosen colour scheme and typography were designed to make the site feel welcoming and easy to use, while maintaining a professional look. Key visual design elements include: - **Colour scheme**: A calming, nature-inspired palette that reflects the Donegal landscape. - **Typography**: Clean, modern fonts were chosen to enhance readability and professionalism. - **Imagery**: Event images and Donegal-themed photography were incorporated to create an inviting atmosphere and highlight the local community aspect of the platform. [Back to top](<#contents>) ## Colour Scheme and Typography ### Typography The typography for Donegal Explorers was chosen to ensure readability and a modern, approachable look. The primary fonts selected are **Montserrat** and **Open Sans**, both of which are clean, sans-serif fonts. These fonts convey professionalism and are legible across different devices and screen sizes. - **Montserrat** is used for headings, with its bold weights ensuring a striking and modern appearance, making it perfect for capturing attention in key sections like the navigation bar and buttons. - **Open Sans** is used for body text, offering a clean and consistent reading experience, ideal for long-form content and general readability. Fallback fonts include **sans-serif** to ensure consistency even if the custom fonts fail to load. ### Colour Scheme The colour scheme used in Donegal Explorers reflects a balance between earth tones and subtle accents, creating a welcoming and engaging atmosphere that resonates with the natural beauty of Donegal. The primary colours include warm neutrals and soft accents to maintain a friendly and inviting aesthetic while ensuring accessibility. ![website colour scheme](docs/readme_images/website-colour-scheme.png) 1. **#FDF4EF (Cream)**: - This light and neutral tone serves as the **background colour** for most sections, ensuring readability and reducing eye strain. 2. **#333333 (Dark Grey)**: - Used for **text** and **headings**, this dark grey provides a strong contrast against the lighter background for clear readability without the harshness of pure black. 3. **#B2BFA8 (Olive Green)**: - Featured in the **navigation bar** and some interactive elements, this earthy green gives the design a grounded and natural feel, adding to the site's aesthetic. 4. **#CEA64A (Golden)**: - This warm golden tone is used for **call-to-action buttons** and **hover effects**. It adds vibrancy to the design while drawing users' attention to important elements like buttons and interactive areas. 5. **#FF6B6B (Coral Red)**: - This bright coral red is used sparingly for **delete buttons** and **error alerts**, making sure these actions stand out clearly to users and ensuring critical actions are easy to recognize. These colours work together to create a harmonious and engaging visual experience for users while maintaining a clean and professional look. [Back to top](<#contents>) ### Logo and Branding The Donegal Explorers logo reflects the local, community-driven nature of the platform. The logo uses a combination of natural colours and a clean design to evoke a sense of trust and reliability. ![Donegal Explorers Logo](docs/readme_images/donegal-explorers.png) [Back to top](<#contents>) # Data Model The data model for this project has been designed with scalability and clarity in mind. It consists of several related models that interact with each other to ensure smooth functionality for event management, user interaction, notifications, and more. Below is the database schema that visualises the relationships between the key models: ![Database Schema](docs/readme_images/database-schema.png) ## UserProfile - **Fields**: - `user`: A `OneToOneField` linking to Django's built-in `User` model, allowing extended attributes for each user. - `receive_comment_notifications`: A `BooleanField` that determines if the user should receive notifications for new comments on their events. ## User - **Fields**: - `user_id`: Primary key, an auto-incrementing ID. - `username`, `email`, `password`: Basic fields provided by Django’s user model for authentication and account management. ## Event - **Fields**: - `event_id`: Primary key for each event. - `author`: A `ForeignKey` to the `User` model, representing the user who created the event. - `title`, `description`, `location`: Essential fields to describe the event. - `start_date`, `end_date`, `start_time`, `end_time`: Fields managing the schedule of the event. - `image`: An image field using Cloudinary for event images. - `status`: A field that stores the publication status of the event. - **Relationships**: - An event is related to a user via the `author` field. It also connects to other models like `Comment`, `Rating`, and `Calendar` for further user interactions. ## Calendar - **Fields**: - `calendar_id`: Primary key for each calendar entry. - `user`: A `ForeignKey` linking the calendar to a specific user. - `event`: A `ForeignKey` linking the saved event to the calendar. - `date`: The date the event is saved. - `saved_on`: The timestamp when the event was added to the user's calendar. ## Comment - **Fields**: - `comment_id`: Primary key for each comment. - `event`: A `ForeignKey` linking the comment to the relevant event. - `user`: A `ForeignKey` linking the comment to the user who posted it. - `content`: The text content of the comment. - `created_on`: Timestamp of when the comment was created. - `approved`: A boolean flag to moderate comments before they are visible. ## Rating - **Fields**: - `rating_id`: Primary key for each rating. - `user`: A `ForeignKey` linking the rating to the user. - `event`: A `ForeignKey` linking the rating to the event being rated. - `rating`: An integer field representing the rating given by the user to the event. ## Notification - **Fields**: - `user`: A `ForeignKey` linking the notification to a specific user. - `message`: The content of the notification. - `is_read`: A boolean flag to mark if the notification has been read by the user. - `created_at`: A timestamp indicating when the notification was created. The model structure enables users to interact with events efficiently, allowing for event creation, commenting, saving events to their calendar, and rating events. Notifications ensure users are updated with relevant actions on their events or interactions with other users. The relationships between models also allow for seamless data queries, ensuring efficient access to the right information based on user activity. ## General Features ### Frameworks and Tools The website uses Django to manage the core functionalities of the site such as user authentication, event management, and database handling. Using Django’s built-in tools like the admin interface and Django ORM helped to streamline development and make data handling more efficient. The frontend uses HTML, Javascript and Bootstrap for layout and design, with additional custom CSS to tailor the visual appearance of elements. The combination of Bootstrap and custom CSS ensures a responsive and user-friendly design that adapts across various devices, meeting the needs of both mobile and desktop users. For media management, Cloudinary is used to handle user-uploaded images, ensuring efficient storage and delivery of images while maintaining high performance. ![Main Django View](docs/readme_images/django-home-page.png) ### Responsive Design The website is fully responsive, using Bootstrap’s grid system and media queries to ensure a smooth user experience across devices. A mobile-first design approach was followed to prioritise accessibility on smaller screens. #### Key Breakpoints - **Small Devices (Max-width: 768px)**: On small devices like smartphones, content is stacked vertically. The navigation bar collapses into a hamburger menu, ensuring easy access to all links without crowding the screen. - **Medium Devices (Max-width: 992px)**: Layouts expand slightly, with more space between form fields, cards, and navigation elements. This ensures a clean presentation on tablets. - **Large Devices (Min-width: 992px)**: On larger screens, like desktops, the layout makes full use of the available space. Elements are spread out for a comfortable reading experience, and form inputs are larger for better usability. ### Navigation - **Dynamic Navbar**: The site features a consistent navigation bar that adapts to different screen sizes. For mobile users, the navbar collapses into a dropdown menu. The navbar changes based on the user’s authentication status. Unauthenticated users see links to "Sign Up" and "Login," while authenticated users have access to personalised options relating to their account. - **Dropdown Menus**: The "Events" link includes a dropdown that contains options like "Browse Events" and "Add Event." This allows users to quickly navigate between different sections without needing to return to the home page.navigation. ![Logged in user](docs/readme_images/logged-in-user.png) This dynamic content helps improve navigation by ensuring users only see relevant options based on their logged-in state. User stories like "As a user, I want easy access to event management tools" directly informed the development of this feature. ### Logo and Responsive Resizing in Navbar The logo for **Donegal Explorers** is featured prominently in the navigation bar across all pages of the site, serving as a central branding element. It provides users with an immediate visual association to the platform. The logo is designed to resize responsively based on the screen size, ensuring that it remains clear and proportionate on all devices. - **On larger screens** (e.g., desktops), the logo is displayed at a more prominent size, reinforcing the brand presence. Its dimensions are set to ensure it doesn't overshadow the navigation links but maintains a strong visual presence. - **On smaller screens** (e.g., tablets and mobile devices), the logo adjusts to a smaller size to make optimal use of the limited screen space. This resizing ensures the navigation bar remains uncluttered and that users can still easily navigate through the site without obstruction. The resizing of the logo is handled using both CSS and Bootstrap's responsive classes to maintain consistency across breakpoints. ### Favicon A custom favicon is used on all pages of the website to enhance brand identity and improve user experience. This small yet significant detail ensures that users can easily identify the Donegal Explorers site even when they have multiple browser tabs open. The favicon visually represents the platform and contributes to the professional feel of the site. It is particularly useful when users are switching between tabs, as it provides quick visual feedback about the Donegal Explorers website, even when minimised to a small icon. The favicon is consistent with the logo and brand color scheme, maintaining uniformity across various visual elements of the site. ### Footer The footer is present on all pages and contains links to the site’s social media platforms, encouraging users to connect with Donegal Explorers on social platforms. The footer also ensures consistency across all pages by maintaining uniform branding and providing quick access to external resources. ![Footer](docs/readme_images/footer.png) ### Social Media Integration Social media icons are prominently featured in the footer, allowing users to easily connect with Donegal Explorers on various platforms. These icons link to the respective social media pages, opening in a new browser tab to ensure users remain engaged with the site while exploring the external content. - **Font Awesome Icons**: The icons are derived from the Font Awesome library and are styled to match the site's branding. Their colors change on hover, providing a subtle yet effective interaction for users and drawing attention to these external resources. - **Responsiveness**: The social media links are fully responsive, adapting their size and placement based on the device. This integration not only enhances the site's interactivity but also encourages users to become part of a wider community of explorers, connecting through platforms like Facebook, Instagram, and Twitter. These links play a key role in building the social presence of Donegal Explorers, fostering engagement beyond the website. ### Accessibility Ensuring accessibility was a key goal throughout development. The project adheres to WCAG standards to make the platform usable by a wide range of users, including those with disabilities. Key features include: - **Semantic HTML**: Elements such as `
`, `