Apppublic

Shinhati2023/product-grit

sourceHugging Faceupdated 8mo agoView on Hugging Face

0likes

App README

Product Grit Marketplace

Product Grit is a mobile-first, high-performance marketplace feed built with React, Vite, and Tailwind CSS. It features a "Liquid Glass" aesthetic and integrates directly with Hugging Face Datasets for persistent image storage.

🔗 Dataset Connection

This application is connected to the following dataset for storage:

—Dataset Name: Shinhati2023/gallery-storage
—Function: User-uploaded images are automatically pushed to this dataset.
—Persistence: Images persist even if the Docker container restarts.

✨ Key Features

—Liquid Glass UI: A sophisticated, frosted-glass interface designed for modern mobile displays.
—Zero-State Workspace: Starts with a clean slate; content appears only after user interaction.
—Direct Uploads: Seamless integration with the Hugging Face Hub API to push content to Shinhati2023/gallery-storage.
—Mobile Optimized: Snap-scrolling, touch-friendly interactions, and hidden scrollbars for a native app feel.

🛠️ Tech Stack

—Framework: React 18 + TypeScript
—Build Tool: Vite
—Styling: Tailwind CSS + Framer Motion
—Storage: Hugging Face Hub (@huggingface/hub)
—Deployment: Docker (Node 20 Alpine)

🚀 Environment Configuration

To run this Space, you must configure the following Secret in your Space Settings:

Variable	Description
`VITE_HF_TOKEN`	A Hugging Face Write token. This authorizes the app to upload images to `Shinhati2023/gallery-storage`.

Note: Go to Settings > Variables and secrets to add this token.

📦 Local Development

To run this project locally:

1.Clone the repository:

bash

    git clone [https://huggingface.co/spaces/Shinhati2023/product-grit](https://huggingface.co/spaces/Shinhati2023/product-grit)
    cd product-grit

1.Install dependencies:

bash

    npm install

1.Set up environment: Create a .env file in the root:

env

    VITE_HF_TOKEN=your_hf_write_token_here

1.Run the development server:

bash

    npm run dev