Skip to content

Latest commit

 

History

History
121 lines (88 loc) · 3.7 KB

README.md

File metadata and controls

121 lines (88 loc) · 3.7 KB
Raw

SFTP Generator

A modern and intuitive React + TypeScript application for generating and managing SFTP configurations. Built with a beautiful UI/UX design, this app features a multi-step form wizard, profile management, and dark/light mode support. Perfect for developers who need to manage multiple SFTP configurations for VSCode or other tools.

SFTP Generator Preview

✨ Features

  • Multi-step Form Wizard: Intuitive step-by-step process for creating SFTP configurations
  • Profile Management: Save, load, and delete SFTP configuration profiles
  • Light/Dark Mode: Beautiful light and dark themes with smooth transitions
  • Authentication Options: Support for both password and key-based authentication
  • Advanced Configuration: Customize host, port, path mappings, and more
  • Real-time Validation: Input validation with helpful error messages
  • JSON Preview: Live preview of the generated configuration with syntax highlighting
  • Modern UI/UX: Clean, responsive layout built with Tailwind CSS
  • Type Safety: Built with TypeScript for robust code quality

🚀 Getting Started

Prerequisites

  • Node.js (v16 or higher)
  • npm (v8 or higher)

Installation

  1. Clone the repository

    git clone https://github.com/marcstampfli/sftp-generator.git
cd sftp-generator

  2. Install dependencies

    npm install

  3. Start the development server

    npm start

    The app will be available at http://localhost:3000

Building for Production

npm run build

🛠 Usage

  1. Create a New Configuration:

    • Fill out the multi-step form with your SFTP server details
    • Choose between password or key-based authentication
    • Configure additional options like path mappings

  2. Save and Manage Profiles:

    • Save your configurations as profiles for quick access
    • Load existing profiles to modify settings
    • Delete profiles you no longer need

  3. Export Configuration:

    • Preview the generated JSON configuration
    • Copy to clipboard or download as a file
    • Use in your VSCode or other SFTP-compatible tools

🔧 Project Structure

sftp-generator/
├── src/
│   ├── components/
│   │   ├── common/         # Reusable UI components
│   │   ├── forms/          # Form components and steps
│   │   ├── profile/        # Profile management
│   │   └── output/         # JSON output components
│   ├── services/           # SFTP and utility services
│   ├── types/              # TypeScript type definitions
│   └── styles/             # Global styles and Tailwind config
├── server/                 # Backend server for SFTP operations
└── public/                 # Static assets

💻 Technologies

  • Frontend:

    • React 18
    • TypeScript
    • Tailwind CSS
    • React Icons
    • React Hook Form

  • Backend:

    • Node.js
    • Express
    • SSH2 (for SFTP operations)

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.

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

📝 License

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

🙏 Acknowledgments

  • React and TypeScript teams for the amazing development experience
  • Tailwind CSS team for the utility-first CSS framework
  • All contributors who help improve this project