Click here to explore the live version of my website: 👉 https://reward-rangers-8ecbd6670690.herokuapp.com/
-
User Stories & Acceptance Criteria
- User Story 1 – User Registration and Login (must-have)
- User Story 2 – Child Profile Management (must-have)
- User Story 3 – Task Creation (must-have)
- User Story 4 – Task Assignment (must-have)
- User Story 5 – Task Completion Approval (must-have)
- User Story 6 – Reward Creation (must-have)
- User Story 7 – Reward Redemption Approval (must-have)
- User Story 8 – Parent Dashboard (must-have)
- User Story 9 – AI Task and Reward Suggestions (must-have)
- User Story 10 – Stripe Subscription (must-have)
- User Story 11 – Task Completion by Child (must-have)
- User Story 12 – Points Balance and Ranger Level (should-have)
- User Story 13 – Ranger Level Progress (should-have)
- User Story 14 – Parent Email Notifications (should-have)
- User Story 15 – Reward Redemption Request (should-have)
- User Story 16 – Activity History (should-have)
- User Story 17 – Child Email Notifications (could-have)
- User Story 18 – Sibling Leaderboard (could-have)
-
Deployment Difficulty levels (could-have)ocedure
- At the top of this README, a mockup generated using Canva showcases screenshots of the project displayed on different devices, including desktop, tablet and mobile.
- This visual overview highlights the project’s responsive design and ensures a quick understanding of how the layout adapts across screen sizes.
Reward Rangers uses Django's built-in admin interface for backend data management. All core models — User, Child, Task, Reward, and RewardRedemption — are registered in admin.py.
The User and Task admin views are customized for easier oversight:
- User: extends Django's default
UserAdminwith an additional "Subscription Info" fieldset, exposing Stripe-related fields (is_premium,stripe_customer_id,stripe_subscription_id,subscription_status,trial_end_date,subscription_end_date) directly in the admin, and a customlist_displayshowing subscription status and trial end date at a glance. - Task: displays key fields (
title,created_at,due_date,completed_at) directly in the list view, withcreated_atset as read-only to prevent accidental edits to the original creation timestamp. - The remaining models (
Child,Reward,RewardRedemption) use Django's default admin registration, providing standard add/edit access for quick manual data management during development.
Click here to access the admin dashboard: 👉 http://127.0.0.1:8000/admin/
- Reward Rangers integrates Google's Gemini API (gemini-2.5-flash) to help parents quickly generate age-appropriate task and reward ideas, rather than requiring them to think of everything manually.
- This was implemented as a dedicated Django app (ai_app), using the official google-genai Python SDK to communicate with Gemini.
- When a parent requests suggestions, the view constructs a prompt tailored to the child's age (for tasks) or a general audience (for rewards), and instructs Gemini to return its response strictly as JSON.
- Django sends a prompt via SDK to Gemini API, which returs Json suggestions, then Django parses the reply and shows it as cards.
- Reward Rangers supports two subscription models—Per-Child and Family Pack—implemented with Stripe's Python SDK and verified through Stripe webhooks.
- New parents get a 7-day free trial with full premium access before any payment is required.
- After checkout, Stripe sends a checkout.session.completed webhook, which the backend validates to activate the correct access level.
- If a subscription is canceled, a customer.subscription.deleted webhook revokes premium access accordingly.
- Django talks to gmai's server using SMTP, and Gmail then delivers message to the recipient.
- Reward Rangers uses Django's built-in send_mail() function to notify parents automatically, configured to send through Gmail's SMTP server rather than a third-party email service.
- When a child marks a task as complete or requests a reward redemption, the corresponding view first updates the database, then builds a list of recipients — the parent's email address, plus an optional secondary notification_email set on the child's profile — and sends an email containing the relevant details and a dynamically generated link back to the dashboard (built using Django's build_absolute_uri, so it resolves correctly on both localhost and the live Heroku deployment).
- The connection to Gmail is authenticated over TLS using an app password stored in environment variables, keeping credentials out of the codebase.
- Since notifications support the core functionality rather than being essential to it, send_mail() is called with fail_silently=True, so a temporary email delivery issue never blocks a task or reward action from completing.
- Build a gamified family task management app that makes household chores feel rewarding rather than like a chore.
- Encourage positive behavior in children through a points-based system with visible progress (Bronze, Silver, Gold Ranger levels).
- Give parents an easy way to assign tasks, approve completions, and manage rewards without needing to be constantly present.
- Deliver a full-stack, production-ready Django application demonstrating authentication, database relationships, payment integration (Stripe), and third-party API usage (Google Gemini AI).
- Parents looking for a structured, motivating way to manage household chores and responsibilities with their children.
- Families who want to encourage good habits through positive reinforcement (points and rewards) rather than punishment.
- Parents comfortable using a web app to assign tasks, track progress, and approve rewards remotely.
- Children old enough to log in independently, complete tasks, and understand a points-based reward system (the app supports a dedicated PIN-based child login separate from the parent account).
- Families interested in premium features like AI-powered task suggestions and flexible subscription plans (Per-Child or Family Pack) to scale with household size.
- The project was designed with flexibility in mind, allowing it to adapt smoothly to different screen sizes and devices, from desktop displays to tablets and smartphones — including the devices children most commonly use to log in and complete their tasks.
- Child cards, task cards, and reward cards are large, clearly spaced, and easy to tap with small fingers, ensuring a comfortable touch experience for children navigating the app on mobile and tablet screens.
- This was achieved using CSS custom properties, a responsive Bootstrap grid that reflows from multi-column on desktop to single-column on smaller screens, and media queries that scale down typography, buttons, and spacing at both tablet (768px) and phone (576px) breakpoints — ensuring a consistent, fully usable experience for both parents and children on any device.
-
Reward Rangers is designed to support the needs of both parents and children. Below are the main goals users want to achieve when using the app:
Parents:
- Assign tasks to specific children quickly, without unnecessary steps or confusion.
- Track each child's progress at a glance — pending tasks, overdue tasks, and items awaiting approval — from a single dashboard.
- Approve or reject completed tasks and reward requests with confidence, knowing points are calculated and applied accurately.
- Set up meaningful, motivating rewards that reflect their own family's values and routines.
- Receive timely email notifications so they never miss a task completion or reward request needing their attention.
- Get help generating fresh, age-appropriate task and reward ideas through the AI suggestion feature, rather than starting from a blank page.
- Manage payment and subscription plans (Per-Child or Family Pack) with a clear, low-friction checkout process.
Children:
- Log in independently using their own simple username and PIN, without needing a parent's account credentials.
- See their assigned tasks clearly and mark them complete with a single tap.
- Understand their own progress through a visible points total and Ranger level (Bronze, Silver, Gold).
- Feel a sense of achievement and pride when reaching a new Ranger level.
- Browse and request rewards they've earned, and see clearly which requests are still pending approval.
- Enjoy a colorful, playful, and encouraging interface that makes completing chores feel like a game rather than a burden.
These are the main experience goals the app delivers:
- Start instantly with a clean, welcoming dashboard that shows exactly what needs attention, no digging required.
- See a vibrant, animated gradient background and playful emoji avatars that make the app feel fun rather than like a chore list.
- Understand each child's progress at a glance through bold points totals, colour-coded Ranger badges (Bronze, Silver, Gold), and clear pending/overdue counters.
- React quickly with large, clearly labelled buttons for Tasks and Rewards on every child card.
- Stay motivated through a visible progress bar showing exactly how close a child is to their next Ranger level.
- Get immediate feedback through colour-coded success, warning, and error messages after every action (approving a task, redeeming a reward, etc.).
- Feel a sense of achievement with a distinct gold badge and "Maximum level reached!" message once the top Ranger level is hit.
- Navigate confidently between parent and child views, with a simple PIN-based login keeping the child experience separate and secure.
- Stay informed even away from the app thanks to automatic email notifications whenever a task is completed or a reward is requested.
- The diagram below shows the core data structure of Reward Rangers and how each model relates to the others.
Relationships:
-
A User (parent) creates and owns multiple Children, Tasks, and Rewards.
-
A Task is assigned to a Child through a many-to-many relationship (
assigned_to), since the model supports assigning one task to multiple children if needed. -
A Child requests a RewardRedemption, linking to the specific Reward they want to redeem via
reward_id. -
A RewardRedemption tracks how many points were spent, when it was requested, and whether it's been approved by the parent — keeping a clear audit trail of the reward-redemption process.
-
This structure keeps each parent's data (children, tasks, rewards) fully isolated from other parents, while allowing flexible task assignment and a clear approval workflow for both tasks and rewards.
Reward Rangers follows Django's recommended practice of splitting functionality into separate, focused apps rather than one large app. This keeps each part of the codebase organized, reusable, and easier to maintain.
rangers/— The core app, containing the main models (User,Child,Task,Reward,RewardRedemption), views, and templates that power the primary task/reward/points system, parent and child dashboards, and authentication logic. These models are grouped together because they're tightly coupled — aTaskreferences aChild, aRewardis redeemed through aRewardRedemption, and points/ranger levels depend on all of them working together as one connected domain. Splitting these apart would mean constant cross-app imports and circular dependencies for what is really a single core feature set.ai_app/— A dedicated app for the AI-powered task and reward suggestion feature, using Google Gemini to generate suggestions. This is kept separate because it's a self-contained, optional enhancement — it consumes core data (like a child's existing tasks) to generate suggestions, but nothing in the core app depends on it. It could be disabled or removed entirely without affecting the main task/reward system.payments/— Handles all Stripe-related functionality: checkout sessions, subscription plans (Per-Child and Family Pack), and webhook handling for payment events. This is also separated because it's a distinct third-party integration concerned with billing and access control, not the core task/reward logic itself — keeping it isolated makes it easier to test, update, or swap out the payment provider without touching the rest of the app.
In short: rangers groups the models that are fundamentally interdependent and form the core gameplay loop, while ai_app and payments are separated because they're add-on integrations that support the app without the core system needing to know the details of how they work internally.
Click here to explore the Kanban Board in GitHub: 👉 https://github.com/users/dev-by-ahlem/projects/9
As a parent I want to register and log in So that I can manage my family's tasks and rewards
As a parent I want to create and manage child profiles So that I can keep track of each child separately
As a parent I want to create tasks with descriptions, due dates and point values So that I can assign structured activities to my children
As a parent I want to assign tasks to specific children So that I can personalise responsibilities for each child
As a parent I want to approve or reject task completions So that I can ensure tasks are genuinely completed
As a parent I want to create rewards with titles and point costs So that I can motivate my children to earn points
As a parent I want to approve reward redemption requests So that I can control when rewards are given
As a parent I want to view a dashboard of all children, tasks and points So that I can have a full overview of my family's progress
As a parent I want to receive AI-suggested tasks and rewards So that I can get inspiration based on my child's age and interests
As a parent I want to subscribe to a premium plan via Stripe So that I can unlock unlimited features
As a child I want to see my assigned tasks and click 'I did it!' So that I can notify my parent that I have completed a task
As a child I want to see my points balance and Ranger level So that I can track my progress
As a child I want to see my progress towards the next Ranger level So that I can stay motivated to complete more tasks
As a parent I want to receive email notifications when a child submits a task or reward request So that I can respond quickly
As a child I want to browse available rewards and request to redeem them So that I can claim a reward when I have enough points
As a parent I want to view my children's activity history So that I can monitor their progress over time
As a child I want to receive email notifications about my task approvals So that I can know when my parent has reviewed my work
As a child I want to see a leaderboard comparing my points with my siblings So that I can feel motivated through friendly competition
- The visual design of Reward Rangers is crafted to feel bright, playful, and motivating for children, while remaining clear and efficient for parents managing the app day-to-day.
- The purple-to-pink gradient background, bold rounded buttons, and animated points/ranger badges create a game-like atmosphere that makes completing chores feel rewarding rather than like a task list.
- Colour is used purposefully: gold for points and the top Ranger level, green for completed/success states, red for overdue tasks, reinforcing meaning at a glance without relying on text alone.
- Every layout choice supports quick scanning — child cards, task cards, and reward cards are clearly separated, large enough to tap comfortably, and consistent across parent and child views, so both audiences can navigate the app intuitively.
Font Family: Nunito — a rounded, friendly sans-serif font, imported via Google Fonts.
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap');Introduces Reward Rangers to new visitors, explaining what the app does and encouraging parents to sign up or log in.
Allows a new parent to create an account, automatically starting their 7-day free trial with full access to premium features.
Lets a returning parent log into their existing account to access their dashboard and manage their children's tasks and rewards.
Gives the parent a complete overview of all their children — pending, overdue, and awaiting-approval task counts —Parent can add tasks and rewards for their children -- plus quick access to approve tasks and reward redemptions.
Lets the parent create, view, and manage the list of rewards their children can redeem points for or ask for AI suggestions.
Provides a separate, simplified login for children using just a username and PIN, keeping their experience distinct from the parent's account.
Shows the child their own tasks, points, and Ranger level progress, letting them mark tasks complete directly and redeem for rewards.
Safely ends the current session (parent or child) and redirects back to the appropriate login page.
🖥️ Desktop Screenshots
📱 Mobile Screenshots
🖥️ Desktop Screenshots
📱 Mobile Screenshots
🖥️ Desktop Screenshots
📱 Mobile Screenshots
🖥️ Desktop Screenshots
📱 Mobile Screenshots
🖥️ Desktop Screenshots
📱 Mobile Screenshots
🖥️ Desktop Screenshots
📱 Mobile Screenshots
- My project was developed using a combination of modern web technologies and professional development tools and framewark.
- Structure and styling.
- Any front-end interactivity (e.g. read-more toggles, form behavior).
- code editor.
- version control.
- Create a mockup.
- core language
- web framework
- payments/subscriptions
- AI task/reward suggestions
- production database (Heroku typically requires this over SQLite)
- deployment
- AI tools played an important role in helping me build, improve, and polish this project.
- I combined multiple AI assistants to benefit from their different strengths and get better results during development.
- I used GitHub Copilot directly inside VS Code as an AI coding assistant.
- It helped me by reading my project files, understanding the context of my code, suggesting improvements, detecting mistakes, and speeding up my workflow.
- I also used it to generate code snippets, refactor sections of the project.
- I used both Claude and ChatGPT to assist me throughout the development process.
- I used ChatGPT to generate the color palette.
- Since each AI tool has its own strengths and limitations, combining them helped me get clearer explanations, different problem-solving approaches, better design ideas, and more efficient coding support.
HTML Validation Warning — Missing H1 Heading
- Issue: The Nu HTML Checker flagged a warning stating the document had heading elements but none with a computed level of 1. This occurred on the login page, where the "Welcome Back!" heading was incorrectly marked up as an
<h2>with no<h1>present on the page. - Fix: Changed the heading from
<h2>to<h1>intemplates/account/login.html, and adjusted the inlinefont-sizeto preserve the original visual styling. - Result: Page now passes HTML validation with no heading-related warnings.
| Before:
| After:
Click here to go to the testing file:
-
✨The following "could-have" user stories are planned for future development and may be added in later versions of the project:
- Child notification email improvements: allow children to receive their own email confirmations (e.g. when a task is approved or a reward is unlocked), not just the parent.
- Progress visualisation: add a visual chart or diagram showing each child's points growth and Ranger level progression over time, instead of just the current progress bar.
- Task categories or tags: let parents organize tasks by type (e.g. Chores, Homework, Hygiene) for easier filtering.
-
The project was deployed using Heroku, since it's a full-stack Django app requiring a server and database (unlike GitHub Pages, which only serves static sites).
-
Below is the deployment process followed for this project:
- The full project folder was pushed to a GitHub repository.
- A new app was created on the Heroku Dashboard and linked to the GitHub repository.
- Required config vars (e.g.
SECRET_KEY, database URL, Stripe keys, email credentials) were added under the app's Settings tab. - A
Procfileandrequirements.txtwere included in the project so Heroku knew how to run the app and which dependencies to install. - The app was deployed manually from the Heroku Dashboard by connecting to the GitHub repo and clicking "Deploy Branch" (rather than using the Heroku CLI, due to MFA restrictions on the account).
- After each update, changes were committed and pushed to GitHub, then redeployed from the Heroku Dashboard to reflect the latest version live.
-
Through the project, I made a consistent effort to commit as frequently as possible more then 100 commits in order to clearly document every update, fix, and improvement.
-
This ensured full transparency in the development process and made it easier to track changes over time.
