StoryWeaver is a pioneering collaborative fiction platform that harnesses real-time multi-user editing, AI-powered narrative generation. Designed for writers who thrive on collaboration and readers seeking immersive storytelling, StoryWeaver seamlessly blends community creativity with structured authorial control. Empowering users with intuitive co-authoring tools, AI-driven creative assistance, StoryWeaver provides a vibrant and dynamic environment for crafting, exploring, and personalizing narratives, making it the ultimate destination for casual and dedicated storytellers alike.

Production Deployment: https://storyweaver-next.vercel.app/

• Not in any way affiliated with "story-weaver.ai"
• Clerk is stuck in development mode because you can't create a production instance without paying for and owning a domain.

• Implement live autosaving
• Make title editable
• Add search functionality
• Implement live collaboration with LiveBlocks
• Implement permissions system
• Implement visibility, like, and favorite features
• Implement AI features
• Update Documentation
• Finish videos

• Clean up some styling, add disclaimer for mobile users
• Notifications (have to rethink component tree for this)
• Fix bug with comment usernames only being anonymous
• Have some indication of story visibility without having to enter the editor
• Friends/Followers system
• Changing story ownership
• Markdown support for AI responses
• AI autocomplete
• Agentic AI inline story editing
• Story branching
• Story thumbnails

1. Clone the repository.

2. Make sure you are using the latest Node LTS version at the time of the last commit [v22.x].

3. Run npm i -g pnpm@latest-10 to install pnpm.

4. Run pnpm i to install the dependencies.

5. Ignore the next step if you are a grader, please use the .env and .env.local files included on Canvas which have the development keys.

6. Set up a project on Clerk, NeonDB, and Liveblocks and include all the relevant API keys in your .env and .env.local.

7. Run pnpx prisma generate to generate the prisma client.

To create a production version of the app:

1. Run pnpm build to create an optimized production build of the app.

2. You can preview the production build with pnpm start and click the localhost link in the console to open the app in a new browser tab.

1. Run pnpm dev to start the development server and click the localhost link in the console to open the app in a new browser tab.

1. Run pnpm lint to run prettier and eslint.

2. Run pnpm format to format with prettier.

Refer to the Project Proposal document for more information on the project.

Refer to the Project Proposal document for the module diagram.

These are deprecated because a lot of changes had to be made in terms of what features could make it into the MVP. Please refer to the project proposal pdf for a rough visualization of the react component heirarchy of the production MVP.

UI Mockups

Refer to the FP Usage document for more information on the FP principles used in this project.

Refer to this video for a walkthrough of the FP principles used in this project.

Refer to this video for a demo of the project.

I used Cursor in Agent mode with claude-3.7-sonnet-thinking and also Tab Autocomplete to help me with various aspects of this project:

1. Type/Model Definitions: AI helped design and implement well-structured TypeScript type and Prisma model definitions for the application.

2. Code Refactoring: AI provided suggestions for refactoring code to better adhere to functional programming principles.

3. Bug Detection: AI identified potential logical issues and type mismatches that were fixed during development.

4. UI Generation: AI helped a lot with building lots of frontend components quickly.

Some prompts I used:

• Help me fix the bugs with autosaving.
• Why is the next build throwing an error?
• What is the difference between useRouter and next/navigation?
• Use shadcn-ui to implement a text input and relevant buttons for the ai-drawer.
• Move story card data into its own component and create buttons with appropriate tailwind styling for liking and favoriting.
• Help me move the AI text generation code which needs the gemini api key to a backend endpoint.
• Generate counterexamples that show the opposite/broken principles for the examples of good functional programming principles present in @FP-Usage.md.
• Can you update @README.md and @FP-Usage.md to reflect all the changes we've made to the codebase together today?

Everything generated by the Agent was manually verified and/or edited by me to ensure it was correct and working as expected.