Bookwiz.io - Prototype Version

Overview

A simple prototype to test the core UI concept of Bookwiz.io - a 3-column writing interface similar to code editors. This version focuses only on the layout and basic interaction patterns without any backend functionality.

Features

• Clean 3-column layout (File Explorer | Editor | Chat)
• Mock file tree with sample structure
• Basic text editor (textarea or simple Monaco setup)
• Static chat interface mockup
• Responsive design
• No authentication, database, or AI integration

Tech Stack

• Next.js 14 (App Router)
• Tailwind CSS
• React
• TypeScript (optional)

Quick Start

Prerequisites

• Node.js 18+
• npm or yarn

Installation

# Create Next.js project
npx create-next-app@latest bookwiz-prototype --typescript --tailwind --eslint --app

# Navigate to project
cd bookwiz-prototype

# Install additional dependencies (if using Monaco)
npm install @monaco-editor/react

# Start development server
npm run dev

Project Structure

bookwiz-prototype/
├── app/
│   ├── globals.css
│   ├── layout.tsx
│   └── page.tsx
├── components/
│   ├── FileExplorer.tsx
│   ├── Editor.tsx
│   ├── ChatPanel.tsx
│   └── Layout.tsx
└── lib/
    └── mockData.ts

Implementation Checklist

Phase 1: Basic Setup

• Create Next.js project with Tailwind CSS
• Set up TypeScript (optional)
• Create basic folder structure
• Set up globals.css with base styles

Phase 2: Layout Implementation

• Create main 3-column layout component
• Implement responsive grid/flexbox layout
• Add column resizing (optional)
• Test on different screen sizes

Phase 3: File Explorer

• Create mock file tree data structure
• Build file explorer component
• Add file/folder icons
• Implement expand/collapse for folders
• Add file selection highlighting

Phase 4: Editor

• Create basic text editor component (textarea)
• OR integrate Monaco Editor
• Add basic styling and focus states
• Show selected file name in editor
• Add word count display

Phase 5: Chat Panel

• Create static chat interface
• Add mock messages for demonstration
• Style chat bubbles (user vs AI)
• Add input field (non-functional)
• Add model selector dropdown (static)

Phase 6: Polish

• Add hover states and transitions
• Implement dark theme (optional)
• Add loading states
• Test user interactions
• Mobile responsiveness

Component Examples

Main Layout Structure

export default function Layout() {
  return (
    <div className="h-screen flex">
      {/* File Explorer */}
      <div className="w-64 bg-gray-100 border-r">
        <FileExplorer />
      </div>
      
      {/* Editor */}
      <div className="flex-1 flex flex-col">
        <div className="h-12 bg-white border-b flex items-center px-4">
          <span className="text-sm text-gray-600">chapter-1</span>
        </div>
        <div className="flex-1">
          <Editor />
        </div>
      </div>
      
      {/* Chat Panel */}
      <div className="w-80 bg-gray-50 border-l">
        <ChatPanel />
      </div>
    </div>
  );
}

Mock Data Structure

// lib/mockData.ts
export const mockProject = {
  name: "My Novel",
  files: [
    {
      id: 1,
      name: "outline",
      type: "file",
      content: "# Story Outline\n\n## Chapter 1\n- Introduction of main character\n- Setting the scene\n\n## Chapter 2\n- First conflict..."
    },
    {
      id: 2,
      name: "chapters",
      type: "folder",
      expanded: true,
      children: [
        {
          id: 3,
          name: "chapter-1",
          type: "file",
          content: "# Chapter 1: The Beginning\n\nIt was a dark and stormy night..."
        },
        {
          id: 4,
          name: "chapter-2",
          type: "file",
          content: "# Chapter 2: The Plot Thickens\n\nThe next morning brought new challenges..."
        }
      ]
    },
    {
      id: 5,
      name: "characters",
      type: "folder",
      children: [
        {
          id: 6,
          name: "protagonist",
          type: "file",
          content: "# Main Character\n\n**Name:** Sarah Chen\n**Age:** 28\n**Background:** Software engineer..."
        }
      ]
    }
  ]
};

export const mockMessages = [
  {
    id: 1,
    type: "user",
    content: "Help me improve the dialogue in chapter 1"
  },
  {
    id: 2,
    type: "ai",
    content: "I'd be happy to help improve the dialogue! Here are some suggestions for making it more natural and engaging..."
  }
];

Notes

• This is a static prototype for concept validation
• No backend functionality required
• Focus on UI/UX and user workflow
• Keep it simple and fast to implement
• Prioritize getting feedback quickly