Inkwell Frontend

Inkwell is a web-based comic generation and storytelling platform. This repository contains the frontend code for the Inkwell project, built using Vite and Vue.js.

Table of Contents

• Features
• Tech Stack
• Project Structure
• Installation
• Usage
• Environment Variables
• Backend Repository
• Contributing
• License

Features

• Interactive and dynamic user interface for comic creation.
• Image generation using StableDiffusion (integrated with the backend).
• Organized project structure with reusable components.
• API integration for seamless communication with the backend.

Tech Stack

• Frontend: Vite, Vue.js, JavaScript
• Routing: Vue Router
• API Communication: Axios

Project Structure

inkwell-frontend/
├── eslint.config.js
├── index.html
├── jsconfig.json
├── package.json
├── package-lock.json
├── public
│   ├── favicon.ico
│   └── favicon.png
├── README.md
├── src
│   ├── App.vue
│   ├── assets
│   │   ├── base.css
│   │   ├── images
│   │   │   ├── auth
│   │   │   │   ├── cloud-bg.jpg
│   │   │   │   └── kid-pencil.jpg
│   │   │   ├── comics
│   │   │   │   ├── thumbnail-1.jpg
│   │   │   │   └── thumbnail-2.jpg
│   │   │   ├── dashboard
│   │   │   │   ├── comic.png
│   │   │   │   ├── create-story.png
│   │   │   │   ├── progress.png
│   │   │   │   └── writing-tips.png
│   │   │   └── home
│   │   │       ├── hero-image-darkened.jpg
│   │   │       └── hero-image.jpg
│   │   ├── logo.svg
│   │   └── styles
│   │       ├── main.css
│   │       ├── transitions.scss
│   │       └── _variables.scss
│   ├── components
│   │   └── Navigation.vue
│   ├── layouts
│   │   └── DefaultLayout.vue
│   ├── main.js
│   ├── router
│   │   ├── guards.js
│   │   └── index.js
│   ├── services
│   │   ├── apiClient.js
│   │   └── authService.js
│   ├── stores
│   │   ├── assessmentStore.js
│   │   ├── storyStore.js
│   │   └── userStore.js
│   ├── utils
│   │   └── auth_utils.js
│   └── views
│       ├── AssessmentIntro.vue
│       ├── AssessmentQuestion.vue
│       ├── ComicDetail.vue
│       ├── Comics.vue
│       ├── CreateStory.vue
│       ├── Dashboard.vue
│       ├── HomeView.vue
│       ├── LoginView.vue
│       ├── Progress.vue
│       ├── SignupView.vue
│       ├── StoryPicture.vue
│       ├── WritingTips.vue
│       └── WritingTipView.vue
└── vite.config.js

Installation

To set up the frontend locally, follow these steps:

Prerequisites

• Node.js (>= 16.x)
• npm or yarn

Steps

1. Clone the repository:

   git clone https://github.com/Olooce/inkwell-V2.0.git
   
   

2. Navigate into the project directory:

   cd inkwell-frontend
   

3. Install dependencies:

   npm install
   

   or

   yarn install
   
   

Usage

To start the development server, run:

npm run dev

or

yarn dev

The app will be available at http://localhost:5173/ (default Vite port).

Environment Variables

Create a .env file in the root directory and define the required environment variables:

VITE_DEV_IMAGE_URL = http://localhost:8080/api
VITE_DEV_BASE_URL = http://localhost:8080/api

Replace http://localhost:8000/api with the actual backend URL.

Backend Repository

The backend repository for Inkwell can be found here: Inkwell Backend

Contributing

Contributions are welcome! To contribute:

1. Fork the repository.
2. Create a new branch (feature-branch-name).
3. Make your changes and commit them.
4. Push to your fork and submit a pull request.

License

This project is licensed under the MIT License. See LICENSE for details.

---

Feel free to suggest improvements or report issues!