Interview Helper

A React application to help manage interview questions and knowledge using Google Sheets as a backend. Built with React, TypeScript, and integrated with multiple AI services for AI-powered responses.

Features

📝 Interview question management
📚 Knowledge tracking system
🤖 AI-powered answers using ChatGPT, Gemini, Mistral
🌐 Multi-language support (English/Vietnamese)
🎨 Dark/Light theme
📊 Google Sheets integration
🔄 Real-time updates

Prerequisites

Before you begin, ensure you have:

Node.js (version 20 or higher)
npm (comes with Node.js)
A Google Cloud Platform account
A Google Sheet for storing data

Installation

Clone the repository:

git clone https://github.com/huyduc1602/interview.git
cd interview

Install dependencies:

npm install

Set up environment variables: Create a .env.local file in the root directory:

VITE_GOOGLE_SHEET_API_KEY=your_google_sheet_api_key
VITE_SPREADSHEET_ID=your_spreadsheet_id
VITE_OPENCHAT_API_KEY=your_chatgpt_api_key
VITE_GEMINI_API_KEY=your_gemini_api_key
VITE_MISTRAL_API_KEY=your_mistral_api_key

Google Sheets Setup

Create a Google Sheet with two tabs:
- "Danh mục kiến thức" (Knowledge Categories)
- "Câu hỏi phỏng vấn" (Interview Questions)
Google Cloud Platform setup:
- Visit Google Cloud Console
- Create a new project
- Enable Google Sheets API
- Create credentials (API key)
- Add your domain to authorized origins
Sheet structure:
- Knowledge tab columns: Category, Content, Status
- Questions tab columns: Category, Question, Answer

Available Scripts

# Start development server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

# Run ESLint
npm run lint

# Get Google OAuth refresh token
npm run get-token

Project Structure

interview/
├── public/                     # Static files
├── scripts/                    # Utility scripts
├── src/
│   ├── assets/                 # Static assets (images, fonts, etc.)
│   ├── components/             # Reusable UI components
│   │   ├── auth/               # Authentication components
│   │   ├── icons/              # Icon components
│   │   ├── ui/                 # UI components (buttons, inputs, etc.)
│   ├── hooks/                  # Custom hooks
│   ├── layouts/                # Layout components
│   ├── locales/                # i18n translations
│   ├── pages/                  # Page components
│   │   ├── InterviewQuestions/ # Interview Questions page components
│   │   ├── KnowledgeBase/      # Knowledge Base page components
│   ├── services/               # API services
│   ├── store/                  # Redux store
│   │   ├── actions/            # Redux actions
│   │   ├── reducers/           # Redux reducers
│   │   ├── selectors/          # Redux selectors
│   │   ├── slice/              # Redux slices
│   ├── styles/                 # Global styles
│   ├── types/                  # TypeScript types
│   ├── utils/                  # Utility functions
│   ├── App.tsx                 # Main App component
│   ├── index.tsx               # Entry point
└── [README.md](http://_vscodecontentref_/2)                   # Project documentation

Environment Variables

Variable	Description	Required
`VITE_GOOGLE_SHEET_API_KEY`	Google Sheets API key	Yes
`VITE_SPREADSHEET_ID`	ID of your Google Sheet	Yes
`VITE_OPENAI_API_KEY`	OpenAI API key	Yes
`VITE_OPENCHAT_API_KEY`	OpenChat API key	Yes
`VITE_GEMINI_API_KEY`	Gemini API key	Yes
`VITE_MISTRAL_API_KEY`	Mistral API key	Yes
`VITE_PERFLEXITY_API_KEY`	Perflexity API key	Yes
`VITE_GOOGLE_CLIENT_ID`	Google OAuth Client ID	Yes
`VITE_GOOGLE_CLIENT_SECRET`	Google OAuth Client Secret	Yes
`VITE_GOOGLE_REFRESH_TOKEN`	Google OAuth Refresh Token	Yes
`VITE_GITHUB_CLIENT_ID`	GitHub OAuth Client ID	Yes
`VITE_SUPABASE_URL`	Supabase URL	Yes
`VITE_SUPABASE_ANON_KEY`	Supabase Anonymous Key	Yes
`VITE_PORT`	Development server port	No

Repository Secrets for Deployment

For GitHub Actions deployment, add these secrets to your repository:

Secret Name	Description	Required
`OPENAI_API_KEY`	OpenAI API key for AI responses	Yes
`GEMINI_API_KEY`	Google Gemini API key for AI responses	Yes
`MISTRAL_API_KEY`	Mistral AI API key for AI responses	Yes
`OPENCHAT_API_KEY`	OpenChat API key for AI responses	Yes
`PERFLEXITY_API_KEY`	Perflexity API key for AI responses	Yes
`GOOGLE_SHEET_API_KEY`	API key for Google Sheets integration	Yes
`GOOGLE_CLIENT_ID`	Google OAuth Client ID	Yes
`GOOGLE_CLIENT_SECRET`	Google OAuth Client Secret	Yes
`GOOGLE_REFRESH_TOKEN`	Google OAuth Refresh Token	Yes
`SUPABASE_URL`	Supabase project URL	Yes
`SUPABASE_ANON_KEY`	Supabase anonymous key	Yes
`GITHUB_TOKEN`	Automatically provided by GitHub Actions	Yes
`BASE_URL`	Base URL path for deployment (e.g., '/interview/')	Yes

Development

Start the development server:

npm run dev

Open http://localhost:5173
Make changes and see them reflected in real-time

Building for Production

Create production build:

npm run build

Preview the build:

npm run preview

Deployment

This project uses GitHub Actions for CI/CD. On push to main:

Tests are run
Build is created
Deployment to GitHub Pages

Contributing

Fork the repository
Create your feature branch:

git checkout -b feature/amazing-feature

Commit your changes:

git commit -m 'Add some amazing feature'

Push to the branch:

git push origin feature/amazing-feature

Open a Pull Request

Troubleshooting

Common issues and solutions:

API Key errors:
- Verify API key in .env.local
- Check Google Cloud Console for restrictions
Sheet access issues:
- Ensure sheet is shared properly
- Verify spreadsheet ID
Build errors:
- Clear node_modules: rm -rf node_modules
- Reinstall: npm install

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgments

React + TypeScript
Vite
Tailwind CSS
shadcn/ui
Redux Toolkit
Google Sheets API
OpenAI API
Gemini API
Mistral API
Lucide Icons
i18next
React Router
JSZip
FileSaver.js