Got basics of FE/BE running. BE passes tests

.gitignore

@@ -0,0 +1,67 @@
+# Python
+__pycache__/
+*.py[cod]
+*$py.class
+*.so
+.Python
+build/
+develop-eggs/
+dist/
+downloads/
+eggs/
+.eggs/
+lib/
+lib64/
+parts/
+sdist/
+var/
+wheels/
+*.egg-info/
+.installed.cfg
+*.egg
+.pytest_cache/
+.coverage
+htmlcov/
+.env
+.venv
+env/
+venv/
+ENV/
+.uv/
+
+# Node/React
+node_modules/
+coverage/
+build/
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# IDEs and editors
+.idea/
+.vscode/
+*.swp
+*.swo
+.project
+.classpath
+.settings/
+*.sublime-workspace
+*.sublime-project
+
+# OS generated files
+.DS_Store
+.DS_Store?
+._*
+.Spotlight-V100
+.Trashes
+ehthumbs.db
+Thumbs.db
+
+# Docker
+.docker/
+*.log 

Dockerfile

@@ -0,0 +1,44 @@
+# Use Node.js image for building frontend
+FROM node:20-slim AS frontend-builder
+
+WORKDIR /app/frontend
+
+# Copy package files first for better caching
+COPY frontend/package*.json ./
+RUN npm cache clean --force && \
+    npm install --legacy-peer-deps --force
+
+# Copy only the necessary frontend files
+COPY frontend/public ./public
+COPY frontend/src ./src
+COPY frontend/tsconfig.json .
+COPY frontend/jest.config.js .
+COPY frontend/.env .
+
+# Show more verbose output during build
+RUN npm run build --verbose
+
+# Use Python image with uv pre-installed
+FROM ghcr.io/astral-sh/uv:python3.12-bookworm-slim
+
+WORKDIR /app
+
+# Copy backend code
+COPY backend/ backend/
+COPY pyproject.toml .
+
+# Install backend dependencies and make pytest available
+RUN uv sync && uv pip install .
+ENV PATH="/root/.local/bin:/root/.uv/venv/bin:${PATH}"
+
+# Copy frontend build
+COPY --from=frontend-builder /app/frontend/build /app/frontend/build
+
+# Add uv's bin directory to PATH
+ENV PATH="/app/.venv/bin:/root/.local/bin:/root/.uv/venv/bin:${PATH}"
+
+# Expose port
+EXPOSE 8000
+
+# Run the application
+CMD ["uvicorn", "backend.app.main:app", "--host", "0.0.0.0", "--port", "8000"] 

backend/app/__init__.py

@@ -0,0 +1 @@
+# Empty file to make the directory a Python package 

backend/app/main.py

@@ -0,0 +1,38 @@
+from fastapi import FastAPI
+from fastapi.middleware.cors import CORSMiddleware
+from pydantic import BaseModel
+import random
+
+app = FastAPI()
+
+# Add CORS middleware
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],  # In production, replace with specific origins
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+class UrlInput(BaseModel):
+    url: str
+
+class UserQuery(BaseModel):
+    user_query: str
+
+@app.post("/crawl/")
+async def crawl_documentation(input_data: UrlInput):
+    print(f"Received url {input_data.url}")
+    return {"status": "received"}
+
+@app.post("/problems/")
+async def generate_problems(query: UserQuery):
+    # For MVP, returning random sample questions
+    sample_questions = [
+        "What is the main purpose of this framework?",
+        "How do you install this tool?",
+        "What are the key components?",
+        "Explain the basic workflow",
+        "What are the best practices?"
+    ]
+    return {"Problems": sample_questions} 

backend/tests/test_quiz.py

@@ -0,0 +1,21 @@
+from fastapi.testclient import TestClient
+from backend.app.main import app
+
+client = TestClient(app)
+
+def test_crawl_endpoint():
+    response = client.post(
+        "/crawl/",
+        json={"url": "https://example.com"}
+    )
+    assert response.status_code == 200
+    assert response.json() == {"status": "received"}
+
+def test_problems_endpoint():
+    response = client.post(
+        "/problems/",
+        json={"user_query": "test query"}
+    )
+    assert response.status_code == 200
+    assert "Problems" in response.json()
+    assert len(response.json()["Problems"]) == 5 

frontend/jest.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+  preset: 'ts-jest',
+  testEnvironment: 'jsdom',
+  setupFilesAfterEnv: ['<rootDir>/src/setupTests.ts'],
+  moduleNameMapper: {
+    '\\.(css|less|scss|sass)$': 'identity-obj-proxy',
+  },
+};

frontend/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "simplify-frontend",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@emotion/react": "^11.11.3",
+    "@emotion/styled": "^11.11.0",
+    "@mui/material": "^5.15.10",
+    "@testing-library/jest-dom": "^6.4.2",
+    "@testing-library/react": "^14.2.1",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/jest": "^29.5.12",
+    "@types/node": "^20.11.19",
+    "@types/react": "^18.2.56",
+    "@types/react-dom": "^18.2.19",
+    "ajv": "^8.12.0",
+    "ajv-keywords": "^5.1.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-scripts": "5.0.1",
+    "typescript": "^4.9.5",
+    "web-vitals": "^3.5.2"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "CI=true react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

frontend/public/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta name="description" content="Simplify - Quiz Generator" />
+    <title>Simplify</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+  </body>
+</html> 

frontend/public/manifest.json

@@ -0,0 +1,8 @@
+{
+  "short_name": "Simplify",
+  "name": "Simplify Quiz Generator",
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+} 

frontend/public/robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Disallow: 

frontend/src/App.tsx

@@ -0,0 +1,35 @@
+import { Container, CssBaseline, ThemeProvider, createTheme } from '@mui/material';
+import Header from './components/Header';
+import DocumentInput from './components/DocumentInput';
+import QuizGenerator from './components/QuizGenerator';
+import ProblemList from './components/ProblemList';
+import { useState } from 'react';
+
+const theme = createTheme({
+  palette: {
+    primary: {
+      main: '#1976d2',
+    },
+    background: {
+      default: '#f5f5f5',
+    },
+  },
+});
+
+function App() {
+  const [problems, setProblems] = useState<string[]>([]);
+
+  return (
+    <ThemeProvider theme={theme}>
+      <CssBaseline />
+      <Container maxWidth="md" sx={{ py: 4 }}>
+        <Header />
+        <DocumentInput />
+        <QuizGenerator onProblemsGenerated={setProblems} />
+        <ProblemList problems={problems} />
+      </Container>
+    </ThemeProvider>
+  );
+}
+
+export default App;

frontend/src/components/DocumentInput.tsx

@@ -0,0 +1,38 @@
+import { TextField, Button, Box } from '@mui/material';
+import { useState } from 'react';
+
+function DocumentInput() {
+  const [url, setUrl] = useState('');
+
+  const handleSubmit = async () => {
+    try {
+      const response = await fetch('http://localhost:8000/crawl/', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ url }),
+      });
+      if (!response.ok) throw new Error('Network response was not ok');
+      setUrl('');
+    } catch (error) {
+      console.error('Error:', error);
+    }
+  };
+
+  return (
+    <Box sx={{ mb: 4, display: 'flex', gap: 2 }}>
+      <TextField
+        fullWidth
+        label="Source Documentation"
+        value={url}
+        onChange={(e) => setUrl(e.target.value)}
+      />
+      <Button variant="contained" onClick={handleSubmit}>
+        Pull Source Docs
+      </Button>
+    </Box>
+  );
+}
+
+export default DocumentInput;

frontend/src/components/Header.tsx

@@ -0,0 +1,13 @@
+import { Typography, Box } from '@mui/material';
+
+function Header() {
+  return (
+    <Box sx={{ mb: 4 }}>
+      <Typography variant="h2" component="h1" align="center">
+        Simplify
+      </Typography>
+    </Box>
+  );
+}
+
+export default Header;

frontend/src/components/ProblemList.tsx

@@ -0,0 +1,26 @@
+import { List, ListItem, Paper, Typography } from '@mui/material';
+
+interface ProblemListProps {
+  problems: string[];
+}
+
+function ProblemList({ problems }: ProblemListProps) {
+  if (problems.length === 0) return null;
+
+  return (
+    <Paper sx={{ p: 2 }}>
+      <Typography variant="h6" gutterBottom>
+        Generated Problems
+      </Typography>
+      <List>
+        {problems.map((problem, index) => (
+          <ListItem key={index}>
+            {index + 1}. {problem}
+          </ListItem>
+        ))}
+      </List>
+    </Paper>
+  );
+}
+
+export default ProblemList;

frontend/src/components/QuizGenerator.tsx

@@ -0,0 +1,44 @@
+import { TextField, Button, Box } from '@mui/material';
+import { useState } from 'react';
+
+interface QuizGeneratorProps {
+  onProblemsGenerated: (problems: string[]) => void;
+}
+
+function QuizGenerator({ onProblemsGenerated }: QuizGeneratorProps) {
+  const [query, setQuery] = useState('');
+
+  const handleGenerate = async () => {
+    try {
+      const response = await fetch('http://localhost:8000/problems/', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ user_query: query }),
+      });
+      if (!response.ok) throw new Error('Network response was not ok');
+      const data = await response.json();
+      onProblemsGenerated(data.Problems);
+      setQuery('');
+    } catch (error) {
+      console.error('Error:', error);
+    }
+  };
+
+  return (
+    <Box sx={{ mb: 4, display: 'flex', gap: 2 }}>
+      <TextField
+        fullWidth
+        label="Quiz topic?"
+        value={query}
+        onChange={(e) => setQuery(e.target.value)}
+      />
+      <Button variant="contained" onClick={handleGenerate}>
+        Generate
+      </Button>
+    </Box>
+  );
+}
+
+export default QuizGenerator;

frontend/src/index.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+
+const root = ReactDOM.createRoot(
+  document.getElementById('root')
+);
+
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+); 

frontend/src/tests/App.test.tsx

@@ -0,0 +1,20 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import App from '../App';
+
+describe('App', () => {
+  test('renders main components', () => {
+    render(<App />);
+    
+    // Check for title
+    expect(screen.getByText('Simplify')).toBeInTheDocument();
+    
+    // Check for input fields
+    expect(screen.getByLabelText('Source Documentation')).toBeInTheDocument();
+    expect(screen.getByLabelText('Quiz topic?')).toBeInTheDocument();
+    
+    // Check for buttons
+    expect(screen.getByText('Pull Source Docs')).toBeInTheDocument();
+    expect(screen.getByText('Generate')).toBeInTheDocument();
+  });
+});

frontend/src/tests/components/DocumentInput.test.tsx

@@ -0,0 +1,30 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import DocumentInput from '../../components/DocumentInput';
+
+describe('DocumentInput', () => {
+  beforeEach(() => {
+    global.fetch = jest.fn();
+  });
+
+  test('submits URL when button is clicked', async () => {
+    const mockFetch = global.fetch as jest.Mock;
+    mockFetch.mockResolvedValueOnce({
+      ok: true,
+      json: async () => ({ status: 'received' }),
+    });
+
+    render(<DocumentInput />);
+    
+    const input = screen.getByLabelText('Source Documentation');
+    const button = screen.getByText('Pull Source Docs');
+    
+    await fireEvent.change(input, { target: { value: 'https://example.com' } });
+    await fireEvent.click(button);
+    
+    expect(mockFetch).toHaveBeenCalledWith('http://localhost:8000/crawl/', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ url: 'https://example.com' }),
+    });
+  });
+});

frontend/src/tests/components/QuizGenerator.test.tsx

@@ -0,0 +1,35 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import QuizGenerator from '../../components/QuizGenerator';
+
+describe('QuizGenerator', () => {
+  const mockOnProblemsGenerated = jest.fn();
+
+  beforeEach(() => {
+    global.fetch = jest.fn();
+    mockOnProblemsGenerated.mockClear();
+  });
+
+  test('generates problems when button is clicked', async () => {
+    const mockProblems = ['Problem 1', 'Problem 2'];
+    const mockFetch = global.fetch as jest.Mock;
+    mockFetch.mockResolvedValueOnce({
+      ok: true,
+      json: async () => ({ Problems: mockProblems }),
+    });
+
+    render(<QuizGenerator onProblemsGenerated={mockOnProblemsGenerated} />);
+    
+    const input = screen.getByLabelText('Quiz topic?');
+    const button = screen.getByText('Generate');
+    
+    await fireEvent.change(input, { target: { value: 'React' } });
+    await fireEvent.click(button);
+    
+    expect(mockFetch).toHaveBeenCalledWith('http://localhost:8000/problems/', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ user_query: 'React' }),
+    });
+    expect(mockOnProblemsGenerated).toHaveBeenCalledWith(mockProblems);
+  });
+});

frontend/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "types": ["jest", "node"]
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules"]
+}

pyproject.toml

@@ -0,0 +1,22 @@
+[project]
+name = "simplify"
+version = "0.1.0"
+description = "LLM System to generate quizzes that simplify the learning process of tools and frameworks"
+readme = "README.md"
+requires-python = ">=3.12"
+dependencies = [
+    "chainlit>=2.0.4",
+    "numpy>=2.2.2",
+    "openai>=1.59.9",
+    "pydantic==2.10.1",
+    "pypdf2>=3.0.1",
+    "websockets>=14.2",
+    "fastapi>=0.110.0",
+    "uvicorn>=0.27.1",
+    "pytest>=8.0.0",
+    "httpx>=0.26.0"
+]
+
+[tool.pytest.ini_options]
+testpaths = ["backend/tests"]
+python_files = ["test_*.py"]

pytest.ini

@@ -0,0 +1,2 @@
+[pytest]
+pythonpath = .