---

FamilyChecklist

FamilyChecklist is a web-based application designed to help parents and kids stay organized and track progress together. Built with robust AWS infrastructure and a modern web framework, this application offers two distinct interfaces tailored for parents and kids, ensuring a user-friendly experience for both.

Features

• Two Separate Interfaces:

  • Parent Interface: Manage tasks, monitor progress, and set goals for your kids.
  • Kid Interface: View assigned tasks, check off completed activities, and track achievements.

• Progress Tracking: Keep a record of completed tasks and see how your family progresses over time.

• Secure Authentication: Implemented with best practices to ensure that your data remains private and secure.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Testing

npm test

Linting (vs code)

this needs to go in vscode user settings along with eslint extention "eslint.validate": [ "javascript", "javascriptreact", "html", "typescriptreact" ],

Linting (terminal)

npm run lint

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Inter, a custom Google Font.

How to get started in a testing environment

Install dependencies:

$ npm i

Create a docker container running Postgres for testing:

$ docker run --name pg -d -e POSTGRES_PASSWORD=pass -p 5432:5432 postgres

Create a .env file at the root at the project with the following contents:

# ~/.env
DATABASE_URL="postgresql://postgres:pass@localhost:5432/postgres"

Run the following command to migrate the current schema in ~/prisma/schema.prisma to your Postgres database running in your docker container:

$ npx prisma migrate dev --name init

From here, you should have the 3 tables set up in your Postgres Database named Postgres and can use an app like pgAdmin to connect to the server and visualize the tables and execute SQL queries, or the psql CLI to connect to it as well.

Using Prisma

make sure you have the @prisma/client installed if not already using

$ npm install @prisma/client --save-dev

Run this command to build the PrismaClient object that allows you to interact with the data in the testing environment:

$ npx prisma generate

You can now import that PrismaClient object with intellisense and type safety to run queries on the testing database (see documentation for how to use this object), for example:

// some-test-file.js
import { PrismaClient } from '@prisma/client'; // Import PrismaClient

const prisma = new PrismaClient(); // Initialize PrismaClient

const user = await prisma.user.create({ // Create a User (DOES NOT FOLLOW OUR SCHEMA, JUST AN EXAMPLE)
  data: {
    email: 'elsa@prisma.io',
    name: 'Elsa Prisma',
  },
});

Run the development server with

$ npm run dev

To view your application!