Research
Related Projects Review
Community-driven feedback platforms have proven essential for allowing for collaboration between local residents, businesses, and governments. These platforms enable users to report issues, make suggestions, and keep updated with events and initiatives in their community. In our research into various existing platforms, we identified best practices and design considerations for our Community Impacts Portal, conducting an in-depth review of existing solutions that address similar challenges. These solutions include Nextdoor, FixMyStreet, and Reddit, each offering unique insights into community engagement and issue management.
Nextdoor
Nextdoor is a neighbourhood-based social networking service designed to facilitate communication and information sharing amongst residents within specific geographic areas. It allows users to report local issues, share recommendations for services, and organise community events, fostering a sense of local community [1].
| Main Features | Description |
|---|---|
| Localised Feeds | Tailored to specific neighbourhoods, ensuring users receive relevant information to their immediate surroundings. This feature enhances the platform's utility for addressing local concerns. |
| Incident Reporting | Users can report local incidents, such as suspicious activity or neighbourhood disruptions, and share information with their neighbours. |
| Community Organisation Tools | Tools for organising community events, discussions, and local initiatives, promoting active participation and collaboration. |
| Lessons Learned | Insights |
|---|---|
| Relevance of Localisation | The importance of delivering highly localised content feeds for maintaining relevance and context. We incorporated location-based filtering, to display local reports, articles and events, making it more personal and relevant to a user, similar to Nextdoor. This approach enhances user engagement by providing immediately relevant information. |
| Fostering Community Engagement | The emphasis on making it easy to share information and organise community activities. We recognised the need to provide intuitive tools that encourage active participation and interaction among users. |
FixMyStreet
FixMyStreet is a platform that enables citizens to report public issues, such as potholes, graffiti, or broken streetlights, to local authorities. It streamlines the reporting process by providing a user-friendly interface for submitting issues and a tracking system for monitoring their resolution [2].
FixMyStreet’s success lays in its simplicity and transparency, offering clear status updates on reported issues. However, these systems were often limited to specific issue types and lacked broader community engagement features or multi-business involvement.
In our project, we expanded on this model by incorporating feedback for businesses and local services through discussions, allowing for a more dynamic and comprehensive approach. Additionally, we integrated AI-driven chatbots to respond to user queries in real time, ensuring immediate support without human intervention.
| Main Features | Description |
|---|---|
| Simple and Intuitive Interface | Designed to minimise time consumption during the issue reporting process, making it easy for citizens to submit reports. |
| Location-Based Issue Reporting | Utilises location data to accurately pinpoint the location of public issues, ensuring reports are directed to the appropriate authorities. |
| Tracking System | Provides a system for tracking the status of submitted reports, keeping citizens informed about the progress of issue resolution. |
| Lessons Learned | Insights |
|---|---|
| Minimising Friction | The significance of designing a simple and intuitive user interface to optimise the use of time. We prioritised user experience to ensure that submitting and tracking issues is straightforward and efficient. |
| Importance of Location Data | The crucial role of location-based reporting in accurately identifying and addressing public issues. This informed our decision to incorporate location-based filtering, relying on user-provided location information. |
Reddit
Reddit is a social news aggregation, web content rating, and discussion website where users can submit content, which is then voted up or down by other users. This system allows the community to influence the visibility of content and promote relevant discussions [3].
| Main Features | Description |
|---|---|
| Upvote/Downvote System | A community-driven content ranking system that allows users to influence the visibility of posts and comments. |
| Categorised Subreddits | Dedicated spaces for focused discussions on specific topics, allowing users to engage with communities that share their interests. |
| Community-Driven Moderation | A system of community moderators who help maintain relevant content and enforce community guidelines. |
| Lessons Learned | Insights |
|---|---|
| Community-Driven Content Ranking | The value of a community-driven content ranking system in highlighting the most significant issues. We implemented a similar upvoting mechanism to ensure that the most important issues are given prominence. |
| Community Moderation | The importance of community moderation in maintaining relevant content and fostering a positive user experience. We have a content management page, where users with authorised access can moderate and edit events, articles, and reports. |
Technology Review
Frontend Framework Comparison
| Feature | React with TailwindCSS | HTML with Bootstrap |
|---|---|---|
| Architecture | Component-based architecture facilitates the creation of dynamic and interactive UIs. | Lacks the modular approach of React, often leading to a more rigid structure. |
| State Management | Uses hooks and the Context API for seamless state management, enhancing modularity and maintainability. | No inherent state management system, requires external libraries for complex state handling. |
| Customisation | TailwindCSS offers utility-first CSS classes, enabling rapid development and customisation, reducing the need for extra custom styling. | Bootstrap offers pre-built components but is less flexible for customisation. Requires more effort to override default styles. |
| Reusability | React allows for the creation of reusable components, which speeds up development time and ensures UI consistency. | HTML and Bootstrap don't offer the same level of component reusability, making code less modular. |
| Maintainability | React with TailwindCSS provides a more flexible and organised codebase, making it easier to maintain, especially in complex applications. | HTML with Bootstrap can become less maintainable in complex applications due to its rigid structure and lack of modularity. |
| Learning Curve | Moderate, requires familiarity with React concepts (hooks, state management) and Tailwind’s utility classes. | Low to moderate, familiar for those already accustomed to HTML and CSS, but may require some learning for customisation and layout adjustments with Bootstrap. |
| Development Speed | React and TailwindCSS together speed up development due to modular components and pre-defined utility classes. | Bootstrap offers ready-to-use components, speeding up initial development but lacks the flexibility for complex applications. |
| Community & Ecosystem | React and TailwindCSS have large, active communities, offering extensive documentation, tutorials, and plugins. | Bootstrap is widely used and has a large community, but lacks the level of customisation and extensibility that React and TailwindCSS provide. |
| Scalability | React’s component-based structure and TailwindCSS’s utility classes provide excellent scalability for large applications. | Bootstrap’s rigid grid system and predefined components may make scaling more challenging, especially in complex applications. |
Reason for Choosing React with TailwindCSS
The combination of React and TailwindCSS ensures a modern, fast, and responsive frontend with efficient state management and rapid development capabilities. React's virtual DOM optimises rendering performance, while TailwindCSS reduces the need for bulky external style sheets. Our team also had experience in using React and TailwindCSS for past projects as shown below, making the decision process of what to choose easier.
Backend Framework Comparison
| Feature | Django with SQLite | Spring Boot |
|---|---|---|
| Framework Type | High-level Python web framework with built-in tools for rapid development, including the Django Rest Framework (DRF) for building RESTful APIs. | Java-based framework for creating stand-alone, production-grade applications, particularly microservices. |
| Data Management | Django’s powerful ORM simplifies data management, and SQLite is lightweight and easy to set up for development purposes. | Requires manual configuration for data management, typically using JPA/Hibernate, which may increase setup time. |
| Security Features | Built-in security mechanisms protect against common vulnerabilities like SQL injection and cross-site scripting (XSS). | Strong security support, but requires additional configuration and third-party libraries for common security features (e.g., CSRF protection, authentication). |
| Configuration | Follows a convention-over-configuration approach, allowing for faster setup and reducing boilerplate code. | Requires more configuration and setup compared to Django’s convention-over-configuration approach. |
| Development Speed | Rapid development due to Django’s high-level abstractions and the DRF for building APIs. | Development speed may be slower due to the need for more configuration and boilerplate code. |
| Suitability for Small Projects | Ideal for rapid development of small to medium-sized projects, especially when quick prototyping and ease of use are priorities. | More suitable for larger, more complex applications or microservices-based architectures, though it can also be used for small projects. |
| Performance | Excellent for handling small to medium loads, but may need to be optimised for larger-scale applications. | High-performance capabilities, especially for enterprise-level applications. Optimised for scalability, particularly in microservices environments. |
Reason for Choosing Django over Spring Boot
Django’s simplicity, security, and robust data handling capabilities made it the ideal choice. Its high-level abstractions reduce boilerplate code and enhance productivity, while the DRF enables building APIs efficiently. Furthermore, Django’s community-driven packages add versatility without compromising code quality.
Summary of Technical Decisions
Our technical decisions were driven by the need to create a scalable, responsive, and secure platform that effectively addresses community needs. We leveraged React for its dynamic UI capabilities, TailwindCSS for rapid and consistent styling, and Django for its robust backend and security features.
References
[1] Nextdoor. "About Nextdoor." [Online]. Available: https://about.nextdoor.com/. [Accessed October 2024].
[2] FixMyStreet. "FixMyStreet." [Online]. Available: https://www.fixmystreet.com/. [Accessed October 2024].
[3] Reddit. "Reddit." [Online]. Available: https://redditinc.com/. [Accessed October 2024].
[4] React. "React Documentation." [Online]. Available: https://react.dev/. [Accessed October 2024].
[5] TailwindCSS. "Tailwind CSS Documentation." [Online]. Available: https://tailwindcss.com/docs. [Accessed October 2024].
[6] Django. "Django Documentation." [Online]. Available: https://docs.djangoproject.com/en/5.1/ [Accessed October 2024].