https://github.com/shahdinsalman23/docs-mini-app

Docs Mini App is an interactive document management tool built with React.js and Vite. It features draggable document cards and dynamic file actions, making it a responsive, engaging, and lightweight mini-app for document handling.
https://github.com/shahdinsalman23/docs-mini-app

framer-motion reactjs vite

Last synced: about 2 months ago
JSON representation

Docs Mini App is an interactive document management tool built with React.js and Vite. It features draggable document cards and dynamic file actions, making it a responsive, engaging, and lightweight mini-app for document handling.

• Host: GitHub
• URL: https://github.com/shahdinsalman23/docs-mini-app
• Owner: shahdinsalman23
• Created: 2024-11-08T18:46:10.000Z (about 2 months ago)
• Default Branch: main
• Last Pushed: 2024-11-08T19:05:44.000Z (about 2 months ago)
• Last Synced: 2024-11-08T19:42:41.646Z (about 2 months ago)
• Topics: framer-motion, reactjs, vite
• Language: JavaScript
• Homepage: https://docs-mini-app-shahdin.vercel.app/
• Size: 0 Bytes
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
#  Docs Mini App

An interactive document management mini-app built with **React.js** and **Vite**. This project features draggable document cards, each representing different file actions, and is designed for an engaging and responsive user experience.

## ✨ Features

- **Draggable Document Cards**: Users can drag document cards across the interface, adding a fun and functional UI component.

- **Smooth Animations with Framer Motion**: Utilizes Framer Motion for animations and transitions to enhance user interaction.

- **Customizable Tags and Icons**: Dynamic tags that change based on file actions (download/upload) and include popular icons with React Icons.

  

## 🛠️ Tech Stack

- **React.js**: A popular library for building interactive UIs.

- **Vite**: A development tool for fast builds and optimized production.

- **Framer Motion**: For adding smooth animations to card interactions.

- **React Icons**: For incorporating accessible icons.

##  Getting Started

### Prerequisites

Ensure that **Node.js** and **npm** are installed.

### Installation

1. **Clone the repository**:

   ```bash

   git clone https://github.com/your-username/docs-mini-app.git

## 📂 Project Structure

```plaintext

src/

├── Card.js         # Component for individual document cards

├── Foreground.js   # Component to render all draggable cards

└── App.js          # Main app component