312 lines
13 KiB
TypeScript
312 lines
13 KiB
TypeScript
import React from 'react';
|
|
import ReactDOM from 'react-dom';
|
|
import { createTheme, ThemeProvider } from '@mui/material/styles';
|
|
import CssBaseline from '@mui/material/CssBaseline';
|
|
import { BrowserRouter } from 'react-router-dom';
|
|
import { Box, Typography, Paper, Container } from '@mui/material';
|
|
|
|
// Import the backstoryTheme
|
|
|
|
// BackstoryAnalysisDisplay component
|
|
const BackstoryAppAnalysisPage = () => {
|
|
return (
|
|
<Box sx={{ backgroundColor: 'background.default', minHeight: '100vh', py: 4 }}>
|
|
<Container maxWidth="lg">
|
|
<Paper sx={{ p: 4, boxShadow: 2 }}>
|
|
<Typography variant="h1" component="h1" sx={{ mb: 3, color: 'primary.main' }}>
|
|
Backstory Application Analysis
|
|
</Typography>
|
|
|
|
<Typography variant="h2" component="h2">
|
|
Core Concept
|
|
</Typography>
|
|
<Typography variant="body1">
|
|
Backstory is a dual-purpose platform designed to bridge the gap between job candidates and
|
|
employers/recruiters with an AI-powered approach to professional profiles and resume generation.
|
|
</Typography>
|
|
|
|
<Typography variant="h3" component="h3" sx={{ mt: 3 }}>
|
|
Primary User Types
|
|
</Typography>
|
|
<Box component="ol" sx={{ pl: 4 }}>
|
|
<li>
|
|
<Typography variant="body1" component="div">
|
|
<strong>Job Candidates</strong> - Upload and manage comprehensive professional histories
|
|
and generate tailored resumes for specific positions
|
|
</Typography>
|
|
</li>
|
|
<li>
|
|
<Typography variant="body1" component="div">
|
|
<strong>Employers/Recruiters</strong> - Search for candidates, directly interact with AI
|
|
assistants about candidate experiences, and generate position-specific resumes
|
|
</Typography>
|
|
</li>
|
|
</Box>
|
|
|
|
<Typography variant="h2" component="h2" sx={{ mt: 4 }}>
|
|
Key Features
|
|
</Typography>
|
|
|
|
<Typography variant="h3" component="h3" sx={{ mt: 3 }}>
|
|
For Candidates
|
|
</Typography>
|
|
<Box component="ul" sx={{ pl: 4 }}>
|
|
<li>
|
|
<Typography variant="body1" component="div">
|
|
<strong>Complete Profile Management</strong> - Create detailed professional histories beyond typical resume constraints
|
|
</Typography>
|
|
</li>
|
|
<li>
|
|
<Typography variant="body1" component="div">
|
|
<strong>AI-Assisted Q&A Setup</strong> - Configure an AI assistant to answer employer questions about your experience
|
|
</Typography>
|
|
</li>
|
|
<li>
|
|
<Typography variant="body1" component="div">
|
|
<strong>Smart Resume Generator</strong> - Create tailored resumes for specific positions using AI
|
|
</Typography>
|
|
</li>
|
|
<li>
|
|
<Typography variant="body1" component="div">
|
|
<strong>Analytics Dashboard</strong> - Track profile views, resume downloads, and employer engagement
|
|
</Typography>
|
|
</li>
|
|
<li>
|
|
<Typography variant="body1" component="div">
|
|
<strong>Privacy Controls</strong> - Manage visibility and access to your professional information
|
|
</Typography>
|
|
</li>
|
|
</Box>
|
|
|
|
<Typography variant="h3" component="h3" sx={{ mt: 3 }}>
|
|
For Employers
|
|
</Typography>
|
|
<Box component="ul" sx={{ pl: 4 }}>
|
|
<li>
|
|
<Typography variant="body1" component="div">
|
|
<strong>Advanced Candidate Search</strong> - Find candidates with specific skills, experience levels, and qualifications
|
|
</Typography>
|
|
</li>
|
|
<li>
|
|
<Typography variant="body1" component="div">
|
|
<strong>Interactive Q&A</strong> - Ask questions directly to candidate AI assistants to learn more about their experience
|
|
</Typography>
|
|
</li>
|
|
<li>
|
|
<Typography variant="body1" component="div">
|
|
<strong>Resume Generation</strong> - Generate candidate resumes tailored to specific job requirements
|
|
</Typography>
|
|
</li>
|
|
<li>
|
|
<Typography variant="body1" component="div">
|
|
<strong>Talent Pool Management</strong> - Create and manage groups of candidates for different positions
|
|
</Typography>
|
|
</li>
|
|
<li>
|
|
<Typography variant="body1" component="div">
|
|
<strong>Job Posting Management</strong> - Create, manage, and track applications for job postings
|
|
</Typography>
|
|
</li>
|
|
</Box>
|
|
|
|
<Typography variant="h2" component="h2" sx={{ mt: 4 }}>
|
|
Design Analysis
|
|
</Typography>
|
|
|
|
<Typography variant="h3" component="h3" sx={{ mt: 3 }}>
|
|
Navigation Structure
|
|
</Typography>
|
|
<Typography variant="body1">
|
|
The application uses a role-based navigation system with:
|
|
</Typography>
|
|
<Box component="ul" sx={{ pl: 4 }}>
|
|
<li>
|
|
<Typography variant="body1" component="div">
|
|
<strong>Public Navigation</strong> - Home, About, Pricing, Login/Register accessible to all users
|
|
</Typography>
|
|
</li>
|
|
<li>
|
|
<Typography variant="body1" component="div">
|
|
<strong>Candidate Dashboard Navigation</strong> - Profile, Backstory, Resumes, Q&A Setup, Analytics, Settings
|
|
</Typography>
|
|
</li>
|
|
<li>
|
|
<Typography variant="body1" component="div">
|
|
<strong>Employer Dashboard Navigation</strong> - Dashboard, Search, Saved, Jobs, Company, Analytics, Settings
|
|
</Typography>
|
|
</li>
|
|
</Box>
|
|
|
|
<Typography variant="h3" component="h3" sx={{ mt: 3 }}>
|
|
UI Patterns
|
|
</Typography>
|
|
<Box component="ol" sx={{ pl: 4 }}>
|
|
<li>
|
|
<Typography variant="body1" component="div">
|
|
<strong>Dashboard Cards</strong> - Both user types have dashboards with card-based information displays
|
|
</Typography>
|
|
</li>
|
|
<li>
|
|
<Typography variant="body1" component="div">
|
|
<strong>Tab-Based Content Organization</strong> - Many screens use horizontal tabs to organize related content
|
|
</Typography>
|
|
</li>
|
|
<li>
|
|
<Typography variant="body1" component="div">
|
|
<strong>Form-Based Editors</strong> - Profile and content editors use structured forms with varied input types
|
|
</Typography>
|
|
</li>
|
|
<li>
|
|
<Typography variant="body1" component="div">
|
|
<strong>Three-Column Layouts</strong> - Many screens follow a left sidebar, main content, right sidebar pattern
|
|
</Typography>
|
|
</li>
|
|
<li>
|
|
<Typography variant="body1" component="div">
|
|
<strong>Preview/Edit Toggle</strong> - Resume and profile editing screens offer both editing and preview modes
|
|
</Typography>
|
|
</li>
|
|
<li>
|
|
<Typography variant="body1" component="div">
|
|
<strong>Filter-Based Search</strong> - Employer search uses multiple filter categories to refine candidate results
|
|
</Typography>
|
|
</li>
|
|
</Box>
|
|
|
|
<Typography variant="h3" component="h3" sx={{ mt: 3 }}>
|
|
Mobile Adaptations
|
|
</Typography>
|
|
<Typography variant="body1">
|
|
The mobile designs show a simplified navigation structure with bottom tabs and a hamburger menu,
|
|
maintaining the core functionality while adapting to smaller screens.
|
|
</Typography>
|
|
|
|
<Typography variant="h2" component="h2" sx={{ mt: 4 }}>
|
|
Technology Integration
|
|
</Typography>
|
|
|
|
<Typography variant="h3" component="h3" sx={{ mt: 3 }}>
|
|
AI Components
|
|
</Typography>
|
|
<Box component="ul" sx={{ pl: 4 }}>
|
|
<li>
|
|
<Typography variant="body1" component="div">
|
|
<strong>LLM Integration</strong> - Supports multiple AI models (Claude, GPT-4, self-hosted models)
|
|
</Typography>
|
|
</li>
|
|
<li>
|
|
<Typography variant="body1" component="div">
|
|
<strong>Candidate AI Assistant</strong> - Personalized AI chatbot that answers questions about candidate experience
|
|
</Typography>
|
|
</li>
|
|
<li>
|
|
<Typography variant="body1" component="div">
|
|
<strong>Resume Generation</strong> - AI-powered resume creation based on job requirements
|
|
</Typography>
|
|
</li>
|
|
<li>
|
|
<Typography variant="body1" component="div">
|
|
<strong>Skills Matching</strong> - Automated matching between candidate skills and job requirements
|
|
</Typography>
|
|
</li>
|
|
</Box>
|
|
|
|
<Typography variant="h3" component="h3" sx={{ mt: 3 }}>
|
|
External Integrations
|
|
</Typography>
|
|
<Box component="ul" sx={{ pl: 4 }}>
|
|
<li>
|
|
<Typography variant="body1" component="div">
|
|
<strong>Authentication</strong> - OAuth with Google, LinkedIn, GitHub
|
|
</Typography>
|
|
</li>
|
|
<li>
|
|
<Typography variant="body1" component="div">
|
|
<strong>Data Import</strong> - LinkedIn profile import, resume parsing (PDF, DOCX), CSV/JSON import
|
|
</Typography>
|
|
</li>
|
|
<li>
|
|
<Typography variant="body1" component="div">
|
|
<strong>ATS Compatibility</strong> - Integration with employer Applicant Tracking Systems
|
|
</Typography>
|
|
</li>
|
|
<li>
|
|
<Typography variant="body1" component="div">
|
|
<strong>Vector Databases</strong> - Semantic search capabilities for candidate matching
|
|
</Typography>
|
|
</li>
|
|
</Box>
|
|
|
|
<Typography variant="h2" component="h2" sx={{ mt: 4 }}>
|
|
Key Differentiators
|
|
</Typography>
|
|
<Box component="ol" sx={{ pl: 4 }}>
|
|
<li>
|
|
<Typography variant="body1" component="div">
|
|
<strong>Beyond the Resume</strong> - Focuses on comprehensive professional stories rather than just resume highlights
|
|
</Typography>
|
|
</li>
|
|
<li>
|
|
<Typography variant="body1" component="div">
|
|
<strong>AI-Mediated Communication</strong> - Uses AI to facilitate deeper understanding of candidate experiences
|
|
</Typography>
|
|
</li>
|
|
<li>
|
|
<Typography variant="body1" component="div">
|
|
<strong>Bidirectional Resume Generation</strong> - Both candidates and employers can generate tailored resumes
|
|
</Typography>
|
|
</li>
|
|
<li>
|
|
<Typography variant="body1" component="div">
|
|
<strong>Configurable AI Personalities</strong> - Candidates can customize how their AI assistant responds to questions
|
|
</Typography>
|
|
</li>
|
|
<li>
|
|
<Typography variant="body1" component="div">
|
|
<strong>Deep Analytics</strong> - Both candidates and employers receive insights about their engagement
|
|
</Typography>
|
|
</li>
|
|
</Box>
|
|
|
|
<Typography variant="h2" component="h2" sx={{ mt: 4 }}>
|
|
Deployment Options
|
|
</Typography>
|
|
<Typography variant="body1">
|
|
The system supports multiple deployment architectures:
|
|
</Typography>
|
|
<Box component="ul" sx={{ pl: 4 }}>
|
|
<li>
|
|
<Typography variant="body1">Self-hosted (on-premises)</Typography>
|
|
</li>
|
|
<li>
|
|
<Typography variant="body1">Cloud-hosted (SaaS model)</Typography>
|
|
</li>
|
|
<li>
|
|
<Typography variant="body1">Hybrid deployment (mixed cloud/on-premises)</Typography>
|
|
</li>
|
|
</Box>
|
|
|
|
<Typography variant="h2" component="h2" sx={{ mt: 4 }}>
|
|
Security and Privacy Considerations
|
|
</Typography>
|
|
<Box component="ul" sx={{ pl: 4 }}>
|
|
<li>
|
|
<Typography variant="body1">Granular candidate privacy controls</Typography>
|
|
</li>
|
|
<li>
|
|
<Typography variant="body1">Role-based access for employer teams</Typography>
|
|
</li>
|
|
<li>
|
|
<Typography variant="body1">Data management options for compliance requirements</Typography>
|
|
</li>
|
|
</Box>
|
|
</Paper>
|
|
</Container>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
|
|
export {
|
|
BackstoryAppAnalysisPage
|
|
} |