Choose your own adventure story generator built for the Supabase hackathon
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.
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
└── ...
- 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.
To make the application run locally on your computer, you can follow the below steps:
Follow the steps below to setup the project locally:
-
Clone the repository:
git clone https://github.com/NeoFoxxo/plottwist.git
-
Navigate to the project directory:
cd plottwist
You can use
npm / yarn / pnpm. Just replacepnpmwithnpmoryarnfor all the commands.
To run the client locally, follow the below steps:
-
Install the dependencies using pnpm / npm (make sure you have pnpm installed):
npm install
-
Start the development server for frontend:
npm run dev
-
Open your browser and visit
http://localhost:3000/to access the frontend of plottwist application.
- 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.
We welcome open-source contributions to Plottwist project ! If you would like to contribute, please follow the below steps:
- Fork the repository.
- Create a new branch for your feature/fix:
git checkout -b feature-name. - Make your changes and commit them:
git commit -m 'Add some feature'. - Push the changes to your forked repository:
git push origin feature-name. - Open a pull request to the main repository's
mainbranch.
This project is licensed under the GPL 3 License. Feel free to use, modify, and distribute the code as per the terms of the license.
If you have any questions, suggestions, or feedback, please don't hesitate to reach out to the project maintainer.