Django SaaS MVP Development

Take the perspective of an expert software engineer and analyze and rebuild this application so that it would be a minimally viable product that could be packaged and sold as a SaaS:""" Django settings for backend project. Generated by 'django-admin startproject' using Django 5.1.2. For more information on this file, see https://docs.djangoproject.com/en/5.1/topics/settings/ For the full list of settings and their values, see https://docs.djangoproject.com/en/5.1/ref/settings/ """ import decouple from decouple import config from pathlib import Path # Build paths inside the project like this: BASE_DIR / 'subdir'. BASE_DIR = Path(__file__).resolve().parent.parent # Quick-start development settings - unsuitable for production # See https://docs.djangoproject.com/en/5.1/howto/deployment/checklist/ # SECURITY WARNING: keep the secret key used in production secret! SECRET_KEY = 'django-insecure-afq-u-)(^1od2wb_(4oke^ky00%p-0$+o%e6bfw0nucj30$0$r' ANTHROPIC_API_KEY = config('ANTHROPIC_API_KEY') # SECURITY WARNING: don't run with debug turned on in production! DEBUG = True ALLOWED_HOSTS = [] # Application definition INSTALLED_APPS = [ 'corsheaders', 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', 'rest_framework', 'core', ] MIDDLEWARE = [ 'corsheaders.middleware.CorsMiddleware', 'django.middleware.security.SecurityMiddleware', 'django.contrib.sessions.middleware.SessionMiddleware', 'django.middleware.common.CommonMiddleware', 'django.middleware.csrf.CsrfViewMiddleware', 'django.contrib.auth.middleware.AuthenticationMiddleware', 'django.contrib.messages.middleware.MessageMiddleware', 'django.middleware.clickjacking.XFrameOptionsMiddleware', ] ROOT_URLCONF = 'backend.urls' TEMPLATES = [ { 'BACKEND': 'django.template.backends.django.DjangoTemplates', 'DIRS': [], 'APP_DIRS': True, 'OPTIONS': { 'context_processors': [ 'django.template.context_processors.debug', 'django.template.context_processors.request', 'django.contrib.auth.context_processors.auth', 'django.contrib.messages.context_processors.messages', ], }, }, ] WSGI_APPLICATION = 'backend.wsgi.application' # Database # https://docs.djangoproject.com/en/5.1/ref/settings/#databases DATABASES = { 'default': { 'ENGINE': 'django.db.backends.sqlite3', 'NAME': BASE_DIR / 'db.sqlite3', } } # Password validation # https://docs.djangoproject.com/en/5.1/ref/settings/#auth-password-validators AUTH_PASSWORD_VALIDATORS = [ { 'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator', }, { 'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator', }, { 'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator', }, { 'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator', }, ] # Internationalization # https://docs.djangoproject.com/en/5.1/topics/i18n/ LANGUAGE_CODE = 'en-us' TIME_ZONE = 'UTC' USE_I18N = True USE_TZ = True # Static files (CSS, JavaScript, Images) # https://docs.djangoproject.com/en/5.1/howto/static-files/ STATIC_URL = 'static/' # Default primary key field type # https://docs.djangoproject.com/en/5.1/ref/settings/#default-auto-field DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField' CORS_ALLOWED_ORIGINS = [ 'http://localhost:3000', 'http://localhost:3001', 'http://localhost:5173' ] REST_FRAMEWORK = { 'DEFAULT_PERMISSION_CLASSES': [ 'rest_framework.permissions.IsAuthenticated', ], 'DEFAULT_AUTHENTICATION_CLASSES': [ 'rest_framework.authentication.SessionAuthentication', 'rest_framework.authentication.BasicAuthentication', ], 'DEFAULT_AUTHENTICATION_CLASSES': ( 'rest_framework_simplejwt.authentication.JWTAuthentication', ), 'DEFAULT_PERMISSION_CLASSES': ( 'rest_framework.permissions.IsAuthenticated', ), } from datetime import timedelta SIMPLE_JWT = { 'ACCESS_TOKEN_LIFETIME': timedelta(minutes=60), 'REFRESH_TOKEN_LIFETIME': timedelta(days=1), 'ROTATE_REFRESH_TOKENS': False, 'BLACKLIST_AFTER_ROTATION': True, 'UPDATE_LAST_LOGIN': False, 'ALGORITHM': 'HS256', 'SIGNING_KEY': SECRET_KEY, 'VERIFYING_KEY': None, 'AUDIENCE': None, 'ISSUER': None, 'AUTH_HEADER_TYPES': ('Bearer',), 'USER_ID_FIELD': 'id', 'USER_ID_CLAIM': 'user_id', 'AUTH_TOKEN_CLASSES': ('rest_framework_simplejwt.tokens.AccessToken',), 'TOKEN_TYPE_CLAIM': 'token_type', } # If your frontend needs to send cookies or authentication tokens: CORS_ALLOW_CREDENTIALS = True # backend/urls.py (or your project's main urls.py) from django.contrib import admin from django.urls import path, include urlpatterns = [ path('admin/', admin.site.urls), path('api/', include('core.urls')), # Prefix API URLs with /api/ ] # core/models.py from django.db import models from django.contrib.auth.models import User class Author(models.Model): user = models.OneToOneField(User, on_delete=models.CASCADE) bio = models.TextField(blank=True, null=True) created_at = models.DateTimeField(auto_now_add=True, null=True, blank=True) def __str__(self): return f"{self.user.username}'s Author Profile" class Persona(models.Model): author = models.ForeignKey(Author, on_delete=models.CASCADE, related_name='personas', null=True, blank=True) name = models.CharField(max_length=100, null=True, blank=True) description = models.TextField(blank=True, null=True) data = models.JSONField(blank=True, null=True) # Stores analyzed writing sample data is_active = models.BooleanField(default=True, null=True, blank=True) created_at = models.DateTimeField(auto_now_add=True, null=True, blank=True) updated_at = models.DateTimeField(auto_now=True, null=True, blank=True) class Meta: ordering = ['-created_at'] def __str__(self): return f"{self.author.user.username}'s persona: {self.name}" class ContentPiece(models.Model): STATUS_CHOICES = [ ('draft', 'Draft'), ('published', 'Published'), ('archived', 'Archived') ] author = models.ForeignKey(Author, on_delete=models.CASCADE, null=True, blank=True) persona = models.ForeignKey(Persona, on_delete=models.CASCADE, null=True, blank=True) title = models.CharField(max_length=200, null=True, blank=True) content = models.TextField(null=True, blank=True) status = models.CharField(max_length=10, choices=STATUS_CHOICES, default='draft', null=True, blank=True) tags = models.JSONField(default=list, null=True, blank=True) word_count = models.IntegerField(default=0, null=True, blank=True) created_at = models.DateTimeField(auto_now_add=True, null=True, blank=True) updated_at = models.DateTimeField(auto_now=True, null=True, blank=True) published_at = models.DateTimeField(null=True, blank=True) class Meta: ordering = ['-created_at'] def __str__(self): return self.title def save(self, *args, **kwargs): self.word_count = len(self.content.split()) super().save(*args, **kwargs) # core/serializers.py from rest_framework import serializers from .models import Author, Persona, ContentPiece from .utils import analyze_writing_sample, generate_content import logging logger = logging.getLogger(__name__) class AuthorSerializer(serializers.ModelSerializer): username = serializers.CharField(source='user.username', read_only=True) email = serializers.EmailField(source='user.email', read_only=True) class Meta: model = Author fields = ['id', 'username', 'email', 'bio', 'created_at'] class PersonaSerializer(serializers.ModelSerializer): writing_sample = serializers.CharField(write_only=True, required=False) content_count = serializers.SerializerMethodField() class Meta: model = Persona fields = ['id', 'name', 'description', 'data', 'writing_sample', 'is_active', 'created_at', 'updated_at', 'content_count'] read_only_fields = ['id', 'data', 'created_at', 'updated_at', 'content_count'] def get_content_count(self, obj): return obj.contentpiece_set.count() def create(self, validated_data): writing_sample = validated_data.pop('writing_sample', None) author = self.context['request'].user.author validated_data['author'] = author if writing_sample: analyzed_data = analyze_writing_sample(writing_sample) if analyzed_data: validated_data['data'] = analyzed_data else: logger.error("Failed to analyze writing sample.") raise serializers.ValidationError({"writing_sample": "Failed to analyze the writing sample."}) return super().create(validated_data) class ContentPieceSerializer(serializers.ModelSerializer): persona_name = serializers.CharField(source='persona.name', read_only=True) class Meta: model = ContentPiece fields = ['id', 'title', 'content', 'persona', 'persona_name', 'status', 'tags', 'word_count', 'created_at', 'updated_at', 'published_at'] read_only_fields = ['id', 'word_count', 'created_at', 'updated_at'] # core/signals.py from django.db.models.signals import post_save from django.contrib.auth.models import User from django.dispatch import receiver from .models import Author # Adjust the import based on your project structure @receiver(post_save, sender=User) def create_author_profile(sender, instance, created, **kwargs): if created: Author.objects.create(user=instance) @receiver(post_save, sender=User) def save_author_profile(sender, instance, **kwargs): if hasattr(instance, 'author'): instance.author.save() # core/urls.py from django.urls import path, include from rest_framework.routers import DefaultRouter from .views import PersonaViewSet, ContentPieceViewSet from rest_framework_simplejwt.views import ( TokenObtainPairView, TokenRefreshView, ) router = DefaultRouter() router.register(r'personas', PersonaViewSet, basename='persona') router.register(r'content', ContentPieceViewSet, basename='content') urlpatterns = [ path('token/', TokenObtainPairView.as_view(), name='token_obtain_pair'), path('token/refresh/', TokenRefreshView.as_view(), name='token_refresh'), path('', include(router.urls)), ] import logging import requests import json import re import anthropic from decouple import config logger = logging.getLogger(__name__) ANTHROPIC_API_KEY = config('ANTHROPIC_API_KEY') ANTHROPIC_API_BASE = "https://api.anthropic.com" def analyze_writing_sample(writing_sample): endpoint = f"{ANTHROPIC_API_BASE}/v1/complete" headers = { "Content-Type": "application/json", "X-API-Key": ANTHROPIC_API_KEY, "anthropic-version": "2023-06-01", } # Build the prompt with the required instructions and writing sample instructions = f''' Please analyze the writing style and personality of the given writing sample. Provide a detailed assessment of their characteristics using the following template. Rate each applicable characteristic on a scale of 1-10 where relevant, or provide a descriptive value. Return the results in a JSON format. "name": "[Author/Character Name]", "vocabulary_complexity": [1-10], "sentence_structure": "[simple/complex/varied]", "paragraph_organization": "[structured/loose/stream-of-consciousness]", "idiom_usage": [1-10], "metaphor_frequency": [1-10], "simile_frequency": [1-10], "tone": "[formal/informal/academic/conversational/etc.]", "punctuation_style": "[minimal/heavy/unconventional]", "contraction_usage": [1-10], "pronoun_preference": "[first-person/third-person/etc.]", "passive_voice_frequency": [1-10], "rhetorical_question_usage": [1-10], "list_usage_tendency": [1-10], "personal_anecdote_inclusion": [1-10], "pop_culture_reference_frequency": [1-10], "technical_jargon_usage": [1-10], "parenthetical_aside_frequency": [1-10], "humor_sarcasm_usage": [1-10], "emotional_expressiveness": [1-10], "emphatic_device_usage": [1-10], "quotation_frequency": [1-10], "analogy_usage": [1-10], "sensory_detail_inclusion": [1-10], "onomatopoeia_usage": [1-10], "alliteration_frequency": [1-10], "word_length_preference": "[short/long/varied]", "foreign_phrase_usage": [1-10], "rhetorical_device_usage": [1-10], "statistical_data_usage": [1-10], "personal_opinion_inclusion": [1-10], "transition_usage": [1-10], "reader_question_frequency": [1-10], "imperative_sentence_usage": [1-10], "dialogue_inclusion": [1-10], "regional_dialect_usage": [1-10], "hedging_language_frequency": [1-10], "language_abstraction": "[concrete/abstract/mixed]", "personal_belief_inclusion": [1-10], "repetition_usage": [1-10], "subordinate_clause_frequency": [1-10], "verb_type_preference": "[active/stative/mixed]", "sensory_imagery_usage": [1-10], "symbolism_usage": [1-10], "digression_frequency": [1-10], "formality_level": [1-10], "reflection_inclusion": [1-10], "irony_usage": [1-10], "neologism_frequency": [1-10], "ellipsis_usage": [1-10], "cultural_reference_inclusion": [1-10], "stream_of_consciousness_usage": [1-10], "openness_to_experience": [1-10], "conscientiousness": [1-10], "extraversion": [1-10], "agreeableness": [1-10], "emotional_stability": [1-10], "dominant_motivations": "[achievement/affiliation/power/etc.]", "core_values": "[integrity/freedom/knowledge/etc.]", "decision_making_style": "[analytical/intuitive/spontaneous/etc.]", "empathy_level": [1-10], "self_confidence": [1-10], "risk_taking_tendency": [1-10], "idealism_vs_realism": "[idealistic/realistic/mixed]", "conflict_resolution_style": "[assertive/collaborative/avoidant/etc.]", "relationship_orientation": "[independent/communal/mixed]", "emotional_response_tendency": "[calm/reactive/intense]", "creativity_level": [1-10], "age": "[age or age range]", "gender": "[gender]", "education_level": "[highest level of education]", "professional_background": "[brief description]", "cultural_background": "[brief description]", "primary_language": "[language]", "language_fluency": "[native/fluent/intermediate/beginner]", "background": "[A brief paragraph describing the author's context, major influences, and any other relevant information not captured above]" Writing Sample: {writing_sample} ''' # Prepare the prompt for Anthropic API prompt = f"Human: {instructions.strip()}\n\nAssistant:" payload = { "prompt": prompt, "model": "claude-2.1", "max_tokens_to_sample": 1000, "temperature": 0, "stop_sequences": ["\n\nHuman:"] } try: response = requests.post(endpoint, headers=headers, json=payload) response.raise_for_status() # Raises HTTPError for bad responses # Log the API response for debugging logger.debug(f"Anthropic API response: {response.text}") assistant_message = response.json()['completion'].strip() logger.debug(f"Assistant message: {assistant_message}") # Extract JSON from the assistant's message json_str = re.search(r'\{.*\}', assistant_message, re.DOTALL) if json_str: analyzed_data = json.loads(json_str.group()) else: logger.error("No JSON object found in the response.") return None return analyzed_data except requests.exceptions.HTTPError as e: logger.error(f"HTTP Error: {e}") logger.error(f"Response content: {response.text}") # Log the response content return None except requests.exceptions.RequestException as e: logger.error(f"Request Exception: {e}") return None except json.JSONDecodeError as e: logger.error(f"JSON decoding failed: {e}") return None except Exception as e: logger.error(f"Unexpected error: {e}") return None def generate_content(persona_data, prompt_text): endpoint = f"{ANTHROPIC_API_BASE}/v1/complete" headers = { "Content-Type": "application/json", "X-API-Key": ANTHROPIC_API_KEY, "anthropic-version": "2023-06-01", } # Format the persona data into a readable string characteristics = '\n'.join([ f"{key.replace('_', ' ').capitalize()}: {value}" for key, value in persona_data.items() if value is not None and key not in ['id', 'name'] ]) decoding_prompt = f''' You are to write a response in the style of {persona_data.get('name', 'Unknown Author')}, a writer with the following characteristics: {characteristics} Now, please write a response in this style about the following topic: "{prompt_text}" Begin with the beginning of the response and skip any preceeding acknowledgement of the request before the real content. Begin with a compelling title that reflects the content of the post. ''' # Prepare the prompt for Anthropic API prompt = f"Human: {decoding_prompt.strip()}\n\nAssistant:" payload = { "prompt": prompt, "model": "claude-2.1", "max_tokens_to_sample": 1000, "temperature": 0, "stop_sequences": ["\n\nHuman:"] } try: response = requests.post(endpoint, headers=headers, json=payload) response.raise_for_status() assistant_message = response.json()['completion'].strip() logger.debug(f"Assistant message: {assistant_message}") return assistant_message except requests.exceptions.HTTPError as e: logger.error(f"HTTP Error: {e}") logger.error(f"Response content: {response.text}") # Log the response content return '' except requests.exceptions.RequestException as e: logger.error(f"Request Exception: {e}") return '' except json.JSONDecodeError as e: logger.error(f"JSON decoding failed: {e}") return '' except Exception as e: logger.error(f"Unexpected error: {e}") return '' def save_blog_post(blog_post, title): # Implement if needed# core/views.py from rest_framework import viewsets, permissions from rest_framework.decorators import action from rest_framework.response import Response from .serializers import PersonaSerializer, ContentPieceSerializer from .models import Persona, ContentPiece from .utils import generate_content import logging logger = logging.getLogger(__name__) class PersonaViewSet(viewsets.ModelViewSet): serializer_class = PersonaSerializer permission_classes = [permissions.IsAuthenticated] def get_queryset(self): return Persona.objects.filter(author=self.request.user.author) @action(detail=True, methods=['post']) def generate_content(self, request, pk=None): persona = self.get_object() prompt = request.data.get('prompt') if not prompt: return Response({'error': 'Prompt is required'}, status=400) generated_content = generate_content(persona.data, prompt) if generated_content: title, content = self._split_content(generated_content) content_piece = ContentPiece.objects.create( author=request.user.author, persona=persona, title=title or 'Untitled', content=content or '', status='draft' ) serializer = ContentPieceSerializer(content_piece) return Response(serializer.data, status=201) return Response({'error': 'Failed to generate content'}, status=500) def _split_content(self, generated_content): lines = generated_content.strip().split('\n') title = lines[0] if lines else 'Untitled' content = '\n'.join(lines[1:]) if len(lines) > 1 else '' return title, content class ContentPieceViewSet(viewsets.ModelViewSet): serializer_class = ContentPieceSerializer permission_classes = [permissions.IsAuthenticated] def get_queryset(self): return ContentPiece.objects.filter(author=self.request.user.author) def perform_create(self, serializer): serializer.save(author=self.request.user.author) pass // src/components/Auth/Login.tsx import React, { useState } from 'react'; import { authService } from '../../services/api'; import { useNavigate } from 'react-router-dom'; import { Box, Button, TextField, Typography, Alert, Stack } from '@mui/material'; const Login: React.FC = () => { const [username, setUsername] = useState(''); const [password, setPassword] = useState(''); const [error, setError] = useState<string | null>(null); const navigate = useNavigate(); const handleLogin = async (event: React.FormEvent) => { event.preventDefault(); try { const response = await authService.login(username, password); localStorage.setItem('access_token', response.data.access); localStorage.setItem('refresh_token', response.data.refresh); setError(null); navigate('/'); // Redirect after login } catch (err: any) { console.error('Login error:', err); setError('Invalid credentials. Please try again.'); } }; return ( <Box p={4} maxWidth="400px" mx="auto"> <Typography variant="h4" gutterBottom> Login </Typography> {error && ( <Alert severity="error" sx={{ mb: 2 }}> {error} </Alert> )} <form onSubmit={handleLogin}> <Stack spacing={3}> <TextField label="Username" variant="outlined" fullWidth value={username} onChange={(e) => setUsername(e.target.value)} required /> <TextField label="Password" variant="outlined" type="password" fullWidth value={password} onChange={(e) => setPassword(e.target.value)} required /> <Button type="submit" variant="contained" color="primary" size="large"> Login </Button> </Stack> </form> </Box> ); }; export default Login; // src/components/GhostWriter/BlogPosts.tsx import React, { useEffect, useState } from 'react'; import axios from '../../services/api'; // Adjust the path if necessary import { CircularProgress, Typography, Box, Card, CardContent } from '@mui/material'; interface BlogPost { id: number; persona: string; title: string; content: string; created_at: string; } const BlogPosts: React.FC = () => { const [blogPosts, setBlogPosts] = useState<BlogPost[]>([]); const [loading, setLoading] = useState<boolean>(true); const [error, setError] = useState<string | null>(null); useEffect(() => { const fetchBlogPosts = async () => { try { const response = await axios.get('content/'); setBlogPosts(response.data); } catch (err) { console.error('Error fetching blog posts:', err); setError('Failed to load blog posts.'); } finally { setLoading(false); } }; fetchBlogPosts(); }, []); if (loading) { return ( <Box display="flex" justifyContent="center" alignItems="center" height="100vh"> <CircularProgress /> </Box> ); } if (error) { return ( <Box display="flex" justifyContent="center" alignItems="center" height="100vh"> <Typography variant="h6" color="error"> {error} </Typography> </Box> ); } return ( <Box p={4}> <Typography variant="h4" gutterBottom> Output </Typography> {blogPosts.length === 0 ? ( <Typography variant="body1">No blog posts found.</Typography> ) : ( blogPosts.map((post) => ( <Card key={post.id} variant="outlined" sx={{ mb: 2 }}> <CardContent> <Typography variant="h5" gutterBottom> {post.title || 'Untitled'} </Typography> <Typography variant="body2" paragraph> {post.content} </Typography> <Typography variant="caption" color="text.secondary"> By: {post.persona} on {new Date(post.created_at).toLocaleString()} </Typography> </CardContent> </Card> )) )} </Box> ); }; export default BlogPosts; // src/components/GhostWriter/GenerateContent.tsx import React, { useState } from 'react'; import axios from '../../services/api'; // Adjust the path if necessary import { useSearchParams } from 'react-router-dom'; import { Box, Button, TextField, Typography, Alert, CircularProgress, Card, CardContent } from '@mui/material'; interface BlogPost { id: number; persona: string; title: string; content: string; created_at: string; } const GenerateContent: React.FC = () => { const [searchParams] = useSearchParams(); const personaIdParam = searchParams.get('personaId'); const personaId = personaIdParam ? Number(personaIdParam) : null; const [prompt, setPrompt] = useState<string>(''); const [content, setContent] = useState<BlogPost | null>(null); const [loading, setLoading] = useState<boolean>(false); const [error, setError] = useState<string | null>(null); const handleGenerate = async () => { if (!prompt) { setError('Please enter a prompt.'); return; } if (!personaId) { setError('Invalid Persona ID.'); return; } setLoading(true); setError(null); try { const response = await axios.post(`personas/${personaId}/generate_content/`, { prompt: prompt, }); setContent(response.data); setError(null); setPrompt(''); } catch (err: any) { console.error('Error generating content:', err); if (err.response && err.response.data) { setError(JSON.stringify(err.response.data)); } else { setError('Failed to generate content.'); } } finally { setLoading(false); } }; return ( <Box p={4} maxWidth="600px" mx="auto"> <Typography variant="h4" gutterBottom> Generate Content </Typography> {error && ( <Alert severity="error" sx={{ mb: 2 }}> {error} </Alert> )} <TextField label="Prompt" variant="outlined" fullWidth multiline rows={4} value={prompt} onChange={(e) => setPrompt(e.target.value)} placeholder="Enter a topic or prompt..." required sx={{ mb: 3 }} /> <Button onClick={handleGenerate} variant="contained" color="primary" disabled={loading} fullWidth > {loading ? <CircularProgress size={24} /> : 'Generate Content'} </Button> {content && ( <Card variant="outlined" sx={{ mt: 4 }}> <CardContent> <Typography variant="h5" gutterBottom> {content.title || 'Untitled'} </Typography> <Typography variant="body1"> {content.content} </Typography> </CardContent> </Card> )} </Box> ); }; export default GenerateContent; // src/components/GhostWriter/PersonaList.tsx import React, { useEffect, useState } from 'react'; import axios from '../../services/api'; // Adjust the path if necessary import { useNavigate } from 'react-router-dom'; import './PersonaList.css'; // Import the CSS file for styling import { Box, Button, Typography } from '@mui/material'; interface Persona { id: number; name: string; description: string; data: Record<string, any>; } const PersonaList: React.FC = () => { const [personas, setPersonas] = useState<Persona[]>([]); const [loading, setLoading] = useState<boolean>(true); const [error, setError] = useState<string | null>(null); const navigate = useNavigate(); useEffect(() => { const fetchPersonas = async () => { try { const response = await axios.get('personas/'); setPersonas(response.data); } catch (err) { console.error('Error fetching personas:', err); setError('Failed to load personas.'); } finally { setLoading(false); } }; fetchPersonas(); }, []); const handleSelectPersona = (personaId: number) => { navigate(`/generate?personaId=${personaId}`); }; if (loading) return <div className="loading">Loading...</div>; if (error) return <div className="error">{error}</div>; return ( <div className="persona-list-container"> <h2 className="title">Saved Personas</h2> {personas.length === 0 ? ( <p className="no-personas">No personas found.</p> ) : ( <div className="persona-cards"> {personas.map((persona) => ( <div key={persona.id} className="persona-card"> <h3 className="persona-name">{persona.name}</h3> <button className="generate-button" onClick={() => handleSelectPersona(persona.id)} > Generate Content </button> </div> ))} </div> )} </div> ); }; export default PersonaList; // src/components/GhostWriter/UploadSample.tsx import React, { useState } from 'react'; import axios from '../../services/api'; // Adjust the path if necessary import { Box, Button, TextField, Typography, Alert, Stack } from '@mui/material'; const UploadSample: React.FC = () => { const [name, setName] = useState(''); const [writingSample, setWritingSample] = useState(''); const [error, setError] = useState<string | null>(null); const [success, setSuccess] = useState<string | null>(null); const handleSubmit = async (event: React.FormEvent) => { event.preventDefault(); const payload = { name: name.trim(), writing_sample: writingSample.trim(), }; try { console.log('Payload being sent:', payload); const response = await axios.post('personas/', payload); console.log('Response received:', response.data); setSuccess(`Persona "${response.data.name}" created successfully!`); setError(null); setName(''); setWritingSample(''); } catch (error: any) { console.error('Error uploading writing sample:', error); console.log('Error response:', error.response); if (error.response && error.response.data) { setError(JSON.stringify(error.response.data)); } else { setError('An error occurred while uploading the writing sample.'); } setSuccess(null); } }; return ( <Box p={4} maxWidth="600px" mx="auto"> <Typography variant="h4" gutterBottom> Upload Writing Sample </Typography> {error && ( <Alert severity="error" sx={{ mb: 2 }}> {error} </Alert> )} {success && ( <Alert severity="success" sx={{ mb: 2 }}> {success} </Alert> )} <form onSubmit={handleSubmit}> <Stack spacing={3}> <TextField label="Persona Name" variant="outlined" fullWidth value={name} onChange={(e) => setName(e.target.value)} required inputProps={{ maxLength: 100 }} /> <TextField label="Writing Sample" variant="outlined" fullWidth multiline rows={6} value={writingSample} onChange={(e) => setWritingSample(e.target.value)} required /> <Button type="submit" variant="contained" color="primary" size="large"> Submit </Button> </Stack> </form> </Box> ); }; export default UploadSample; // src/components/Layout/NavBar.tsx import React from 'react'; import { AppBar, Toolbar, Tabs, Tab, Box } from '@mui/material'; import { Link, useLocation, LinkProps } from 'react-router-dom'; import { styled } from '@mui/system'; import { TabProps } from '@mui/material/Tab'; const NavBar: React.FC = () => { const location = useLocation(); const currentPath = location.pathname; const StyledTab = styled(Tab)<TabProps & LinkProps>(({ theme }) => ({ // Extend with LinkProps color: '#ffffff', fontWeight: 'bold', textTransform: 'none', '&.Mui-selected': { color: '#ffffff', backgroundColor: '#333333', borderRadius: theme.spacing(0.5), }, '&:hover': { color: '#aaaaaa', }, })); const StyledAppBar = styled(AppBar)({ backgroundColor: '#000000', boxShadow: 'none', }); return ( <StyledAppBar position="static"> <Toolbar> <Box sx={{ flexGrow: 1 }}> <Tabs value={currentPath} TabIndicatorProps={{ style: { backgroundColor: '#ffffff' } }}> <StyledTab label="Upload Sample" value="/" component={Link} to="/" /> <StyledTab label="Personas" value="/personas" component={Link} to="/personas" /> <StyledTab label="Blog Posts" value="/blog-posts" component={Link} to="/blog-posts" /> </Tabs> </Box> </Toolbar> </StyledAppBar> ); }; export default NavBar; // src/components/ProtectedRoute.tsx import React from 'react'; import { Navigate } from 'react-router-dom'; interface ProtectedRouteProps { children: JSX.Element; } const ProtectedRoute: React.FC<ProtectedRouteProps> = ({ children }) => { const token = localStorage.getItem('access_token'); return token ? children : <Navigate to="/login" replace />; }; export default ProtectedRoute; // src/App.tsx import React from 'react'; import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; import UploadSample from './components/GhostWriter/UploadSample'; import PersonaList from './components/GhostWriter/PersonaList'; import GenerateContent from './components/GhostWriter/GenerateContent'; import BlogPosts from './components/GhostWriter/BlogPosts'; import NavBar from './components/Layout/NavBar'; import Login from './components/Auth/Login'; import ProtectedRoute from './components/ProtectedRoute'; // Import ProtectedRoute const App: React.FC = () => { return ( <Router> <NavBar /> <div style={{ padding: '20px' }}> <Routes> <Route path="/login" element={<Login />} /> <Route path="/" element={ <ProtectedRoute> <UploadSample /> </ProtectedRoute> } /> <Route path="/personas" element={ <ProtectedRoute> <PersonaList /> </ProtectedRoute> } /> <Route path="/generate" element={ <ProtectedRoute> <GenerateContent /> </ProtectedRoute> } /> <Route path="/blog-posts" element={ <ProtectedRoute> <BlogPosts /> </ProtectedRoute> } /> </Routes> </div> </Router> ); }; export default App; // src/main.tsx import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; const root = ReactDOM.createRoot( document.getElementById('root') as HTMLElement ); root.render( <React.StrictMode> <App /> </React.StrictMode> ); #root { max-width: 1280px; margin: 0 auto; padding: 2rem; text-align: center; } .logo { height: 6em; padding: 1.5em; will-change: filter; transition: filter 300ms; } .logo:hover { filter: drop-shadow(0 0 2em #646cffaa); } .logo.react:hover { filter: drop-shadow(0 0 2em #61dafbaa); } @keyframes logo-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @media (prefers-reduced-motion: no-preference) { a:nth-of-type(2) .logo { animation: logo-spin infinite 20s linear; } } .card { padding: 2em; } .read-the-docs { color: #888; } <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Vite + React + TS</title> </head> <body> <div id="root"></div> <script type="module" src="/src/main.tsx"></script> </body> </html>

**Overview of the Existing Application** The provided application is a Django backend with a React frontend. It appears to be a content generation platform where users can: - **Upload writing samples** to create personas. - **Analyze writing samples** to extract writing styles and personality traits. - **Generate content** based on a persona and a user-provided prompt. - **View generated content** in the form of blog posts. Key technologies and components used: - **Backend**: Django REST Framework, SQLite, JWT authentication, integration with Anthropic's API for content generation. - **Frontend**: React with TypeScript, Material-UI for UI components, React Router for navigation. **Analysis and Recommendations** To transform this application into a minimally viable product (MVP) that can be packaged and sold as a SaaS, we'll need to address several areas: 1. **Security Enhancements** 2. **Scalability and Deployment** 3. **API Improvements** 4. **Frontend Enhancements** 5. **User Management and Onboarding** 6. **Billing and Subscription Management** 7. **Compliance and Data Privacy** --- ### 1. Security Enhancements **Issue**: Sensitive information like `SECRET_KEY` is hard-coded, and `DEBUG` mode is set to `True`. The application uses `SQLite`, which is not suitable for production. **Recommendations**: - **Environment Variables**: Use environment variables to manage sensitive settings. Utilize packages like `python-decouple` or Django's built-in `os.environ`. ```python # settings.py import os SECRET_KEY = os.getenv('SECRET_KEY') DEBUG = os.getenv('DEBUG', 'False') == 'True' ``` - **Secure API Keys**: Ensure `ANTHROPIC_API_KEY` is stored securely and not exposed in the codebase. - **Production Settings**: Create separate settings files for development and production. Use `django-environ` or similar to manage configurations. - **Database Security**: Switch from `SQLite` to a more robust database like PostgreSQL, which is better suited for concurrent access and scalability. - **HTTPS Enforcement**: Ensure all communications are over HTTPS to protect data in transit. - **CORS Configuration**: Set `ALLOWED_HOSTS` and configure `CORS_ALLOWED_ORIGINS` appropriately for production. --- ### 2. Scalability and Deployment **Issue**: The application isn't configured for production deployment, and there's no mention of how to handle scaling. **Recommendations**: - **Containerization**: Use Docker to containerize the application, making it easier to deploy and manage. - **Orchestration**: Consider using Kubernetes or Docker Compose for orchestration, especially if expecting high traffic. - **Load Balancing**: Implement load balancers to distribute traffic efficiently. - **Caching**: Use caching mechanisms like Redis to improve performance. - **Static and Media Files**: Use services like Amazon S3 or Azure Blob Storage to serve static and media files. - **Automated Deployment**: Set up CI/CD pipelines using tools like GitHub Actions, Jenkins, or GitLab CI/CD. --- ### 3. API Improvements **Issue**: The API lacks versioning, rate limiting, and comprehensive error handling. **Recommendations**: - **API Versioning**: Implement versioning to manage API changes without breaking existing clients. ```python # backend/urls.py urlpatterns = [ path('api/v1/', include('core.urls')), ] ``` - **Rate Limiting**: Use packages like `django-ratelimit` or configure at the API gateway level to prevent abuse. - **Throttling**: Configure throttling classes in Django REST Framework. ```python REST_FRAMEWORK = { 'DEFAULT_THROTTLE_CLASSES': [ 'rest_framework.throttling.UserRateThrottle' ], 'DEFAULT_THROTTLE_RATES': { 'user': '1000/day' } } ``` - **Error Handling**: Implement custom exception handlers to provide meaningful error messages. - **Documentation**: Use tools like Swagger or ReDoc to provide API documentation. --- ### 4. Frontend Enhancements **Issue**: The frontend lacks responsiveness, error handling, and a polished UI/UX. **Recommendations**: - **Responsive Design**: Ensure the UI is responsive across different devices and screen sizes. - **Error Handling**: Implement global error handling to catch and display errors gracefully. - **Loading States**: Provide feedback during API calls with loading indicators. - **Form Validation**: Add client-side validation to improve user experience. - **UI/UX Improvements**: Engage a designer to polish the interface, making it more intuitive and appealing. - **Testing**: Implement frontend tests using Jest and React Testing Library. --- ### 5. User Management and Onboarding **Issue**: The application uses default Django `User` models and lacks features like user registration, password reset, and email verification. **Recommendations**: - **Custom User Model**: Extend Django's `AbstractUser` to add custom fields if necessary. - **User Registration**: Implement user registration with email verification to prevent fake accounts. - **Password Management**: Add password reset and change functionalities. - **Profile Management**: Allow users to manage their profiles, including updating personal information and preferences. - **Social Authentication**: Consider adding social login options (Google, Facebook, etc.) for easier onboarding. --- ### 6. Billing and Subscription Management **Issue**: There's no billing system to handle subscriptions or payments, which is essential for a SaaS product. **Recommendations**: - **Payment Gateway Integration**: Integrate with payment gateways like Stripe or PayPal to handle payments securely. - **Subscription Plans**: Define different subscription tiers offering varying levels of access and features. - **Usage Tracking**: Implement tracking to monitor API usage, storage, and other metrics for billing purposes. - **Automated Invoicing**: Generate invoices and receipts automatically upon payment. - **Dunning Management**: Handle failed payments and notify users to update their payment information. --- ### 7. Compliance and Data Privacy **Issue**: As a SaaS product, you must comply with regulations like GDPR, CCPA, and others depending on your target market. **Recommendations**: - **Privacy Policy and Terms of Service**: Draft clear policies outlining data usage. - **Data Encryption**: Encrypt sensitive data both at rest and in transit. - **Data Deletion**: Allow users to request data deletion to comply with regulations. - **Audit Logs**: Keep logs of user activities for security audits. - **Cookie Consent**: Implement mechanisms to get user consent for cookies and tracking. --- **Additional Technical Improvements** - **Logging and Monitoring**: Use tools like Sentry for error tracking and ELK Stack (Elasticsearch, Logstash, Kibana) for logging. - **Background Tasks**: Use Celery with a message broker like RabbitMQ or Redis for handling asynchronous tasks, such as content generation which might be time-consuming. - **WebSockets**: If real-time updates are necessary, consider using Django Channels. - **Testing**: Write unit tests and integration tests for both backend and frontend to ensure code quality. - **Documentation**: Provide developer documentation and user guides. --- **Rebuilding the Application** Given the above recommendations, here's how we can rebuild the application: ### Backend (Django) 1. **Project Setup**: - Create a new Django project with separate settings for development and production. - Use `django-environ` to manage environment variables. 2. **Database**: - Use PostgreSQL for the database. - Configure connection settings via environment variables. 3. **Authentication and Authorization**: - Implement JWT authentication using `SimpleJWT`. - Add endpoints for registration, login, logout, password reset, and email verification. 4. **Models**: - **User**: Extend `AbstractUser` for flexibility. - **Profile**: Create a profile model linked to the user if additional fields are needed. - **Persona**: As per the existing model, but ensure `data` field is securely handled. - **ContentPiece**: As per the existing model, with added fields for publishing status and scheduling if needed. - **Subscription**: Model to handle user subscriptions and payment status. 5. **Views and Serializers**: - Use Django REST Framework's `ViewSets` and `Serializers` for CRUD operations. - Implement custom permissions to restrict access where necessary. 6. **Third-party Integrations**: - **Anthropic API**: Ensure API keys are securely stored and handle exceptions. - **Payment Gateway**: Integrate Stripe for handling subscriptions. 7. **Asynchronous Tasks**: - Set up Celery for background processing. - Offload tasks like content generation to Celery workers. 8. **API Documentation**: - Use `drf-yasg` or `drf-spectacular` to generate Swagger or OpenAPI documentation. 9. **Testing**: - Write tests for models, views, serializers, and tasks. ### Frontend (React with TypeScript) 1. **Project Setup**: - Use Create React App or Vite with TypeScript. - Configure ESLint and Prettier for code quality. 2. **State Management**: - Use React Context or a state management library like Redux Toolkit. 3. **Routing**: - Use React Router v6 for client-side routing. 4. **Authentication**: - Implement token storage securely, preferably using HTTP-only cookies to mitigate XSS attacks. 5. **UI/UX**: - Use Material-UI or another component library. - Implement responsive design with a mobile-first approach. 6. **Error Handling**: - Centralize error handling to catch API errors and display user-friendly messages. 7. **Forms and Validation**: - Use Formik and Yup for form handling and validation. 8. **Testing**: - Write unit tests with Jest and integration tests with React Testing Library. ### Deployment 1. **Backend Deployment**: - Use a PaaS like Heroku, AWS Elastic Beanstalk, or containerize with Docker and deploy to AWS ECS, Google Cloud Run, or Azure App Service. 2. **Frontend Deployment**: - Host on platforms like Netlify, Vercel, or serve static files via a CDN. 3. **CI/CD**: - Set up pipelines for automated testing and deployment. 4. **Domain and SSL**: - Purchase a domain and set up SSL certificates using Let's Encrypt or via your cloud provider. --- **Packaging as a SaaS** To package and sell the application as a SaaS: - **Multi-tenancy**: Design the application to support multiple tenants (clients) securely. - **Isolated Databases**: Use separate databases for each tenant or include a tenant identifier in your data models. - **Onboarding Flow**: - Allow organizations to sign up, possibly with custom domains. - **Admin Panel**: - Provide an admin interface for managing users, subscriptions, and analytics. - **Analytics and Reporting**: - Implement dashboards to show users their usage statistics, generated content metrics, etc. - **Support and Feedback Mechanism**: - Include a way for users to contact support or provide feedback directly from the application. --- **Conclusion** By addressing the security issues, improving scalability, enhancing the user experience, and adding essential SaaS features like billing and multi-tenancy, the application can be transformed into a robust MVP ready for market. **Next Steps**: 1. **Plan**: Outline a detailed roadmap prioritizing essential features for the MVP. 2. **Team**: Assemble a development team or assign roles if working solo. 3. **Development**: Implement the changes incrementally, ensuring that each component is tested thoroughly. 4. **Testing**: Engage in rigorous testing cycles, including beta testing with a small group of users. 5. **Launch**: Deploy the application to a production environment and monitor closely. 6. **Feedback Loop**: Collect user feedback and iterate on the product accordingly. **Additional Resources**: - **Security Best Practices**: [OWASP Top Ten](https://owasp.org/www-project-top-ten/) - **Django Deployment Checklist**: [Django Docs](https://docs.djangoproject.com/en/stable/howto/deployment/checklist/) - **SaaS Pricing Models**: Research different pricing strategies suitable for your target market. By focusing on these areas, you can rebuild the application into a viable SaaS product that meets industry standards and provides value to your users.