GitHub - SheCodesAus/Stack-Otterflows-frontend

Your Product Name

Team Name: Stack OTTERflows

MEET THE TEAM

(From left to right): The Gals you OTTER hire ~ Becky Cole, Inano Knowles, Nancy Valentin, Mahounda Poinsonnet.

Mission Statement

Accountability Pods empowers individuals to achieve meaningful goals through shared commitment and community support. Users join invite only groups centred on goals such as fitness, learning or career development. Through goal setting, regular check ins and progress tracking, the platform strengthens accountability while fostering motivation, engagement and the celebration of milestones together.

Features

Note

The features outlined below are subject to change in response to client feedback, evolving project requirements, or development constraints.

Summary

Accountability Pods by Stack Otterflow enables users to manage personal and collective goal tracking through structured groups. Members submit check-ins for verification by designated "buddies" or pod members, ensuring data integrity and community support. Administrative roles oversee pod settings and membership, while a centralised dashboard visualises individual and group progress through real-time streak tracking and milestone celebrations.

Users

Type	Access	Role type assignment
Superuser or admin	- All access - Can log in - Can log out - Create and manage pods - Create and manage goal categories - Create and manage other users - Approve, archive, and edit check-ins - Export data as CSV - Can see and edit their details via profile page	Core Team: Becky, Inano, Nancy, and Mahounda
Approver	- Can log in - Can log out - Approve, archive, and edit check-ins within assigned pods - Manage pod membership requests - Can see and edit their details via profile page	Client: Lachlan; Mentors, volunteers, She Codes staff
Member	- Create and submit check-ins - Join pods and set personal goals - View pod dashboards and activity feeds - Verify buddy progress - Can see and edit their details via profile page	Registered users, students, professionals
Guest	- View landing page - Browse public pods (read-only) - Access registration and login pages	Public: Users interested in joining a pod

Sticky Notes

Feature	Access	Notes/Conditions
Create	Members	- Log progress against an active personal or pod goal - Option to include hashtags or categories (e.g., #fitness, #coding)
Post	Members	- Submits progress to the Pod activity feed - Triggers a "Pending" status for verification
View	Members, Approvers, and Admins	- Members view via Pod Dashboard feed - Admins/Approvers view via "Pending Verification" queue
Edit	Admins and Approvers	- Correct entry errors or adjust values before verification - Ensure data integrity before the status is set to "Approved"
Statuses: Pending, Approved, Rejected, Archived	- Auto-status: Check-ins are "Pending" upon submission - Verification: Updated to "Approved" or "Rejected" by Admins/Approvers or assigned Buddies	- Status change updates the goal progress bar and user streaks
Export	Admin only	- Export as CSV file - Format: pod_name, goal_title, member_name, checkin_value, timestamp
Flag: Is Verified	Auto-flag	- Boolean: True once an Admin or Approver has finalised the check-in status
Link to Pod	Members	- Check-ins are automatically linked to the Pod from which they were submitted
Link to Goal	Members	- Users must select which specific Goal the check-in contributes towards
Link to Approver	Admin / Approver	- Records which Admin, Approver, or Buddy authorised the check-in for audit purposes

Collections

Feature	Scope	Access	Notes / Conditions
Assign Pods to a Category	Group	Based on Pod topic	- Pods are grouped under a thematic category (e.g., "Coding", "Fitness", "Career Development"). - Helps organise pods on the Explore page and improves discoverability for members searching for relevant communities. - Categories support easier filtering and navigation across the platform.
Assign Approver to a Category	Group	Admin (Core Team)	- Allows an Admin to assign an Approver (e.g., Lachlan or designated staff/mentors) responsibility for pods within a specific category. - The assigned Approver can review, verify, and moderate check-ins for pods under that category. - Helps distribute moderation responsibilities and ensures subject-matter oversight.
Default Goal Duration	Group	Admin (Core Team)	- Defines the standard cadence for goals created within pods of that category (e.g., Weekly, Monthly). - Provides consistency across pods in the same theme and helps members track progress more effectively. - Admins can configure these defaults when setting up or managing categories.
View Pod Dashboards by Category	Group	Admin, Approver	- Enables Admins and Approvers to view aggregated dashboards for all pods within a category. - Displays progress summaries, member activity, and recent check-ins across multiple pods. - Useful for monitoring engagement and identifying trends within a specific theme.
Export Check-ins by Category	Group	Admin (Core Team)	- Generates CSV reports containing check-in data filtered by Pod Category. - Exported fields may include pod name, goal title, member name, check-in value, and timestamp. - Supports reporting, analytics, and internal review by the Core Team.
Set Personal Goal	Individual	Members	- Each member defines their own target (e.g., "3 study sessions per week"). - Targets can vary between members even if they belong to the same pod. - Personal goals contribute to individual progress tracking and accountability.
Private Progress	Individual	Members	- Check-ins contribute to a personal progress bar visible to the member. - Personal streaks are calculated based on the individual's consistency. - Encourages motivation through private goal tracking separate from pod-level metrics.
Buddy Assignment	Individual	Members / Admin	- Each member may be paired with a "Buddy" responsible for verifying their specific check-ins. - Buddies help maintain accountability and ensure check-ins reflect genuine progress. - Admins may override or assign buddies where necessary.
Member Leaderboard	Group	Pod Members	- Displays a ranking or list of members who have met or exceeded their personal targets for the current period. - Encourages friendly competition and community engagement within the pod. - Leaderboards may reset periodically (e.g., weekly or monthly).
Personalised Notifications	Individual	Members	- Automated reminders are sent based on the individual's goal deadlines. - Notifications may include reminders to submit check-ins, progress updates, or streak alerts. - Helps members stay consistent with their commitments.

Pages/Endpoint Functionality

Endpoint	Functionality	Comments
Submit Check-in	- Members post progress updates to their Pod - Toggle for Individual vs Group goal contribution - Option to add numeric values, notes, and hashtags	- Sticky note style interface preferred for quick posting - High contrast design and mobile responsive layout - Real time character limit validation to guide concise updates
Pod Dashboard (Live Board)	- View live feed of check-in sticky notes - Visualise progress bars (Individual streaks or Group totals) - Search notes by text, member, or hashtag - Daily cadences reset at midnight AEST	- Designed to feel like an interactive live board session - Progress bars update dynamically when new check-ins are submitted - Toggle between Individual progress view and Group progress view
Admin Dashboard	- All Superuser functions (Becky, Inano, Nancy, Mahounda) - Create and manage Pod Categories (Collections) - Manage all users and global system settings - Export all data by Category or Pod as CSV	- Requires Superuser authentication - Initial admin accounts created through database seed configuration during deployment
Register as Approver	- Users (Lachlan, Mentors) can register for oversight permissions - Once approved they can log in to the Verification Queue	- Requires verified She Codes email address - Final authorisation managed by the Core Team
Approver / Client Page	- Approver functions for Lachlan and Mentors - Verify, edit, or reject pending check-in notes - View aggregated pod data by Category	- Requires Approver authentication - Interface optimised for quickly reviewing and verifying large volumes of submissions
Individual Pod View	- Focus on personal targets and Buddy pairings - View personal consistency streaks and milestone progress	- Designed to support personal accountability and goal tracking - Accessible to all registered pod members
Group Pod View	- Collaborative view of a shared group target - Progress bar increases when any member submits a valid check-in	- Emphasises collective success within the pod - Encourages collaboration and group motivation
Profile Page	- Accessible by all registered users (Admins, Approvers, Members) - View personal history of check-ins and earned badges - Update account information and notification preferences	- Requires authentication - Serves as the central hub for individual achievements and activity metrics

Nice To Haves

Implement a "Delete" function for user-generated content.
Implement an "Update" function for user-generated content.
Build the "Weekly Snapshot" 2x2 condensed view.
Convert all progress bar units to minutes.
Display a progress bar for the current week's activity.
Display a progress bar for the total project duration.
Build the invite-only "Circle of Trust" connection system via mobile number.
Add progress counters to the UI.
Build a "Poke" feature for partner engagement.
Build a "Quick Thank You" (Kudos) feature for partners.
Add a top-level banner for system prompts.
Add a top-level banner for action reviews.
Develop logic to track and display goals in the past.
Develop logic to track and display goals in the future.
Automated "Nudge" system for members who haven't submitted a check-in.
Interactive animations (e.g., confetti) for 7-day or 30-day consistency streaks.
Dedicated Pod Dashboard space for encouragement on "sticky note" check-ins.
Ability to create invite-only pods for sensitive goals or private coaching.
Dynamic line graphs or heatmaps (GitHub-style) to visualize activity trends.
"Select All" feature for Administrators to approve multiple check-ins at once.
Custom goal metrics (e.g., "glasses of water") instead of binary toggles.
Automated CSV scheduling for weekly data exports to the Core Team.
High-contrast dark theme for nightly check-ins.
Image upload functionality to attach photos to check-in cards.
Mobile App Wrapper (PWA) for home screen access.
Leaderboard filters for "All Time," "This Month," and "This Week."
Calendar Sync for exporting deadlines to Google or Outlook.
Slack/Discord Webhooks for major group pod milestones.
Reaction emojis for instant feedback on check-in notes.

Technical Implementation

Back-End

Django / DRF API
Python

Front-End

React / JavaScript
HTML/CSS

Git & Deployment

Heroku
Netlify
GitHub

This application's back-end will be deployed to Heroku. The front-end will be deployed separately to Netlify.

We will also use Insomnia to ensure API endpoints are working smoothly (we will utilise a local and deployed environment in Insomnia).

Target Audience

This website has one major target audience within a broad age range: individuals who want to be held accountable for their goals, whether professional or personal, by their peers and mentors. Age-range 15-55.

Core Team and Client (administrators) will use this website to manage pod categories, oversee global progress, and manage user roles.

The administrators will be able to sort, authorise, and delete check-ins and easily download the data in a CSV file.

This website is targeted towards this group to automate the oversight of multiple accountability groups and streamline data collection for reporting.

Pod Members (laypeople) will use this website to post their progress on a "sticky note" style dashboard, keep track of their personal or group goals, and maintain consistency streaks.

This website is targeted to this group in order to provide a central, interactive space for digital accountability, preventing the loss of manual tracking data and fostering community motivation.

Back-end Implementation

API Specification

Authentication

Feature	Access	Notes / Conditions
Register	Public users	Creates a new user account with username, email, display name, and password
Log in	Registered users	Authenticates user and returns token
Token authentication	Registered users	Token must be included in protected requests
View current user profile	Registered users	Returns details for the authenticated user
Update profile	Registered users	Allows user to edit basic profile details such as display name

Endpoint	Functionality
POST /api/auth/register/	Create a new user account
POST /api/auth/token/	Return authentication token for valid credentials
GET /api/me/	Retrieve authenticated user details
PATCH /api/me/	Update authenticated user profile

Authentication Notes

Item	Value
Authentication type	Token authentication
Header format	`Authorization: Token <token>`
Protected routes	All routes except public registration and login
Login input	Username and password
Login response	`{ "token": "..." }`

Users

Type	Access	Role type assignment
Registered User	- Register and log in - Create and manage personal goals - Connect with other users - Assign accountability buddies - Submit and review check-ins - Create and join pods - Comment on goals and pod activity - View and edit their profile	Main platform user
Accountability Buddy	- Accept or decline goal assignments - View assigned goals - Approve or reject check-ins - Comment on goal progress	Trusted connection who verifies a user’s progress
Pod Member	- Join accountability pods - View pod goals - Submit pod check-ins - Approve or reject pod check-ins - Comment on pod goals and activity	Member of a collaborative accountability pod

Connections

Feature	Access	Notes / Conditions
Send connection invite	Registered users	Creates a connection request between two users
View connections	Registered users	Displays pending and accepted connections
Accept connection invite	Invited user	Connection status becomes accepted
Decline connection invite	Invited user	Connection request is declined

Endpoint	Functionality
GET /connections/	List all user connections
POST /connections/	Send connection invite
POST /connections/{connection_id}/accept/	Accept connection invite
POST /connections/{connection_id}/decline/	Decline connection invite

Individual Goals

Feature	Access	Notes / Conditions
Create goal	Registered users	Goal includes title, metric type, target value, and optional dates
View goals	Goal owner	Displays all goals created by the user
View goal detail	Goal owner and assigned buddies	Shows progress and goal activity

Endpoint	Functionality
GET /goals/	List user goals
POST /goals/	Create a new goal
GET /goals/{goal_id}/	Retrieve goal details

Goal Assignments

Feature	Access	Notes / Conditions
Assign accountability buddy	Goal owner	Buddy must be a connected user
View goal assignments	Goal owner	Displays assigned buddies for a goal
Accept assignment	Assigned buddy	Allows buddy to review check-ins
Decline assignment	Assigned buddy	Removes assignment request

Endpoint	Functionality
GET /goal-assignments/	List goal assignments
GET /goal-assignments/?goal={goal_id}	List assignments for a specific goal
POST /goal-assignments/	Assign buddy to goal
POST /goal-assignments/{assignment_id}/accept/	Accept assignment
POST /goal-assignments/{assignment_id}/decline/	Decline assignment

Individual Check-ins

Feature	Access	Notes / Conditions
Submit check-in	Goal owner	Records progress toward goal completion
View check-ins	Goal owner and assigned buddies	Displays check-in history
Approve check-in	Accountability buddy	Confirms progress submitted by goal owner
Reject check-in	Accountability buddy	Rejects check-in with optional reason

Endpoint	Functionality
GET /checkins/?goal={goal_id}	List check-ins for a goal
POST /checkins/	Submit a check-in
POST /checkins/{checkin_id}/approve/	Approve check-in
POST /checkins/{checkin_id}/reject/	Reject check-in

Individual Comments

Feature	Access	Notes / Conditions
View comments	Goal owner and assigned buddies	Displays discussion related to a goal
Add comment	Goal owner and assigned buddies	Enables encouragement and feedback

Endpoint	Functionality
GET /comments/?goal={goal_id}	Retrieve comments for a goal
POST /comments/	Create a new comment

Pods

Feature	Access	Notes / Conditions
Create pod	Registered users	Pod creator becomes the pod owner
View pods	Pod members	Lists pods where the user is a member
View pod detail	Pod members	Displays pod information, members, and goals

Endpoint	Functionality
GET /pods/	List pods for the user
POST /pods/	Create a new pod
GET /pods/{pod_id}/	Retrieve pod details

Pod Memberships

Feature	Access	Notes / Conditions
Invite member to pod	Pod members or owner	Invites another user to join the pod
View pod memberships	Pod members	Displays current and pending pod members
Accept pod invite	Invited user	Membership status becomes active
Decline pod invite	Invited user	Invitation is declined

Endpoint	Functionality
GET /pod-memberships/	List memberships
GET /pod-memberships/?pod={pod_id}	List memberships for a specific pod
POST /pod-memberships/	Invite user to pod
POST /pod-memberships/{membership_id}/accept/	Accept pod invitation
POST /pod-memberships/{membership_id}/decline/	Decline pod invitation

Pod Goals

Feature	Access	Notes / Conditions
Create pod goal	Pod members	Creates a shared goal for the pod
View pod goals	Pod members	Displays goals created within the pod

Endpoint	Functionality
GET /pod-goals/?pod={pod_id}	List goals for a pod
POST /pod-goals/	Create pod goal

Pod Check-ins

Feature	Access	Notes / Conditions
Submit pod check-in	Pod members	Records progress toward a pod goal
View pod check-ins	Pod members	Displays pod check-in history
Approve pod check-in	Pod members (excluding creator)	Verifies another member’s check-in
Reject pod check-in	Pod members (excluding creator)	Reject check-in with optional reason

Endpoint	Functionality
GET /pod-checkins/?pod_goal={pod_goal_id}	List check-ins for a pod goal
POST /pod-checkins/	Submit pod check-in
POST /pod-checkins/{checkin_id}/approve/	Approve pod check-in
POST /pod-checkins/{checkin_id}/reject/	Reject pod check-in

Pod Comments

Feature	Access	Notes / Conditions
View pod comments	Pod members	Displays discussion within pod goals
Add pod comment	Pod members	Enables feedback and encouragement

Endpoint	Functionality
GET /pod-comments/?pod_goal={pod_goal_id}	Retrieve pod comments
POST /pod-comments/	Create pod comment

Example API Objects

{
  "user": {
    "user_id": 1,
    "username": "jane_doe",
    "full_name": "Jane Doe",
    "email": "jane@example.com",
    "role_id": 3,
    "avatar": "https://example.com/avatar.jpg",
    "bio": "Aspiring software developer",
    "social_link": "https://github.com/janedoe"
  },
  "category": {
    "category_id": 1,
    "title": "Coding",
    "description": "Pods related to programming and technical study",
    "approver_id": 2,
    "default_goal_duration": "weekly",
    "is_exported": false
  },
  "pod": {
    "pod_id": 10,
    "title": "Python Pioneers",
    "category_id": 1,
    "goal_type": "group",
    "start_date": "2026-03-01T09:00:00Z",
    "end_date": "2026-03-31T23:59:59Z",
    "creator_id": 4
  },
  "goal": {
    "goal_id": 15,
    "pod_id": 10,
    "user_id": 4,
    "title": "Complete 3 Python practice sessions per week",
    "target_value": 3,
    "cadence": "weekly",
    "goal_type": "individual"
  },
  "check_in": {
    "checkin_id": 101,
    "user_id": 4,
    "pod_id": 10,
    "goal_id": 15,
    "value": 1,
    "comment": "Finished one Python practice session today",
    "hashtags": ["#python", "#study"],
    "status": "pending",
    "contribution_type": "individual",
    "created_at": "2026-03-07T10:30:00Z",
    "verified_by": null,
    "is_verified": false
  }
}

Database Schema

Important

Please zoom in to see the database details better

Front-end Implementation

Note

The visual features outlined below are subject to change in response to client feedback, evolving project requirements, or development constraints.

Wireframes

[Name of screen] [Add some details later...]

Logo

Colours

Font

We have chosen to work with Nunito from Google Fonts.

This is how to import it into our code:

<style>
@import url("https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap");
</style>

This is what Nunito Font looks like:

Thats All For Now

[Last updated Sunday 8th March 2026]

Name		Name	Last commit message	Last commit date
Latest commit History 101 Commits
img		img
public		public
src		src
.env		.env
.gitignore		.gitignore
README.md		README.md
eslint.config.js		eslint.config.js
group-project.code-workspace		group-project.code-workspace
index.html		index.html
package-lock.json		package-lock.json
package.json		package.json
vite.config.js		vite.config.js

Folders and files

Latest commit

History

Repository files navigation

Your Product Name

MEET THE TEAM

Table of Contents

Mission Statement

Features

Summary

Users

Sticky Notes

Collections

Pages/Endpoint Functionality

Nice To Haves

Technical Implementation

Back-End

Front-End

Git & Deployment

Target Audience

Back-end Implementation

API Specification

Authentication

Authentication Notes

Users

Connections

Individual Goals

Goal Assignments

Individual Check-ins

Individual Comments

Pods

Pod Memberships

Pod Goals

Pod Check-ins

Pod Comments

Example API Objects

Database Schema

Front-end Implementation

Wireframes

Logo

Colours

Font

Thats All For Now

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

Packages