Skip to content

task.md

Latest commit

 

History

History
228 lines (166 loc) · 9.12 KB

task.md

File metadata and controls

228 lines (166 loc) · 9.12 KB
Raw

Below is a comprehensive checklist broken down into phases, covering the entire process of designing, building, testing, and deploying the Next.js food tracking app with Supabase, a food journal/calendar, and barcode scanning via the NutritionIx API. Each phase includes actionable steps you can check off as completed.

PHASE 1: Planning & Requirements

  1. Gather Requirements

    • Identify user goals (e.g., track daily calories, scan barcodes, etc.)
    • Define MVP scope (authentication, manual entries, scanning feature)
    • Decide on additional nice-to-have features (e.g., macro goals, daily reminders)

  2. Design Mockups

    • Sketch initial wireframes (low fidelity)
    • Create high-fidelity mockups (Figma, Sketch, etc.)
    • Review mockups with stakeholders/teammates

  3. Technical Architecture

    • Select main frameworks/libraries (Next.js, Supabase, Tailwind CSS, etc.)
    • Plan data models (e.g., user profiles, food entries)
    • Decide on state management approach (React state, Context API, Zustand, etc.)
    • Identify 3rd-party APIs/services (NutritionIx, barcode scanning library)

PHASE 2: Project Setup & Environment

  1. Initialize Project

    • Create a new Next.js project (e.g., npx create-next-app)
    • Install core dependencies (next, react, react-dom, @supabase/supabase-js)
    • Initialize version control (Git) and repository (GitHub, GitLab, etc.)

  2. Tailwind CSS Setup

    • Install Tailwind CSS and configure (tailwind.config.js, globals.css)
    • Import Tailwind directives (@tailwind base; @tailwind components; @tailwind utilities;)
    • Test Tailwind utility classes in a sample component

  3. Supabase Configuration

    • Create a new Supabase project in your Supabase dashboard
    • Copy the SUPABASE_URL and SUPABASE_ANON_KEY into .env.local
    • Initialize the Supabase client (supabaseClient.js)

  4. Environment Variables

    • Add all necessary keys to .env.local (e.g., NEXT_PUBLIC_SUPABASE_URL, NEXT_PUBLIC_SUPABASE_ANON_KEY, NEXT_PUBLIC_NUTRITIONIX_API_KEY)
    • Confirm .env.local is ignored by Git

PHASE 3: Database & Supabase Setup

  1. Database Schema

    • Create profiles table (e.g., columns: id, username, email, created_at)
    • Create food_entries table (e.g., columns: id, user_id, food_name, portion_size, meal_type, date, created_at)
    • Create any additional tables for future expansions (e.g., goals, recipes)

  2. Supabase Policies

    • Configure row-level security (RLS) on tables
    • Write policies to allow users to read/write only their own data
    • Test to ensure unauthorized access is restricted

  3. Seed Data (Optional)

    • Insert sample user data
    • Insert sample food entries

PHASE 4: Basic UI & Layout

  1. Project File Structure

    • Create a components/ folder for reusable components
    • Create pages/ for main routes (e.g., index.jsx, profile.jsx, journal.jsx, scan.jsx)
    • Create a utils/ folder for helper functions (e.g., supabaseClient.js, nutritionIx.js)
    • Create a styles/ folder for globals.css and tailwind.config.js

  2. Global Layout & Navigation

    • Implement a Layout.jsx with header/nav/footer
    • Ensure navigation links are working (Home, Journal, Scan, Profile)

  3. Responsive Design

    • Verify mobile-first responsiveness (Tailwind utility classes)
    • Adjust breakpoints for tablet/desktop if needed

PHASE 5: Authentication & Profile

  1. Sign Up / Sign In Components

    • Create SignIn.jsx and SignUp.jsx forms
    • Connect forms to Supabase auth (e.g., supabase.auth.signIn)
    • Handle success/error states (redirect or display error messages)

  2. Auth Page & Routing

    • Create pages/auth.jsx or separate pages (signin, signup)
    • Toggle between sign-in/sign-up components or link them

  3. Profile Page

    • Create Profile.jsx component to display user info
    • Fetch and display profile data from Supabase
    • Provide an option to update profile info (if needed)

  4. Protected Routes

    • Implement a check to ensure certain pages (journal, profile, etc.) require login
    • Redirect to auth page if not logged in

PHASE 6: Journal & Calendar

  1. Food Entry Form

    • Create FoodEntryForm.jsx to capture foodName, portionSize, mealType, date
    • Insert data into food_entries table via Supabase
    • Validate form inputs (required fields, date format, etc.)

  2. Calendar View

    • Create CalendarView.jsx to display entries by date
    • Fetch entries from Supabase for the logged-in user
    • Render entries in a calendar-like layout or list grouped by date

  3. Journal Page

    • Combine FoodEntryForm and CalendarView into pages/journal.jsx
    • Test creating and viewing new entries

  4. Editing/Deleting Entries (Optional)

    • Provide a way to edit or remove entries
    • Confirm Supabase row-level security is respected

PHASE 7: Barcode Scanning

  1. Camera Access

    • Implement Scanner.jsx to access the device camera (getUserMedia)
    • Handle permission requests and errors gracefully

  2. Barcode Detection

    • Integrate a library (e.g., QuaggaJS, Zxing) for real-time barcode scanning
    • Test scanning sample UPC codes

  3. Scan Page

    • Create pages/scan.jsx with the Scanner component
    • Show live camera feed and scanning overlay
    • Display detected UPC or scanning result

  4. Visual/UX Enhancements

    • Add scanning frame or border overlay
    • Display instructions to the user (e.g., "Center the barcode in the frame")

PHASE 8: NutritionIx API Integration

  1. API Setup

    • Obtain API credentials (app ID, app key) from NutritionIx
    • Add credentials to .env.local
    • Create nutritionIx.js utility to handle fetch requests

  2. Query by UPC

    • Write a function (e.g., queryNutritionIx(upc)) that sends a request to the NutritionIx endpoint
    • Handle errors (e.g., UPC not found, API rate limits)

  3. Display Food Data

    • In Scanner.jsx, after a successful scan, call queryNutritionIx
    • Show returned nutritional info (e.g., name, calories, macros)
    • Provide an option to add this item to the user's journal

  4. Testing

    • Test scanning multiple barcodes to confirm data accuracy
    • Handle edge cases (invalid barcodes, missing data, etc.)

PHASE 9: Polishing & Testing

  1. UI/UX Refinements

    • Match the visual design in your mockups (colors, typography, icons)
    • Ensure a smooth flow from scanning to adding an item to the journal
    • Fine-tune layout for small devices

  2. Performance Checks

    • Optimize images (if any) and code splitting (dynamic imports)
    • Ensure minimal layout shifts (LCP, CLS for Core Web Vitals)

  3. Cross-Browser & Device Testing

    • Test on Chrome, Safari, Firefox, Edge
    • Test on iOS Safari and Android Chrome
    • Verify camera permissions and scanning functionality on mobile

  4. Functional Testing

    • Ensure sign-up/sign-in flows are smooth
    • Confirm food entries are saved and displayed correctly
    • Validate the scanning process and NutritionIx results

  5. Security & Edge Cases

    • Verify RLS policies for data privacy
    • Check that no unauthorized data access is possible
    • Handle offline or slow network scenarios gracefully

PHASE 10: Deployment & Post-Deployment

  1. Deployment Setup

    • Choose a hosting platform (Vercel, Netlify, etc.)
    • Configure environment variables in the hosting dashboard (Supabase keys, NutritionIx keys)
    • Run a production build (npm run build) and deploy

  2. DNS & Domain

    • Point custom domain (optional) to your hosting provider
    • Verify HTTPS and SSL certificate

  3. Post-Deployment Testing

    • Check that the live site is functioning (sign in, scanning, etc.)
    • Monitor Supabase usage logs and errors

  4. Feedback & Iterations

    • Gather user feedback (or internal QA)
    • Triage and fix any reported bugs
    • Plan additional features or improvements (e.g., push notifications, social sharing)

  5. Maintenance

    • Update dependencies regularly
    • Monitor performance and logs
    • Ensure backups of the Supabase database if needed

Final Note

This checklist ensures each major milestone in your food tracking app project is accounted for and completed. Adapt it to your specific needs, adding or removing tasks as necessary. Checking off items in each phase will help keep the project organized, on schedule, and aligned with the final product vision. Good luck with your build!