That's not my neighbor

Introduction

The project "That's not my neighbor" aims to develop a system that addresses specific user needs and functionalities. This document outlines the system requirements, user personas, core user flows, visual themes, and other essential components necessary for the successful implementation of the project.

System Overview

"That's not my neighbor" is designed to provide users with a unique experience in identifying and interacting with their neighborhood environment. The system will leverage advanced technologies to deliver a seamless and engaging user interface, ensuring that users can easily navigate and utilize the system's features.

Functional Requirements

• As a User, I should be able to identify my neighbors using the system.
• As a User, I should be able to report any discrepancies in neighbor identification.
• As a User, I should be able to view a map of my neighborhood.
• As a User, I should be able to receive notifications about neighborhood updates.
• As a User, I should be able to customize my neighborhood profile.

User Personas

• User: An individual who uses the system to identify and interact with their neighborhood environment.

Core User Flows

• User logs into the system -> User views neighborhood map -> User identifies neighbors -> User reports discrepancies if any -> User receives notifications about updates.

Visuals Colors and Theme

• primary: #2A9D8F (Teal)
• primary_light: #A8DADC (Light Teal)
• secondary: #E76F51 (Coral)
• accent: #F4A261 (Orange)
• highlight: #E9C46A (Gold)
• bg: #F1FAEE (Off White)
• surface: rgba(42, 157, 143, 0.8)
• text: #264653 (Dark Blue)
• text_muted: #6D6875 (Muted Gray)
• border: rgba(233, 69, 96, 0.2)

Signature Design Concept

The homepage of "That's not my neighbor" will feature an interactive neighborhood map that users can explore. Using @react-three/fiber and @react-three/drei, the map will be a 3D model where users can click on different houses to view neighbor profiles. As users hover over a house, it will gently lift and rotate, providing a dynamic and engaging experience. The map will also include animated transitions using framer-motion to smoothly guide users through different sections of the neighborhood.

Interaction Model & Motion Direction

The landing page will utilize a "parallax" interaction model, creating a layered depth effect as users scroll through the page. Decorative elements like trees and clouds will move at different speeds, enhancing the storytelling aspect of the neighborhood exploration. Internal pages will adopt a "static" model for clarity and ease of navigation.

Non-Functional Requirements

• The system should be responsive and accessible on various devices.
• The system should ensure data privacy and secure user information.
• The system should provide real-time updates and notifications.

Tech Stack

• Frontend: React for Web
• Backend: Python, FastAPI
• Database: MySQL or MariaDB, using alembic for migrations
• AI Models: Not applicable
• AI Tools: Not applicable
• Local Orchestration: Docker, docker-compose
• Server-side Orchestration: Kubernetes

Assumptions and Constraints

• The system will primarily serve users in the US.
• Users are assumed to have basic internet connectivity.
• The system will comply with US data protection regulations.

Glossary

• User: An individual interacting with the system.
• Neighborhood Map: A visual representation of the user's neighborhood within the system.
• Parallax: A scrolling effect where background images move slower than foreground images, creating a sense of depth.