resumeai-saas — Next.js 作品集模板

SHA-256: 175e9e092839703aa0506f69f092d71d804a0f7b986d9bee1c1b78cbcc28fa16

2026-10-14T22:43:36.122Z

# ResumeAI

### AI-powered resume builder for ATS-friendly careers

Build, refine, and export professional resumes in minutes. ResumeAI combines a polished builder, six distinct templates, Google Gemini rewrites, and browser-based PDF export — with drafts saved locally on your device.

[![Live Demo](https://img.shields.io/badge/Live%20Demo-Vercel-000000?style=for-the-badge&logo=vercel&logoColor=white)](https://resumeai-saas-gray.vercel.app)
[![GitHub stars](https://img.shields.io/github/stars/Muhammad-Mansha/resumeai-saas?style=for-the-badge&logo=github)](https://github.com/Muhammad-Mansha/resumeai-saas/stargazers)

[![Next.js](https://img.shields.io/badge/Next.js-16-black?style=flat-square&logo=nextdotjs&logoColor=white)](https://nextjs.org/)
[![React](https://img.shields.io/badge/React-19-61DAFB?style=flat-square&logo=react&logoColor=black)](https://react.dev/)
[![TypeScript](https://img.shields.io/badge/TypeScript-5-3178C6?style=flat-square&logo=typescript&logoColor=white)](https://www.typescriptlang.org/)
[![Tailwind CSS](https://img.shields.io/badge/Tailwind%20CSS-v4-06B6D4?style=flat-square&logo=tailwindcss&logoColor=white)](https://tailwindcss.com/)
[![Google Gemini](https://img.shields.io/badge/Google%20Gemini-AI-8E75B2?style=flat-square&logo=googlegemini&logoColor=white)](https://ai.google.dev/)
[![Vercel](https://img.shields.io/badge/Deployed%20on-Vercel-000000?style=flat-square&logo=vercel&logoColor=white)](https://resumeai-saas-gray.vercel.app)

**Live demo:** [https://resumeai-saas-gray.vercel.app](https://resumeai-saas-gray.vercel.app)  
**Repository:** [Muhammad-Mansha/resumeai-saas](https://github.com/Muhammad-Mansha/resumeai-saas)

---

## Hero

<p align="center">
  <a href="https://resumeai-saas-gray.vercel.app">
    <img src="./public/og.svg" alt="ResumeAI — AI-powered resume builder" width="920" />
  </a>
</p>

<p align="center">
  <a href="https://resumeai-saas-gray.vercel.app"><strong>Open Live Demo →</strong></a>
  &nbsp;·&nbsp;
  <a href="https://resumeai-saas-gray.vercel.app/builder"><strong>Launch Builder →</strong></a>
</p>

---

## Features

- **Marketing landing page** — product story, templates gallery, FAQ, and clear CTAs into the builder
- **Full resume builder** — personal info, summary, experience, education, skills, and projects
- **Live A4 preview** — edits update the resume sheet instantly
- **Six distinct templates** — Modern, Professional, Minimal, Executive, Creative, and Developer
- **Local draft autosave** — resume content persisted in `localStorage`
- **Template preference memory** — selected layout restored after refresh
- **Landing → builder deep links** — open a template with `/builder?template=developer`
- **Print / PDF export** — A4 print styles that hide UI chrome and keep the resume sheet clean
- **Responsive UI** — usable on desktop and mobile, built with Tailwind CSS

---

## AI Features

ResumeAI uses **Google Gemini** on the server to improve professional summary wording.

| Capability | Details |
| --- | --- |
| **Improve with AI** | Rewrites the Professional Summary into polished, ATS-friendly prose |
| **Experience context** | Sends current experience text as optional context (facts are preserved) |
| **Server-only key** | `GEMINI_API_KEY` never ships to the browser |
| **Safe failure modes** | Clear errors when the key is missing or the model request fails |
| **Works without AI** | Editing, templates, preview, persistence, and PDF still work offline of Gemini |

Model used by `/api/improve`: `gemini-3.6-flash` (configured in `src/app/api/improve/route.ts`).

Get an API key from [Google AI Studio](https://aistudio.google.com/apikey).

---

## Resume templates

Each template uses the **same resume data** with a **different layout hierarchy** — not a simple color swap.

| Template | Layout focus | Best for |
| --- | --- | --- |
| **Modern** | Clean single-column, underlined sections | General professionals |
| **Professional** | Centered letterhead + date rail timeline | Finance, consulting, operations |
| **Minimal** | Editorial whitespace, light typography | Highly readable, clean resumes |
| **Executive** | Bold letterhead, leadership-first hierarchy | Managers and senior leads |
| **Creative** | Dark sidebar + main content column | Designers and creative roles |
| **Developer** | Skills + projects elevated at the top | Software engineers |

Try them live:

- [Modern](https://resumeai-saas-gray.vercel.app/builder?template=modern)
- [Professional](https://resumeai-saas-gray.vercel.app/builder?template=professional)
- [Minimal](https://resumeai-saas-gray.vercel.app/builder?template=minimal)
- [Executive](https://resumeai-saas-gray.vercel.app/builder?template=executive)
- [Creative](https://resumeai-saas-gray.vercel.app/builder?template=creative)
- [Developer](https://resumeai-saas-gray.vercel.app/builder?template=developer)

---

## Screenshots

<p align="center">
  <img src="./public/og.svg" alt="ResumeAI Open Graph preview" width="720" />
</p>

| Surface | What to open |
| --- | --- |
| **Landing page** | [resumeai-saas-gray.vercel.app](https://resumeai-saas-gray.vercel.app) |
| **Resume builder** | [ /builder ](https://resumeai-saas-gray.vercel.app/builder) |
| **Brand / OG asset** | [`public/og.svg`](./public/og.svg) |
| **App icon** | [`public/icon.svg`](./public/icon.svg) |

> Tip: capture PNG screenshots of the landing page and builder (Modern + Creative + Developer) into a `docs/screenshots/` folder and replace the placeholders above for an even stronger GitHub presence.

---

## Installation

### Prerequisites

- Node.js 20+ (recommended)
- npm 10+

### Setup

```bash
git clone https://github.com/Muhammad-Mansha/resumeai-saas.git
cd resumeai-saas
npm install
cp .env.example .env.local
```

Edit `.env.local` and add your Gemini key:

```bash
GEMINI_API_KEY=your-gemini-api-key
```

Start the development server:

```bash
npm run dev
```

Open [http://localhost:3000](http://localhost:3000).

### Scripts

| Command | Description |
| --- | --- |
| `npm run dev` | Start the development server |
| `npm run build` | Create an optimized production build |
| `npm run start` | Serve the production build |
| `npm run lint` | Run ESLint |

### Deploy on Vercel

1. Import [Muhammad-Mansha/resumeai-saas](https://github.com/Muhammad-Mansha/resumeai-saas) in [Vercel](https://vercel.com).
2. Framework preset: **Next.js**.
3. Add environment variables (see below).
4. Deploy.

Current production deployment: [https://resumeai-saas-gray.vercel.app](https://resumeai-saas-gray.vercel.app)

---

## Environment variables

| Variable | Required | Scope | Description |
| --- | --- | --- | --- |
| `GEMINI_API_KEY` | Yes for AI | **Server only** | Google Gemini API key for `POST /api/improve` |
| `NEXT_PUBLIC_SITE_URL` | No | Public | Canonical site URL for metadata / Open Graph |

`.env.example` contains:

```bash
GEMINI_API_KEY=
```

**Security**

- Never prefix `GEMINI_API_KEY` with `NEXT_PUBLIC_`.
- The key is read only inside `src/app/api/improve/route.ts`.
- Client code calls `/api/improve`; the secret stays on the server.
- Without a key, the rest of the app still works; Improve with AI returns a clear configuration error.

---

## Project structure

```text
src/
  app/                 # App Router pages + /api/improve
  components/
    builder/           # Builder shell, forms, template selector
    resume/            # Resume template layouts + renderer
    landing/           # Marketing sections
    layout/            # Site / builder chrome
    ui/                # Shared UI primitives
  constants/           # Site config, sample resume, template catalog
  hooks/               # Client resume store (localStorage)
  lib/                 # Storage, formatting, AI client helpers
  styles/              # Global tokens + A4 print CSS
  types/               # Shared TypeScript types
public/
  favicon.svg
  icon.svg
  og.svg
```

---

## Future improvements

- Section-level AI rewrites for experience and project bullets
- Account sync and multi-device cloud drafts
- Additional templates and denser visual customization
- Server-generated PNG Open Graph images
- Cover letter companion flow
- Optional ATS keyword analysis
- One-click server PDF generation (in addition to browser print)

---

## License

MIT License

Copyright (c) 2026 Muhammad Mansha

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

---

<p align="center">
  Built with Next.js · React · TypeScript · Tailwind CSS · Google Gemini
  <br />
  <a href="https://resumeai-saas-gray.vercel.app">Live Demo</a>
  ·
  <a href="https://github.com/Muhammad-Mansha/resumeai-saas">GitHub</a>
</p>