BioBoost App

BioBoost is a react application focused on health and productivity that helps users reinforce positive behaviors and mitigates negative behaviors. Habit tracking allows you to reach your goals, whether they are health or career-related. Staying on top of your health will result in better perspectives and a more productive lifestyle. Currently, the app supports good and bad habits, weight, and mood tracking.

Technologies

• React / Next.js
• Railway / Prisma / PostgreSQL
• Tailwind CSS / HeadlessUI
• React Hook Form
• tRPC

View Site

Source Code

Purpose and Goal

I built this app because I wanted an all-in-one health and productivity tool. I wanted something to help me with my fitness and life goals. I am working on plenty of other features to assist anyone wanting to be happier and healthier.

Problems and Thought Process

The trickiest part of the app was creating the calendar that shows users what days they were successful in a given activity. If you complete all your daily tasks, you receive a green check. If you fail to perform merely one habit, then you receive a red indicator. But, if you didn’t have a task created on or before that day, it would omit that habit. This logic required using many different array methods, such as some and every. This logic had to be duplicated and changed for every recorded metric.

Lessons Learned

Before this project, I would reach for an npm package called variant-classnames.

This package would conditionally add class names to your components based on props.

import cn from 'variant-classnames';

type ButtonProps = {
	text: string,
	color: 'red' | 'blue',
};

export const Button: React.FC<ButtonProps> = (props) => {
	const variants = {
		color: {
			red: 'bg-red-100 text-red',
			blue: 'bg-blue-100 text-blue',
		},
	};

	const classes = cn(variants, props);

	return <button className={classes}>{props.text}</button>;
};

This utility removes the need to fill your className attributes with many ternary operators and makes the code more managable.

type ButtonProps = {
	text: string,
	color: 'red' | 'blue',
};

export const Button: React.FC<ButtonProps> = (props) => {
	return (
		<button
			className={`${props.color === 'red' ? 'bg-red-100 text-red' : ''} ${
				props.color === 'blue' ? 'bg-blue-100 text-blue' : ''
			}`}
		>
			{props.text}
		</button>
	);
};

For this project, I chose class-variance-authority or cva. With variant-classnames you would have to create an interface for all your props. CVA offers the VariantProps helper to extract variant types, so you don’t have to code the interface manually.