ChatFolio (AI-Powered Resume Builder)

Client‑first, privacy‑respecting resume builder with an integrated AI chat assistant for iterative resume creation.

Built with Next.js 13 (App Router), React 18, TypeScript, Tailwind CSS, and Redux Toolkit — all data stays local in the browser.
Optional FastAPI backend enables Gemini / OpenRouter model access for structured resume population.

Quick Start · Features · AI Chatbox · Architecture · Structure · Roadmap

---

Table of Contents

• Table of Contents
• Overview
• Features
• Screenshots
• Quick Start
  • Prerequisites
  • Frontend Only
  • Backend (FastAPI for AI models)
• AI Chatbox
  • JSON Contract (Example)
• State Management
• Architecture
• Environment Variables
• Folder Structure
• Development Scripts
• Troubleshooting
• Roadmap
• Contributing
• License

---

Overview

ChatFolio is a modern, local‑first resume builder that pairs a structured editing experience with an AI assistant. The AI iteratively asks for resume details (Profile → Summary → Work → Education → Skills → Projects) and can generate structured JSON updates applied directly to the Redux store. All resume data persists to localStorage; nothing is uploaded unless you invoke external model APIs via the backend.

Features

• Local‑First Privacy: Resume data never leaves the browser unless you explicitly use AI endpoints.
• Modern UI: Responsive layout, theme‑aware bubbles, autosizing textarea, side panel chat toggle.
• AI Chat Assistant: Multi‑turn model dialogue (Gemini / OpenRouter) with progressive section capturing.
• Structured Resume Population: AI responses can emit JSON action: updateSection or full setResume payloads.
• Redux Toolkit State: Central slice for resume sections; bulk updates via setResume action.
• Persistence: Automatic save to localStorage (chatfolio-state) and chat history key (chatfolio-ai-chat-v1).
• PDF Generation: Client-side rendering via React-PDF (custom sections & themes).
• Import / Parse: Existing resume PDF can be parsed to pre-fill fields (parser UI optionally hidden).
• Model Selection: Choose among configured models including an OpenRouter free model (openai/gpt-oss-20b:free).
• Clear / Save / Export: Download chat as JSON, Clear messages, Clear All resets resume state.

Screenshots

(Add screenshots or animated GIFs here once available: AI chat panel, resume form, PDF preview.)

Quick Start

Prerequisites

• Node.js 18+
• npm 9+
• (Optional for AI) Python 3.10+ and a valid Gemini / OpenRouter API key.

Frontend Only

git clone https://github.com/Ashwini-169/chatfoli-.git
cd chatfoli-
npm install
npm run dev

Visit: http://localhost:3000

Backend (FastAPI for AI models)

cd backend
python -m venv .venv
source .venv/Scripts/activate  # Windows PowerShell: .venv\Scripts\Activate.ps1
pip install -r requirements.txt
uvicorn main:app --reload --host 127.0.0.1 --port 8000

Frontend expects endpoints at /api/chat and /api/openrouter proxied or configured (see backend docs).

AI Chatbox

The component src/app/components/AIChatbox.tsx handles:

• Message state (user + assistant)
• Persistence to localStorage
• Autosize input + auto-scroll
• Model selection and OpenRouter toggle
• Parsing AI JSON blocks and dispatching Redux actions (setResume / section updates)
• Clear / Save / Clear All controls

JSON Contract (Example)

{
	"action": "updateSection",
	"section": "profile",
	"data": {
		"name": "Jane Doe",
		"email": "jane@example.com",
		"location": "Berlin, DE",
		"summary": "Product-focused software engineer..."
	}
}

The chatbox attempts to detect such JSON inside assistant messages and merges them using Redux.

State Management

• Redux slice: src/app/lib/redux/resumeSlice.ts
• Types: src/app/lib/redux/types.ts
• Local persistence hooks in resume-builder/page.tsx (useSetInitialStore, useSaveStateToLocalStorageOnChange).
• Bulk updates: dispatch(setResume(resumeObject)).
• Single field update: dispatch(changeProfile({ field: 'name', value })).

Architecture

High-Level Flow:

AIChatbox (client) --POST--> /api/chat or /api/openrouter (server) --calls--> Gemini/OpenRouter
			 |                                                       |
			 |<------------------- JSON + message -------------------|
			 |--> parse structured data --> Redux store --> Forms update --> PDF

Key Principles:

• Keep conversation ephemeral; only resume state persists.
• AI prompts steer logical section-by-section data gathering.
• Separation of concerns: Chat state ≠ Resume state.

Environment Variables

Create .env.local (frontend) and .env (backend) as needed.

Variable	Scope	Description
GEMINI_API_KEY	Backend	Server-side Gemini key (never expose client-side).
OPENROUTER_API_KEY	Backend	Optional for OpenRouter paid models.
NEXT_PUBLIC_*	Frontend	Only safe, non-secret config if required.

Folder Structure

backend/          # FastAPI server, model integration
public/           # Static assets, fonts, sample resumes
src/app/          # Next.js App Router entry
	components/     # Reusable UI + AIChatbox + Resume rendering
	home/           # Landing page sections
	lib/            # Utilities, Redux slices, hooks, parsing logic
	resume-builder/ # Main resume builder page
	resume-parser/  # (Optional) Resume PDF parser interface

Development Scripts

Script	Description
npm run dev	Start Next.js dev server.
npm run build	Production build.
npm run start	Start production server.
npm test	Run Jest tests (if configured).

Troubleshooting

• Missing AI features: Ensure backend running & GEMINI_API_KEY set.
• Large file push errors: Avoid committing .next/ or node_modules/; confirm .gitignore entries.
• Chat JSON not applied: Verify response contains parsable action and section fields.
• Fonts not loading: Clear cache or check public/fonts/* paths.

Roadmap

• Multi-language resume templates
• Inline AI editing suggestions
• Metrics: keyword density / ATS scoring
• Export to DOCX format
• Shareable encrypted cloud sync (opt-in)

Contributing

Pull requests welcome! Please:

1. Fork the repo
2. Create a feature branch
3. Add tests if modifying logic
4. Submit PR with clear description

License

This project is under the terms of the MIT License. See LICENSE for details.

---

Made with focus on privacy, usability, and structured AI assistance.