ADHD Focus Tool

Project Overview

The ADHD Focus Tool is a full-stack time scheduling web application specifically designed with ADHD-friendly principles in mind. It features a clean, minimal, and calming user interface to help users manage tasks without feeling overwhelmed. The application is split into a Node.js/Express.js backend and a Next.js/React frontend.

Coding Method

This project is almost completely vibe coded using Gemini CLI with a mix of Pro 2.5 and Fast 2.5 models. I'll do more with this when I have time, but at this point, the project took around 2.5 hours of time, and has a lot of issues, mostly having to do with the interface. I have created similar projects with Firebase Studio, and intend on trying out OpenAI Codex and Claude Code in the next few days as time allows.

• Backend: A RESTful API built with Node.js, Express, TypeScript, and Sequelize ORM for interacting with a MariaDB database. It handles user authentication (JWT) and task management.
• Frontend: A modern, responsive UI built with Next.js 14, React, TypeScript, and Tailwind CSS. It provides components for logging in, registering, and managing tasks through a daily list or a calendar view.

Prerequisites

Before you begin, ensure you have the following software installed on your local machine:

• Node.js: v18 or later
• npm: v9 or later (usually comes with Node.js)
• MariaDB: A running instance of the MariaDB server.
• Apache: A running instance of the Apache HTTP Server.

Database Setup

You need to create a database and a dedicated user for the application in MariaDB.

1. Log in to MariaDB: Open your terminal or command prompt and log in to the MariaDB client as the root user.

   mysql -u root -p

2. Create the Database:

   CREATE DATABASE adhd_tool_db;

3. Create a User and Grant Privileges: Replace 'your_db_password' with a secure password of your choice.

   CREATE USER 'your_db_user'@'localhost' IDENTIFIED BY 'your_db_password';
   GRANT ALL PRIVILEGES ON adhd_tool_db.* TO 'your_db_user'@'localhost';
   FLUSH PRIVILEGES;
   EXIT;

Backend Setup

1. Navigate to the server directory:

   cd server

2. Create the environment file: Copy the example .env.example file to a new .env file.

   cp .env.example .env

3. Configure environment variables: Open the .env file and fill in your MariaDB connection details (using the user and password you created above) and set a unique JWT_SECRET.

   DB_HOST=localhost
   DB_PORT=3306
   DB_USER=your_db_user
   DB_PASSWORD=your_db_password
   DB_NAME=adhd_tool_db
   JWT_SECRET=a_very_strong_and_secret_key
   

4. Install dependencies:

   npm install

5. Sync database models: This command will create the users and tasks tables in your database based on the Sequelize models.

   npm run db:sync

6. Start the backend server: The server will run on http://localhost:5000.

   npm run dev

Frontend Setup

1. Navigate to the client directory:

   cd client

2. Create the environment file: Copy the example .env.local.example file to a new .env.local file.

   cp .env.local.example .env.local

   The default content is correct for the Apache reverse proxy setup:

   NEXT_PUBLIC_API_URL=http://localhost/api
   

3. Install dependencies:

   npm install

4. Start the frontend dev server: The frontend will run on http://localhost:3000.

   npm run dev

Apache Configuration (Reverse Proxy)

To serve both the frontend and backend under a single domain (http://localhost), you need to configure Apache as a reverse proxy.

1. Enable required Apache modules: You need to enable proxy and proxy_http. The command to do this varies by operating system.

   • On Ubuntu/Debian:

     sudo a2enmod proxy
     sudo a2enmod proxy_http
     sudo systemctl restart apache2

   • On Windows (XAMPP/WAMP): Open your httpd.conf file and uncomment these lines (remove the #):

     LoadModule proxy_module modules/mod_proxy.so
     LoadModule proxy_http_module modules/mod_proxy_http.so
     

2. Create a Virtual Host Configuration File:

   • On Ubuntu/Debian, create a new file in /etc/apache2/sites-available/:

     sudo nano /etc/apache2/sites-available/adhd-tool.conf

   • On Windows, you can add this directly to your httpd-vhosts.conf file, typically found in C:\xampp\apache\conf\extra\.

3. Add the Virtual Host Configuration: Copy and paste the following configuration into the file you just created. This sets up the reverse proxy.

   <VirtualHost *:80>
       ServerName localhost
   
       # Proxy requests for the API to the backend server
       ProxyPass /api/ http://localhost:5000/api/
       ProxyPassReverse /api/ http://localhost:5000/api/
   
       # Proxy all other requests to the frontend Next.js server
       ProxyPass / http://localhost:3000/
       ProxyPassReverse / http://localhost:3000/
   
       # Required for Next.js WebSocket connection for hot-reloading
       RewriteEngine On
       RewriteCond %{HTTP:Upgrade} =websocket [NC]
       RewriteRule /(.*)           ws://localhost:3000/$1 [P,L]
       RewriteCond %{HTTP:Upgrade} !=websocket [NC]
       RewriteRule /(.*)           http://localhost:3000/$1 [P,L]
   
       ProxyPreserveHost On
       RequestHeader set X-Forwarded-Proto "http"
   </VirtualHost>

4. Enable the Site and Restart Apache:

   • On Ubuntu/Debian:

     sudo a2ensite adhd-tool.conf
     sudo systemctl restart apache2

   • On Windows, simply restart the Apache service from your XAMPP/WAMP control panel.

5. Access the Application: You can now access the entire application by navigating to http://localhost in your web browser. Apache will automatically route traffic to the correct frontend or backend server.