As developers, we're no strangers to stress and anxiety. The pressure to meet deadlines, the frustration of debugging, and the constant need to learn can take a toll. While there are many mental wellness apps available, a nagging question always bothered me: where is my data going? I wanted a tool that was not only effective but also respected my privacy. That's why I created MindfulTrack, an open-source application to help individuals track and visualize their anxiety triggers in a secure, private environment.
In this article, I'll walk you through the journey of building MindfulTrack. We'll explore its privacy-first architecture, the tech stack that powers it, and how you can contribute to this meaningful project. This is more than just a project showcase; it's an invitation to build a tool that can genuinely help people, with the assurance that their sensitive data remains theirs alone.
Prerequisites:
- A basic understanding of React (Next.js), and serverless functions.
- Familiarity with Git and GitHub.
- Node.js and npm (or yarn) installed on your machine.
Understanding the Problem
Many existing mental health apps are closed-source and ad-supported, creating a potential conflict of interest when it comes to user data. Your most personal thoughts and feelings can become a product. The challenge was to create an application that is:
- Completely Private: All data is user-owned and encrypted.
- Accessible: Free to use and easy to deploy for personal use.
- Insightful: Helps users identify patterns in their anxiety through simple visualizations.
- Community-Driven: Open to contributions and improvements from the developer community.
MindfulTrack addresses these issues by putting privacy at its core, utilizing a modern tech stack that's both powerful and cost-effective for individual hosting.
Prerequisites for Contribution
To get started with contributing to MindfulTrack, you'll need:
- A GitHub Account: To fork the repository and submit pull requests.
- Node.js: Version 18.0 or higher.
- A Vercel Account: For easy deployment and hosting of your own instance.
- A PostgreSQL Database: You can get a free one from providers like Supabase or Vercel Postgres.
To set up the project locally, clone the repository and install the dependencies:
git clone https://github.com/your-github-username/mindfultrack.git
cd mindfultrack
npm install
Step 1: The Foundation - Next.js Frontend
What we're doing: Building a responsive and interactive user interface with Next.js.
Implementation:
The core of the application is built with Next.js, chosen for its excellent developer experience, performance, and hybrid rendering capabilities.
pages/index.js: The main dashboard where users can log their anxiety levels and associated triggers.pages/trends.js: A page dedicated to visualizing the collected data over time.components/: Reusable React components for things like buttons, modals, and charts.
Here’s a simplified look at the trigger logging component:
// components/TriggerLogger.js
import { useState } from 'react';
export default function TriggerLogger() {
const [anxietyLevel, setAnxietyLevel] = useState(5);
const [triggers, setTriggers] = useState('');
const handleSubmit = async (e) => {
e.preventDefault();
// API call to save the data will go here
console.log({ anxietyLevel, triggers });
};
return (
<form onSubmit={handleSubmit}>
<label htmlFor="anxietyLevel">Anxiety Level (1-10)</label>
<input
type="range"
id="anxietyLevel"
min="1"
max="10"
value={anxietyLevel}
onChange={(e) => setAnxietyLevel(e.target.value)}
/>
<textarea
placeholder="What are your triggers?"
value={triggers}
onChange={(e) => setTriggers(e.target.value)}
/>
<button type="submit">Log Entry</button>
</form>
);
}
How it works:
This component uses React's useState hook to manage the form's state. When the user submits the form, the handleSubmit function will eventually send this data to a secure API endpoint.
Step 2: The Brains - Next.js API Routes and PostgreSQL
What we're doing: Creating a secure backend to store and retrieve user data using Next.js API Routes and a PostgreSQL database.
Implementation:
Next.js API routes provide a seamless way to build a serverless backend. We'll create an endpoint to handle the submission of anxiety logs.
// pages/api/log.js
import { Pool } from 'pg';
const pool = new Pool({
connectionString: process.env.POSTGRES_URL,
});
export default async function handler(req, res) {
if (req.method === 'POST') {
const { anxietyLevel, triggers } = req.body;
// Here you would also get the user ID from a secure session
try {
await pool.query(
'INSERT INTO anxiety_logs (level, triggers) VALUES ($1, $2)',
[anxietyLevel, triggers]
);
res.status(200).json({ message: 'Log saved successfully' });
} catch (error) {
res.status(500).json({ error: 'Failed to save log' });
}
} else {
// Handle other HTTP methods or return an error
res.setHeader('Allow', ['POST']);
res.status(405).end(`Method ${req.method} Not Allowed`);
}
}
How it works:
This API route connects to a PostgreSQL database using the pg library. It listens for POST requests and inserts the new anxiety log into the anxiety_logs table. The database connection string is stored securely in an environment variable.
Step 3: Privacy-First Design
This is the most crucial aspect of MindfulTrack. Here are some of the privacy-first decisions made:
- No Third-Party Trackers: The app does not include any analytics or ad trackers.
- Data Encryption: The connection to the PostgreSQL database is encrypted.
- User-Owned Data: The ultimate goal is to allow users to easily export or delete all their data.
- Self-Hosting Encouraged: By providing clear deployment instructions, users are empowered to host their own instance of MindfulTrack, giving them full control over their data.
Putting It All Together
With the frontend, backend, and database connected, the application provides a seamless experience. A user can:
- Visit the deployed application.
- Log in securely (authentication can be implemented with a library like NextAuth.js for added security).
- Enter their anxiety level and triggers on the main page.
- View their historical data on the "Trends" page, visualized with a library like Chart.js.
How to Contribute
I believe in the power of community, and I invite you to contribute to MindfulTrack. Whether you're a seasoned developer or just starting, there are many ways to help:
- Report Bugs: Find a bug? Open an issue on the GitHub repository.
- Suggest Features: Have an idea for a new feature? Let's discuss it in the issues section.
- Write Code: Fork the repository, create a new branch, and submit a pull request with your improvements.
- Improve Documentation: Clear documentation is essential. Help make it better.
You can find the project on GitHub: [Link to your GitHub repository here]
Conclusion
MindfulTrack is more than just a coding project; it's a statement about the kind of technology we should be building—tools that empower and protect users. By open-sourcing this application, I hope to create a resource that is built by the community, for the community.
I encourage you to check out the project, and I look forward to your feedback and contributions.