FlowLink Tailwind Templates

Flowlink

šŸš€ FlowLink is an automation platform that connects Google Drive, Slack, Discord, and Notion for custom workflows. Built with Next.js 14 and Tailwind CSS, it features 3D animations and a smooth UI. Prisma and Neon manage the backend, with Stripe for billing and Clerk for authentication. āš”ļø

šŸš€ FlowLink - Automation Platform

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

diagram diagram (1) Screenshot_3-6-2024_121518_diagrams helpful dev

🌟 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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

šŸš€ Getting Started

To get started with FlowLink, follow these steps:

  1. Clone the Repository:

    git clone https://github.com/DhruvSharma19/FlowLink.git
    cd FlowLink
    
  2. Install Dependencies:

    npm install
    
  3. Set Up Environment Variables: Create a .env file in the root directory and add the necessary environment variables.

  4. Run the Development Server:

    npm run dev
    

    The application should now be running on http://localhost:3000.

  5. Build for Production:

    npm run build
    npm start
    

šŸ¤ Contributions

We welcome contributions to FlowLink! To contribute:

  1. Fork the Repository: Click the "Fork" button at the top right corner of the repository page.

  2. Clone Your Fork:

    git clone https://github.com/your-username/FlowLink.git
    cd FlowLink
    
  3. Create a New Branch:

    git checkout -b feature/your-feature-name
    
  4. Make Your Changes: Implement your feature or fix the bug.

  5. Commit Your Changes:

    git add .
    git commit -m "Add your commit message here"
    
  6. Push to Your Fork:

    git push origin feature/your-feature-name
    
  7. 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! ✨

Top categories

Loading Svelte Themes