Building an AI-Powered Task Planner: A Full-Stack Journey with Spring Boot, React, and OpenAI

Screenshots are attached at the end of the story.

Github Repo:

Frontend — https://github.com/kiranc2001/task-planner-frontend Backend — https://github.com/kiranc2001/task-planner-backend

As developers, we all juggle endless to-do lists, but who hasn’t wished for an AI sidekick to prioritize and schedule them intelligently? That’s exactly what inspired AI Task Planner — a personal productivity app that turns chaos into a smart, actionable plan. In this post, I’ll walk you through building it from scratch: a robust Spring Boot backend with PostgreSQLand OpenAI integration, paired with a responsive React frontend featuring calendars, charts, and theme toggles.

Whether you’re a full-stack newbie or a seasoned dev looking for a weekend project, this guide covers everything — code snippets, challenges, and deployment tips. By the end, you’ll have a working app you can deploy and customize. Let’s dive in!

Why Build This? The Problem It Solves

Traditional task apps (Todoist, Trello) are great for listing, but they lack intelligence. AI Task Planner uses OpenAI’s GPT to analyze your tasks — factoring in priorities, due dates, and descriptions — to suggest optimized schedules like “Tackle high-priority ‘Buy Groceries’ first thing tomorrow morning, then slot ‘Gym Workout’ for evening recovery.”

Key goals:

• Simple Auth: Signup/signin with OTP-based forgot password (no JWT for personal use).
• Task CRUD: Add/edit/delete with filters.
• AI Magic: One-click “Get Smart Schedule” for recommendations.
• Visuals: Calendar view (FullCalendar) and reports (Chart.js pie charts).
• Extras: Email reminders (Spring Mail cron), responsive UI (Material-UI), dark/light theme.

Built for personal use (userId in paths), it’s lightweight yet powerful — perfect for portfolios or daily drivers.

Tech Stack Breakdown

• Backend: Spring Boot 3.2.0 (Java 21), JPA/Hibernate for ORM, PostgreSQL for DB, OpenAI Java Client 4.7.1 for AI, Spring Mail for emails, BCrypt for hashing.
• Frontend: React 18 + TypeScript, Material-UI for UI, Axios for API calls, React Router for navigation, FullCalendar for calendar, Chart.js for analytics.
• Tools: IntelliJ (backend), VS Code (frontend with ESLint/Prettier), Postman (API testing), pgAdmin(DB).

Total time: 8–10 hours (4 backend, 4 frontend).

Backend: The Brain (Spring Boot Setup)

Step 1: Project Creation

In IntelliJ, create a Spring Initializr project:

• SDK: Java 21.
• Dependencies: Web, Data JPA, Validation, Mail, Scheduler, PostgreSQL Driver, Lombok.
• Add OpenAI: <dependency><groupId>com.openai</groupId><artifactId>openai-java</artifactId><version>4.7.1</version></dependency>.

Step 2: Database & Config

• Create DB: CREATE DATABASE task_planner_db;.
• application.properties:

properties

• server.port=9000 spring.datasource.url= <postgre_url/database_name>
• spring.datasource.username=postgres
• spring.datasource.password=yourpass
• spring.jpa.hibernate.ddl-auto=update
• openai.api.key=sk-your-key
• spring.mail.host=smtp.gmail.com
• spring.mail.username=your-email
• spring.mail.password=app-pass

Step 3: Core Logic

• Auth Service: BCrypt hash passwords; OTP in-memory Map (expires 10min).
• Task Service: CRUD with userId validation.
• AI Service: Prompt OpenAI with tasks for scheduling suggestions (GPT-3.5-turbo).
• Analytics Service: JPQL counts for total/completed/pending.
• Notification Service: @Scheduled cron checks due tasks <24hrs, emails reminders.
• Controllers: @RestController with @Valid DTOs, path params for userId, @CrossOrigin(“*”).
• Exceptions: Custom (UserNotFoundException, etc.) + GlobalHandler for meaningful messages (e.g., 400 “Invalid email”).

Step 4: Run & Test

• Run: IntelliJ > Run Application.
• Postman Test: Signup (POST /api/users/signup) → Get ID=1. Signin → Create task (POST /api/tasks/1). AI (POST /api/ai/suggestions/1 with tasks array) → { “recommendations”: “Prioritize HIGH tasks…” }.

Challenges: Fixed HQL syntax for due-date queries (native PostgreSQL for portability); handled lazy loading in cron with @Transactional.

Frontend: The Face (React Setup)

Step 1: Project Creation

npx create-react-app frontend — template typescript > Install MUI/Axios/Router/FullCalendar/Chart.js.

Step 2: State & Routing

• Contexts: UserContext (localStorage auth), ThemeContext (MUI dark/light toggle).
• App.tsx: Router wraps pages; nav bar with links/logout (immediate redirect).

Step 3: Pages & Components

• Login.tsx: Toggle signup/signin form; Axios calls with error display (e.g., “Invalid password”).
• Dashboard.tsx: Fetches tasks, filters (priority/date), grid of TaskCards (edit/delete).
• AddTask.tsx: Form for create/edit (dropdowns for priority/status, datetime-local).
• AiSuggestions.tsx: Fetches tasks, “Get Suggestions” button → OpenAI text display.
• Calendar.tsx: FullCalendar with task events (color by priority).
• Reports.tsx: Pie chart (completed vs. pending) + percentage text.
• TaskCard.tsx: Card with chips, edit/delete icons.

Step 4: API Layer

• api.ts: Axios instance with interceptor (replaces {userId} from localStorage; guards missing ID with redirect).
• Calls: authAPI.signin(data) → User; taskAPI.list() → Task[]; etc.

Step 5: Run & Test

• npm start (port 3000).
• Flow: Login → Dashboard (list/add tasks) → AI (recommendations) → Calendar (events) → Reports (chart) → Logout.

Challenges: Fixed race condition (sync localStorage save + delay navigate); typed Axios responses for TS; linted with ESLint/Prettier.

Integration & Polish

• Frontend-Backend Link: Axios baseURL points to 9000; userId from localStorage.
• Responsive: MUI grids/breakpoints (mobile-friendly nav, cards).
• Error Handling: Specific messages (e.g., 401 “Invalid password”); console logs for debug.
• Notifications: Backend cron; frontend shows in DB (expand to in-app if needed).

Challenges & Lessons

• Lazy Loading in Cron: @Transactional fixed Hibernate proxy errors.
• HQL vs. Native: Used native for PostgreSQL due-date queries (portable with profiles).
• React State Race: Sync localStorage + delay prevented ID missing.
• Lint Wars: Pinned ESLint versions for CRA compatibility.
• AI Prompting: Fine-tuned OpenAI prompt for concise schedules — experiment!

SCREENSHOTS

1. Sign up page

2. Sign in page

3. Dashboard page

4. Add Task page

5. Edit Task page

6. AI Recommendations page

7. Calendar page

8. Reports/Analytics page

9. Hashing proof

Password storing in Hash

10. Task reminder email

11. Password Reset OTP

Repo & Contacts

Frontend — https://github.com/kiranc2001/task-planner-frontend Backend — https://github.com/kiranc2001/task-planner-backend

LinkedIn — https://linkedin.com/in/kiran-c-gowda-2507021b9 Email — kirangowda0212@gmail.com