StorySpark

StorySpark is a storytelling SaaS that uses AI-generated words and images to help individuals and businesses craft compelling stories. With a wide variety of storytelling options, Anyone to bring their vision to life with a simple prompt with StorySpark.
Explore the docs »

View Video Demo · Try Demo deployed on Vercel · Report Bug ·

Table of Contents

1. About The Project
   • Built With
2. Getting Started
   • Prerequisites
   • Installation
3. Usage
4. Roadmap
5. Contact
6. Acknowledgements

About The Project

Landing Page

Background

In a world that continuously promotes innovation, there are still many who experience issues such as difficulties ideating or writer's block in creative writing, due to unfamiliarity with topics or a lack of inspiration. Thankfully, there are AI-generated tools that facilitate this process by closing the information gap such as chatGPT and copy.ai.

We in team Guerilla believe that more can be done to facilitate innovation, hence we developed StorySpark - a multipurpose collaborative storytelling tool for both people and businesses.

By feeding in a category and tone of your choice, as well as an image and story prompt, StorySpark generates a story that is unique to each individual, and will be published to the platform for others to view.

(back to top)

Built With

This section should list any major frameworks/libraries used to bootstrap your project. Leave any add-ons/plugins for the acknowledgements section. Here are a few examples.

• 
• 
• 
• 
• 

(back to top)

Getting Started

To get a local copy up and running follow these simple example steps.

Prerequisites

This is an example of how to list things you need to use the software and how to install them.

• npm

  npm install npm@latest -g

Installation

Below is an example of how you can instruct your audience on installing and setting up your app. This template doesn't rely on any external dependencies or services.

1. Clone the repo

   git clone https://github.com/GRight-Hackathon/frontend.git

2. Install NPM packages

   npm install

3. Get your OpenAI private key and store it in an .env file in the root directory of the project under the name NEXT_PUBLIC_OPENAI_KEY. For example this should be how your .env file looks like:

   NEXT_PUBLIC_OPENAI_KEY.="INSERT_YOUR_API_KEY_HERE"

4. If you want to try our a dev deployment just run npm run dev to start this NextJS application.
5. If you need to build for production, just run npm run build to build a production ready application.

(back to top)

Usage

Home Page

1. Run npm run dev to get it running locally.

2. Click on Create Your Story or Browse Stories to get started.

3. Here, you are able to create any story, and if you would like to, switch to the Professional mode under Create -> Professional.

4. Simply fill in the book and create your very own AI-generated story with an accompanying image.

5. Here, you are view other stories people have created and catch all of them at a glance

(back to top)

Roadmap

(back to top)

Contact

Jason - Linkedin

Eugene - LinkedIn

Shaune - LinkedIn

Xuan Ming - LinkedIn

Project Link: GitHub

(back to top)

Acknowledgements

We made use of the following libraries in our application.

1. @react-pageflip
2. @Material-UI
3. tailwindcss

(back to top)