MindMap AI - Frontend

An intelligent mind mapping application built for the Modus x Hashnode Hackathon. This project leverages AI to enhance creativity and productivity through smart mind mapping capabilities.

🏆 Won 1st Runner Up and $2000 prize in the Modus x Hashnode Hackathon!

BLOG
IIT Madras Post
Backend Repo

Winners Blog

🚀 Features

• Interactive Mind Maps: Create, edit, and navigate dynamic mind maps with intuitive drag-and-drop functionality
• AI-Powered Suggestions: Get intelligent suggestions for expanding your mind maps
• Real-time Collaboration: Share and collaborate on mind maps with team members
• Export Options: Export your mind maps in various formats (PNG, PDF, JSON)
• Responsive Design: Works seamlessly across desktop, tablet, and mobile devices
• Auto-save: Never lose your work with automatic saving functionality

🛠️ Tech Stack

• Framework: Next.js 14
• Language: TypeScript
• Styling: Tailwind CSS
• UI Components: Custom components with Headless UI
• State Management: React Context
• API Integration: REST API with fetch/axios
• Deployment: Vercel

📋 Prerequisites

Before running this project, make sure you have the following installed:

• Node.js (v18 or higher)
• npm, yarn, pnpm, or bun package manager
• Git

🔧 Installation & Setup

1. Clone the repository

   git clone https://github.com/srthkdev/mindmap-frontend.git
   cd mindmap-frontend

2. Install dependencies

   npm install
   # or
   yarn install
   # or
   pnpm install
   # or
   bun install

3. Set up environment variables

   cp .env.example .env.local

   Update the environment variables in .env.local:

   NEXT_PUBLIC_API_URL=your_backend_api_url
   NEXT_PUBLIC_APP_URL=http://localhost:3000

4. Run the development server

   npm run dev
   # or
   yarn dev
   # or
   pnpm dev
   # or
   bun dev

5. Open your browser

   Navigate to http://localhost:3000 to see the application.

📁 Project Structure

mindmap-frontend/
├── app/                    # Next.js 14 app directory
│   ├── components/         # Reusable UI components
│   ├── hooks/             # Custom React hooks
│   ├── lib/               # Utility functions and configurations
│   ├── types/             # TypeScript type definitions
│   └── page.tsx           # Main page component
├── public/                # Static assets
├── styles/                # Global styles and Tailwind config
├── .env.example          # Environment variables template
├── next.config.js        # Next.js configuration
├── package.json          # Dependencies and scripts
├── tailwind.config.js    # Tailwind CSS configuration
└── tsconfig.json         # TypeScript configuration

🎯 Usage

Creating a Mind Map

1. Click on the "New Mind Map" button
2. Add a central topic/idea
3. Use the "+" button to add child nodes
4. Double-click on any node to edit its content

AI Features

• Smart Suggestions: Click the AI icon on any node to get content suggestions
• Auto-completion: Start typing and get AI-powered completions
• Theme Generation: Use AI to generate themed mind maps from a single keyword

Collaboration

• Share your mind map using the share button
• Invite collaborators via email
• See real-time changes from other users

Export Options

• PNG: High-quality image export
• PDF: Print-ready document format
• JSON: Raw data for integration with other tools

🔗 API Integration

This frontend connects to the MindMap AI backend API. Make sure to:

1. Set up the backend server (link to backend repo if available)
2. Configure the API URL in your environment variables
3. Ensure proper CORS settings for local development

🚀 Deployment

Deploy on Vercel (Recommended)

1. Connect your repository to Vercel

   • Visit Vercel
   • Import your GitHub repository
   • Configure environment variables

2. Automatic deployments

   • Push to main branch triggers automatic deployment
   • Preview deployments for pull requests

Deploy on other platforms

• Netlify: Connect repository and set build command to npm run build
• AWS Amplify: Use the AWS Amplify console to deploy
• Docker: Use the provided Dockerfile for containerized deployment

🤝 Contributing

We welcome contributions! Please follow these steps:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

Development Guidelines

• Follow the existing code style and conventions
• Write meaningful commit messages
• Add tests for new features
• Update documentation as needed

📝 License

This project is licensed under the MIT License. See the LICENSE file for details.

🏆 Hackathon Submission

This project was created for the Modus x Hashnode Hackathon. It demonstrates:

• Innovative use of AI in productivity tools
• Modern web development practices
• User-centered design principles
• Scalable architecture patterns

📞 Support & Contact

• Author: Sarthak Jain
• GitHub: @srthkdev
• Issues: Report issues

🙏 Acknowledgments

• Modus and Hashnode for organizing the hackathon
• Next.js team for the amazing framework
• Open source community for inspiration and resources

---

Happy Mind Mapping! 🧠✨