LCM Potty Chart

About

This app is meant to be a progress tracker for littles and bigs to track progress and behaviors.

The types of progress can be anything from:

• Potty Training
• Diaper Training
• Behavior Tracking
• Eating Habits
• Other Habit Tracking
• Learning New Skills
  • Dedicating certain amount of hours a day to a new skill or talent
• Whatever else a little and big would want to track

Positive days will be given "stars" or happy designs where negative days will be given rain clouds or sad designs.

A big will be able to track as many littles as they desire and can create multiple charts for each little they have. How you use the charts and trackers is up to you.

Give descriptions to each sticker you use and make a list of rules for each chart and how to earn the stars and what would result in a rain cloud.

Send encouraging messages to your little.

Track your friends progress and allow your friends to track your progress.

Technologies

TypeScript

TypeScript is a strongly typed programming language which builds on JavaScript giving you better tooling at any scale.

Next.js

Next.js is a serverless, zero config React framework.

The React Framework for Production

Chakra UI

Chakra UI is a simple, modular and accessible component library that gives you the building blocks you need to build your React applications.

Getting Started

Requirements

The app was built on and is tested for:

• Ubuntu 20.04
• Node.js 14.x
• Node.js 16.x

I cannot guarantee functionality or stability if used on other OSs Ubuntu versions or Node.js versions.

Installation

After cloning the app you will need to install the dependencies and packages. The app uses Yarn v2. Run this command to install using Yarn v2:

yarn install

Upgrading Packages

The upgrade-interactive plugin has been included in this app. To ungrade packages and dependencies run the following command:

yarn upgrade-interactive

The plugin upgrade-interactive is a combination of the yarn outdated and yarn upgrade [package...] commands. Where yarn outdated displays the list of outdated packages and yarn upgrade [package...] can then be used to upgrade desired packages, yarn upgrade-interactive displays the same outdated package list and lets you immediately chose which to upgrade.

To learn more about the upgrade-interactive plugin please read the official docs.

Environment Variables

Learn more about environment variables in Next.js

All environment variables are in files named example.env.*.

Copy the files and remove the example. prefix to use them.

• .env

• .env.development

• .env.production

Development and production variables overwrite the main env variables. Development keys can be kept in the main env file to be overridden when yarn start is used.

Development Server

To start the development server run the command

yarn dev

Deployment Server

To deploy the app it must first be built.

The build script will automatically check for linting and typescript type errors.

If any errors are present the build is aborted.

To run the build command use:

yarn build

If the build is successful then the deployed server needs to be started.

This will not work if the build did not complete or a build was never done.

To start the app run:

yarn run

It is recommended that the app is deployed using the Vercel Platform. Vercel is optimized to dynamically serve static, dynamic, and hybrid pages based on the needs of each individual page that is built. It deploys in less than a minute and can be linked to a Github repo to keep the production server up do date with the most recent pushes to your main or production branch. It automatically provides SSL and CDN to each app and scales automatically. Vercel also monitors all branched and deploys preview builds for those branches to test fixes, refactors, and new content live.

Development Features

Prettier

This app has the prettier code formatter built in. More about Prettier

To have Prettier update the structure of the codebase run the following command:

yarn pretty

ESLint

This app has ESLIne built in to check for errors within the code.

The A11y plugin in installed to help check for and meet accessibility standards.

To lint the codebase run the following command:

yarn lint