Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/neofoxxo/plottwist
Choose your own adventure story generator powered by AI
https://github.com/neofoxxo/plottwist
Last synced: about 2 months ago
JSON representation
Choose your own adventure story generator powered by AI
- Host: GitHub
- URL: https://github.com/neofoxxo/plottwist
- Owner: NeoFoxxo
- Created: 2024-04-13T12:21:39.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2024-04-23T03:41:59.000Z (8 months ago)
- Last Synced: 2024-05-30T02:17:02.742Z (7 months ago)
- Language: TypeScript
- Homepage: https://plottwistapp.com
- Size: 15.5 MB
- Stars: 14
- Watchers: 1
- Forks: 7
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Plot Twist 
[](https://codespaces.new/NeoFoxxo/plottwist/tree/main)
Choose your own adventure story generator built for the Supabase hackathon
## About the Project
Plot Twist is a fullstack application developed using NextJS, SmythOS and Supabase. You can create your own unique story and make choices based on the story outcome. This leverages AI to get unique and interesting choices for the user to choose, so that the outcome of the story is different everytime. You tell your own story and share it to the outer world. There are many things you could do with the story created by other users. You can remix other's stories or comment on them. You can also regenerate story that was not to your liking and save them.
## How to navigate the Project ?
The project consists `app` folder, which is responsible for handling frontend and backend features. Below are the details on how the folders are structured to better understand the architecture of the application.
```
📂root/
├── public/ # Public assets and HTML template
├── app/
│ ├── api/ # All main files
│ ├── app/ # Base app post login
│ ├── login/ # Login feature
│ ├── profile/ # Profile feature
│ ├── story/ # User story feature
│ ├── layout.tsx # Headers and footers for the app
│ └── page.tsx # Landing page
│
└── components/ # Client components for the UI
└── utils/ # React query and other utils
└── lib/ # Server & DB actions with supabase auth
└── ...
```
## Features ✨
- **User Authentication**: Users can create accounts, log in, and securely access their personalized profiles.
- **Responsive Design**: Enjoy a consistent and visually appealing experience across various devices.
- **User Profile**: User can manage their profile information and upload images.
- **Create Story**: Create your own unique stories powered by AI.
- **Comments**: Add a review comment for any story created by other users.
- **Remix**: Reuse stories created by other users to brew your own unique version of the story.
- **Bookmarks**: Bookmark your favourite stories to access them later.
## Installation 💻
To make the application run locally on your computer, you can follow the below steps:
### Project setup:
Follow the steps below to setup the project locally:
1. Clone the repository:
```bash
git clone https://github.com/NeoFoxxo/plottwist.git
```
2. Navigate to the project directory:
```bash
cd plottwist
```
> You can use `npm / yarn / pnpm`. Just replace `pnpm` with `npm` or `yarn` for all the commands.
### Frontend setup:
To run the client locally, follow the below steps:
1. Install the dependencies using pnpm / npm (make sure you have pnpm installed):
```bash
npm install
```
2. Start the development server for frontend:
```bash
npm run dev
```
3. Open your browser and visit `http://localhost:3000/` to access the frontend of plottwist application.
## Technologies Used 🔧
- **NextJS**: Used by some of the world's largest companies, Next.js enables you to create high-quality web applications with the power of React components.
- **Typescript**: TypeScript checks a program for errors before execution, ensures better developer experience.
- **React**: JavaScript library for building user interfaces.
- **React Query**: Also knows as Tanstack query for better data fetching.
- **TailwindCSS**: A utility-first CSS framework packed with classes.
- **Zod**: Zod for consistent input validation, data structuring, and error handling.
- **PostgreSQL**: Supabase is used to manage our postgres database.
## Contributing 🤝
We welcome open-source contributions to **Plottwist project** ! If you would like to contribute, please follow the below steps:
1. Fork the repository.
2. Create a new branch for your feature/fix: `git checkout -b feature-name`.
3. Make your changes and commit them: `git commit -m 'Add some feature'`.
4. Push the changes to your forked repository: `git push origin feature-name`.
5. Open a pull request to the main repository's `main` branch.
### Contributors
## License 📝
This project is licensed under the [GPL 3 License](LICENSE). Feel free to use, modify, and distribute the code as per the terms of the license.
## Contact 💬
If you have any questions, suggestions, or feedback, please don't hesitate to reach out to the project maintainer.