Welcome to FlowLink! This project allows users to create custom automation workflows by connecting popular services like Google Drive, Slack, Discord, and Notion. It is designed with usability, flexibility, and seamless integration in mind. Let's dive in! š
š Website Link: FlowLink
š„ Demo Video
https://github.com/DhruvSharma19/FlowLink/assets/112254552/e83e0502-e957-49af-81ea-ab906b6f9899
š ļø System Diagrams

š Key Features
- Workflow Automation: Build custom workflows by connecting nodes on a canvas-based editor, enabling triggers and actions between different services.
- Interactive UI: Experience smooth navigation with features like infinite carousels, mini-maps, translucent navbars, and 3D card animations.
- Integrated Services: Seamlessly integrate with Google Drive, Slack, Discord, and Notion for a connected automation experience.
- Customizable Templates: Create and test message templates for automated actions, with support for light and dark modes for improved accessibility.
š Technologies Used
Front-End:
- Next.js 14: Employed for efficient server-side rendering and routing, ensuring fast loading times and smooth navigation. š
- Tailwind CSS: Utilized for rapid UI development and customization, enabling easy creation of responsive and visually appealing designs. šØ
- ShadCN UI: Integrated to enhance user experience with modern and visually pleasing interface components, elevating the overall look and feel of the application. āØ
Back-End:
- Prisma: Chosen for data management to facilitate efficient database operations, simplifying CRUD operations and data manipulation. š¼
- Neon databases: Utilized for optimized data storage and retrieval, ensuring scalability and performance for handling large datasets. š ļø
- Clerk: Implemented for secure user authentication and management, providing robust user authentication features with ease of integration. š
- Stripe: Integrated for seamless billing and payment processing, enabling secure and hassle-free transactions within the application. š³
Additional Tools:
- Google APIs: Leveraged for various functionalities such as maps, authentication, and data retrieval, enhancing the application's features and capabilities. š
- Uploadcare: Utilized for seamless handling of file uploads and management, ensuring smooth user experience in uploading and accessing files. š
- TSParticles: Incorporated for visually stunning effects, enhancing the overall user experience with captivating visuals and interactive elements. š
š¼ļø Screenshots

š Getting Started
To get started with FlowLink, follow these steps:
Clone the Repository:
git clone https://github.com/DhruvSharma19/FlowLink.git
cd FlowLink
Install Dependencies:
npm install
Set Up Environment Variables:
Create a .env
file in the root directory and add the necessary environment variables.
Run the Development Server:
npm run dev
The application should now be running on http://localhost:3000
.
Build for Production:
npm run build
npm start
š¤ Contributions
We welcome contributions to FlowLink! To contribute:
Fork the Repository:
Click the "Fork" button at the top right corner of the repository page.
Clone Your Fork:
git clone https://github.com/your-username/FlowLink.git
cd FlowLink
Create a New Branch:
git checkout -b feature/your-feature-name
Make Your Changes:
Implement your feature or fix the bug.
Commit Your Changes:
git add .
git commit -m "Add your commit message here"
Push to Your Fork:
git push origin feature/your-feature-name
Create a Pull Request:
Open a pull request from your forked repository's branch to the main branch of the original repository.
We appreciate your contributions and will review your pull request as soon as possible!
š Acknowledgements
A big thank you to everyone who contributed to this project! We appreciate your support and feedback.
If you have any questions or need assistance, feel free to open an issue or reach out to the project maintainers. Enjoy using FlowLink and happy coding! āØ