🚀 CodeXPR

AI-Powered Code Explorer & Experience Platform
An intelligent coding assistant with GitHub integration, real-time collaboration, and AI-driven development workflows.

Demo • Documentation • Installation • Contributing

🎯 Vision

CodeXPR transforms how developers work with code by combining:

🤖 AI-Powered Assistance - GPT-4o integration for intelligent coding help
🔗 GitHub Integration - Seamless repository, branch, and PR management
💬 Real-Time Chat - Interactive chat with full code context
📋 Task Management - Track and manage development tasks
⚡ Modern Stack - React + TypeScript + Tailwind CSS + Zite DB

✨ Features

💬 AI Chat Interface Interactive conversations with GPT-4o Code context awareness Syntax highlighting Message history	📦 Repository Browser Browse GitHub repositories View file structure Edit files in-browser Create branches & PRs
📋 Task Management Create & track coding tasks Real-time task status Task logs & file tracking Priority management	🔐 Authentication Magic Link Sign-in Google OAuth Session management Secure token handling

🏗️ Architecture

CodeXPR/
├── 📁 rkix-studio/                    # Main RKix Studio Application
│   ├── src/
│   │   ├── components/                # React UI Components
│   │   │   ├── Layout.tsx
│   │   │   ├── ChatView.tsx
│   │   │   ├── TasksView.tsx
│   │   │   ├── ReposView.tsx
│   │   │   └── ...
│   │   ├── api/                       # Backend API Endpoints
│   │   │   ├── Chat Operations
│   │   │   │   ├── createChat.ts
│   │   │   │   ├── getChats.ts
│   │   │   │   ├── updateChat.ts
│   │   │   │   ├── deleteChat.ts
│   │   │   │   └── createChatWithAI.ts
│   │   │   ├── Message Operations
│   │   │   │   ├── createMessage.ts
│   │   │   │   └── getMessages.ts
│   │   │   ├── Task Operations
│   │   │   │   ├── createTask.ts
│   │   │   │   ├── getTasks.ts
│   │   │   │   ├── getTask.ts
│   │   │   │   ├── updateTask.ts
│   │   │   │   └── deleteTask.ts
│   │   │   └── index.ts               # Centralized exports
│   │   ├── App.tsx                    # Main Router
│   │   └── ...
│   └── README.md                      # RKix Studio Docs
│
├── 📁 apps/                           # Monorepo Applications
│   ├── web/                           # Next.js Frontend
│   ├── api/                           # Fastify Backend
│   └── ...
│
├── 📁 packages/                       # Shared Packages
│   ├── shared/                        # Shared Types & Utils
│   └── ...
│
└── 📄 package.json                    # Workspace Config

🚀 Installation Guide (A-Z)

Phase 1: Environment Setup

Step 1️⃣ - Prerequisites Check

Ensure you have these installed on your system:

# Check Node.js version (need >= 18.0.0)
node --version
# Output should be: v18.x.x or higher

# Check npm version (need >= 9.0.0)
npm --version
# Output should be: 9.x.x or higher

# Check Git is installed
git --version
# Output should be: git version 2.x.x

If any are missing, download:

Node.js & npm: https://nodejs.org/ (LTS recommended)
Git: https://git-scm.com/

Step 2️⃣ - Clone the Repository

# Navigate to your desired directory
cd ~/projects

# Clone the repository
git clone https://github.com/HuynhThuong0711/CodeXPR.git

# Navigate into the project
cd CodeXPR

# Verify you're in the right place
pwd
# Output: /path/to/CodeXPR

Step 3️⃣ - Verify Project Structure

# List main directories to confirm structure
ls -la

# You should see:
# ├── rkix-studio/
# ├── apps/
# ├── packages/
# ├── package.json
# └── README.md

Phase 2: Dependency Installation

Step 4️⃣ - Install Root Dependencies

# Install all workspace dependencies
npm install

# This will:
# ✓ Download packages from npm registry
# ✓ Install dependencies for root project
# ✓ Link workspace packages together
# ✓ Generate node_modules/ folder

# Verify installation
ls -la node_modules/ | head -20

Step 5️⃣ - Install Workspace Dependencies

# Install dependencies for RKix Studio specifically
npm --workspace=rkix-studio install

# Or navigate and install locally
cd rkix-studio
npm install
cd ..

# Verify all packages are installed
npm list --depth=0

Step 6️⃣ - Verify All Dependencies

# Check if all required packages are present
npm ls

# Should show:
# ✓ zod
# ✓ zite-integrations-backend-sdk
# ✓ react
# ✓ react-router-dom
# ✓ tailwind css
# ✓ shadcn/ui

Phase 3: Environment Configuration

Step 7️⃣ - Create Environment Files

# Navigate to RKix Studio
cd rkix-studio

# Create .env.local file for development secrets
cat > .env.local << 'EOF'
# GitHub Configuration
VITE_GITHUB_TOKEN=your_github_token_here
VITE_GITHUB_API_URL=https://api.github.com

# OpenAI Configuration
VITE_OPENAI_API_KEY=your_openai_key_here
VITE_OPENAI_MODEL=gpt-4o

# Zite Database Configuration
VITE_ZITE_DATABASE_ID=your_database_id
VITE_ZITE_API_KEY=your_zite_api_key

# Application Configuration
VITE_APP_ENV=development
VITE_APP_URL=http://localhost:5173
EOF

# Verify file was created
cat .env.local

# Return to root
cd ..

Step 8️⃣ - Update Environment Variables

# Edit the .env.local file with your actual credentials
nano rkix-studio/.env.local
# or use your preferred editor (code, vim, etc.)

# To get your tokens:
# 1. GitHub Token: https://github.com/settings/tokens
# 2. OpenAI Key: https://platform.openai.com/api-keys
# 3. Zite DB: https://zite.cloud/dashboard

Phase 4: Build & Compile

Step 9️⃣ - Build TypeScript

# Compile TypeScript to JavaScript
npm run build

# This will:
# ✓ Check TypeScript types
# ✓ Compile .ts/.tsx files
# ✓ Generate output in dist/ folders
# ✓ Report any errors

# Verify build succeeded
ls -la dist/ 2>/dev/null || echo "Build complete"

Step 🔟 - Lint Code

# Check code quality and style
npm run lint

# This will:
# ✓ Check TypeScript errors
# ✓ Verify ESLint rules
# ✓ Report any issues

# Expected output: "✓ No errors found"

Phase 5: Running the Application

Step 1️⃣1️⃣ - Start Development Server

# Start the development server with hot reload
npm run dev

# Expected output:
# > RKix Studio dev server
# Local:   http://localhost:5173
# Press 'q' to quit

# Or run specific workspace
npm --workspace=rkix-studio run dev

Step 1️⃣2️⃣ - Access the Application

# Open in your browser
open http://localhost:5173
# or
firefox http://localhost:5173
# or
google-chrome http://localhost:5173

# You should see:
# ✓ RKix Studio home page
# ✓ Navigation menu (Chat, Tasks, Repos)
# ✓ Ready for interaction

Step 1️⃣3️⃣ - Test API Endpoints

# In a new terminal, test chat endpoints
curl -X GET http://localhost:5173/api/chats

# Test message creation
curl -X POST http://localhost:5173/api/messages \
  -H "Content-Type: application/json" \
  -d '{"chatId":"123","content":"Hello","role":"User"}'

# Test task creation
curl -X POST http://localhost:5173/api/tasks \
  -H "Content-Type: application/json" \
  -d '{"title":"My Task","context":"Setup project"}'

Phase 6: Advanced Operations

Step 1️⃣4️⃣ - Create Git Feature Branch

# Update main branch first
git pull origin main

# Create a feature branch for your changes
git checkout -b feature/my-feature

# Verify you're on the new branch
git branch

# Output: * feature/my-feature
#           main

Step 1️⃣5️⃣ - Make Changes & Commit

# After making changes, check what changed
git status

# Stage all changes
git add .

# Or stage specific files
git add rkix-studio/src/components/MyComponent.tsx

# Commit with descriptive message
git commit -m "feat: add new chat component with real-time updates"

# Or use conventional commits
git commit -m "feat(chat): add real-time message streaming
- Implement WebSocket connection
- Add message buffering
- Update UI with new messages"

Step 1️⃣6️⃣ - Push & Create Pull Request

# Push your feature branch
git push origin feature/my-feature

# Then go to GitHub and click "Create Pull Request"
# Or use GitHub CLI:
gh pr create --title "Add new chat component" \
             --body "Implements real-time message updates"

# View your PR
gh pr view

Step 1️⃣7️⃣ - Update from Main Branch

# Fetch latest changes from remote
git fetch origin

# Rebase your branch on latest main
git rebase origin/main

# Or merge if you prefer
git merge origin/main

# Resolve any conflicts if they occur
# Then push the update
git push origin feature/my-feature -f

Phase 7: Database & Data Operations

Step 1️⃣8️⃣ - Initialize Database

# Connect to Zite database
npm run db:init

# Or manually configure Zite
export ZITE_API_KEY=your_key
npm run db:migrate

# Verify connection
npm run db:check

# Expected output:
# ✓ Connected to Zite database
# ✓ Collections ready

Step 1️⃣9️⃣ - Seed Sample Data

# Load sample data for testing
npm run db:seed

# This creates:
# ✓ 5 sample chats
# ✓ 20 sample messages
# ✓ 10 sample tasks

# Verify data loaded
npm run db:list chats

Phase 8: Testing & Quality Assurance

Step 2️⃣0️⃣ - Run Tests

# Run all tests
npm run test

# Run tests in watch mode
npm run test:watch

# Run tests with coverage
npm run test:coverage

# Expected output:
# ✓ Chat endpoints: 8 tests passed
# ✓ Message endpoints: 6 tests passed
# ✓ Task endpoints: 10 tests passed
# ✓ Coverage: 85%

Step 2️⃣1️⃣ - Type Check

# Strict TypeScript checking
npm run type-check

# Expected output:
# ✓ No TypeScript errors found
# ✓ All types are valid

Phase 9: Production Build

Step 2️⃣2️⃣ - Build for Production

# Create optimized production build
npm run build:prod

# This will:
# ✓ Minify code
# ✓ Tree-shake unused code
# ✓ Optimize bundle size
# ✓ Generate source maps

# Check build size
ls -lh dist/
# Output: ~250KB (gzipped)

Step 2️⃣3️⃣ - Preview Production Build

# Serve production build locally
npm run preview

# Expected output:
# > preview server running at http://localhost:4173

# Test the production build
open http://localhost:4173

# Press Ctrl+C to stop

Phase 10: Deployment

Step 2️⃣4️⃣ - Deploy to GitHub Pages

# Build and deploy
npm run deploy

# Or manual deployment
npm run build:prod
git add dist/
git commit -m "build: production build $(date)"
git push origin main

# Access at: https://HuynhThuong0711.github.io/CodeXPR

Step 2️⃣5️⃣ - Deploy to Vercel

# Install Vercel CLI
npm install -g vercel

# Deploy with one command
vercel

# Follow prompts to connect GitHub repo
# View deployment at: https://codexpr.vercel.app

📊 Command Reference Table

Command	Description	Usage
`npm install`	Install all dependencies	Initial setup
`npm run dev`	Start development server	Local development
`npm run build`	Build for production	Pre-deployment
`npm run preview`	Preview production build	Testing production build
`npm run lint`	Run linter checks	Code quality check
`npm run test`	Run test suite	Quality assurance
`npm run type-check`	TypeScript type checking	Type validation
`npm run db:init`	Initialize database	Database setup
`npm run db:seed`	Load sample data	Testing data

🔧 Troubleshooting

Issue: `npm install` fails

# Clear npm cache
npm cache clean --force

# Try installing again
npm install

# If still fails, remove node_modules and lock file
rm -rf node_modules package-lock.json
npm install

Issue: Port 5173 already in use

# Find process using the port
lsof -i :5173

# Kill the process
kill -9 <PID>

# Or use different port
npm run dev -- --port 3000

Issue: TypeScript compilation errors

# Check all TS errors
npm run type-check

# Fix auto-fixable errors
npm run lint -- --fix

# Review remaining errors manually

Issue: API connection fails

# Check environment variables are loaded
cat rkix-studio/.env.local

# Verify API is running
curl http://localhost:5173/api/health

# Check browser console for CORS errors
# May need to enable CORS in backend

🤝 Contributing

We welcome contributions! Please follow these steps:

Fork the repository
Create a feature branch (git checkout -b feature/AmazingFeature)
Commit your changes (git commit -m 'Add AmazingFeature')
Push to the branch (git push origin feature/AmazingFeature)
Open a Pull Request

Development Guidelines

Follow TypeScript strict mode
Write tests for new features
Update documentation
Keep commits atomic and descriptive

📁 Project Structure Details

rkix-studio/
├── src/
│   ├── components/          # React Components
│   │   ├── Layout.tsx       # Main layout wrapper
│   │   ├── ChatView.tsx     # Chat interface
│   │   ├── TasksView.tsx    # Tasks dashboard
│   │   └── ...
│   ├── api/                 # API Endpoints (Zite SDK)
│   │   ├── chat/            # Chat operations
│   │   ├── messages/        # Message operations
│   │   ├── tasks/           # Task operations
│   │   └── index.ts         # Centralized exports
│   ├── App.tsx              # React Router config
│   ├── main.tsx             # Entry point
│   └── styles/              # Global styles
├── .env.local               # Environment variables (git-ignored)
├── package.json             # Dependencies
├── tsconfig.json            # TypeScript config
├── vite.config.ts           # Vite bundler config
└── README.md                # Documentation

📚 API Documentation

Chat Endpoints

// Get all chats
GET /api/chats
Response: { chats: Chat[] }

// Create chat
POST /api/chat
Body: { title?: string }
Response: { id, title, createdAt }

// Update chat
PUT /api/chat/:id
Body: { title: string }
Response: { id, title, createdAt }

// Delete chat
DELETE /api/chat/:id
Response: { success: boolean }

Message Endpoints

// Get messages for chat
GET /api/messages/:chatId
Response: { messages: Message[] }

// Create message
POST /api/message
Body: { chatId: string, content: string, role?: string }
Response: { id, content, role, createdAt }

Task Endpoints

// Get all tasks
GET /api/tasks?status=queued
Response: { tasks: Task[] }

// Create task
POST /api/task
Body: { title: string, context?: string }
Response: { id, title, status, createdAt }

// Get single task
GET /api/task/:id
Response: Task

// Update task
PUT /api/task/:id
Body: { status?: string, log?: string }
Response: Task

// Delete task
DELETE /api/task/:id
Response: { success: boolean }

🎓 Learning Resources

React Documentation: https://react.dev
TypeScript Handbook: https://www.typescriptlang.org/docs/
Tailwind CSS: https://tailwindcss.com/docs
Zite Database: https://zite.cloud/docs
GitHub API: https://docs.github.com/en/rest

📞 Support & Community

Issues: GitHub Issues
Discussions: GitHub Discussions
Email: Contact

📄 License

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

MIT License

Copyright (c) 2024 Huỳnh Thưong

Permission is hereby granted, free of charge, to any person obtaining a copy...

🙏 Acknowledgments

OpenAI - GPT-4o integration
GitHub - API and infrastructure
React Community - Amazing ecosystem
Tailwind Labs - Beautiful CSS framework
All Contributors - Making this possible

⭐ Found this helpful? Give us a star!

⭐ Star on GitHub

Made with ❤️ by the CodeXPR Team

Name		Name	Last commit message	Last commit date
Latest commit History 53 Commits
.github/workflows		.github/workflows
public		public
rkix-studio		rkix-studio
scripts		scripts
.gitignore		.gitignore
.npmrc		.npmrc
ARCHITECTURE.md		ARCHITECTURE.md
IMPLEMENTATION.md		IMPLEMENTATION.md
LICENSE		LICENSE
README.md		README.md
SETUP_GUIDE.md		SETUP_GUIDE.md
index.html		index.html
package.json		package.json
pnpm-workspace.yaml		pnpm-workspace.yaml

Folders and files

Latest commit

History

Repository files navigation

🚀 CodeXPR

🎯 Vision

✨ Features

💬 AI Chat Interface

📦 Repository Browser

📋 Task Management

🔐 Authentication

🏗️ Architecture

🚀 Installation Guide (A-Z)

Phase 1: Environment Setup

Step 1️⃣ - Prerequisites Check

Step 2️⃣ - Clone the Repository

Step 3️⃣ - Verify Project Structure

Phase 2: Dependency Installation

Step 4️⃣ - Install Root Dependencies

Step 5️⃣ - Install Workspace Dependencies

Step 6️⃣ - Verify All Dependencies

Phase 3: Environment Configuration

Step 7️⃣ - Create Environment Files

Step 8️⃣ - Update Environment Variables

Phase 4: Build & Compile

Step 9️⃣ - Build TypeScript

Step 🔟 - Lint Code

Phase 5: Running the Application

Step 1️⃣1️⃣ - Start Development Server

Step 1️⃣2️⃣ - Access the Application

Step 1️⃣3️⃣ - Test API Endpoints

Phase 6: Advanced Operations

Step 1️⃣4️⃣ - Create Git Feature Branch

Step 1️⃣5️⃣ - Make Changes & Commit

Step 1️⃣6️⃣ - Push & Create Pull Request

Step 1️⃣7️⃣ - Update from Main Branch

Phase 7: Database & Data Operations

Step 1️⃣8️⃣ - Initialize Database

Step 1️⃣9️⃣ - Seed Sample Data

Phase 8: Testing & Quality Assurance

Step 2️⃣0️⃣ - Run Tests

Step 2️⃣1️⃣ - Type Check

Phase 9: Production Build

Step 2️⃣2️⃣ - Build for Production

Step 2️⃣3️⃣ - Preview Production Build

Phase 10: Deployment

Step 2️⃣4️⃣ - Deploy to GitHub Pages

Step 2️⃣5️⃣ - Deploy to Vercel

📊 Command Reference Table

🔧 Troubleshooting

Issue: npm install fails

Issue: Port 5173 already in use

Issue: TypeScript compilation errors

Issue: API connection fails

🤝 Contributing

Development Guidelines

📁 Project Structure Details

📚 API Documentation

Chat Endpoints

Message Endpoints

Task Endpoints

🎓 Learning Resources

📞 Support & Community

📄 License

🙏 Acknowledgments

⭐ Found this helpful? Give us a star!

About

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Uh oh!

Contributors

Uh oh!

Languages

Issue: `npm install` fails

Packages