Switch

A web application for clothing design, generation, and sharing.
Users can create unique clothing items, experiment with different styles, and share their creations with the community.

• Framework: React
• Build Tool: Vite
• Styling: Tailwind CSS
• BaaS: Supabase

• Runtime: Node.js
• Framework: Express
• AI Integration: Google Generative AI (Gemini)
• BaaS: Supabase

git clone https://github.com/your-username/nanofashion.git
cd nanofashion

npm install

cd api
npm install

You’ll need two .env files — one in the root for the frontend and one in the api directory for the backend.

Create a .env file in the project root and add:

VITE_SUPABASE_URL="https://your-supabase-url.supabase.co"
VITE_PROJECT_ID="your-project-id"
VITE_SUPABASE_KEY="your-supabase-anon-key"
VITE_BACKEND_URL="https://your-backend-url.onrender.com"

Create a .env file in the api folder and add:

PORT=5000
GEMINI_API_KEY="your-google-gemini-api-key"

# Supabase configuration
VITE_SUPABASE_URL="https://your-supabase-url.supabase.co"
VITE_PROJECT_ID="your-project-id"
SUPABASE_SERVICE_KEY="your-supabase-service-role-key"
VITE_SUPABASE_KEY="your-supabase-anon-key"

Important:
Never expose private or service-role Supabase keys in public repositories.
Keep .env files excluded from Git using a .gitignore file.

npm run dev

cd api
npm run dev

Both servers should now be running locally — typically:

• Frontend → http://localhost:5173
• Backend → http://localhost:5000

To run the app, you’ll need:

• Supabase Project Keys:
  From your Supabase Project Settings → API.
• Google Generative AI (Gemini) Key:
  From Google AI Studio.

Add them to the .env files as shown above.

1. Generated Clothes Not Visible Immediately

   • After generating new clothing designs, they don’t appear instantly.
   • Workaround: Refresh the page or click Creations → Clothes again.
   • Fix coming in the next push.

2. Enhanced Prompt Display Format

   • The enhanced prompt currently returns as raw JSON instead of formatted text.
   • Will be fixed in the next update.

• Fix for immediate item rendering post-generation.
• Proper parsing of AI-enhanced prompts.
• Integration of user profiles and community sharing.
• Gallery view with filters and search.
• Better mobile responsiveness.

Vinay Kumar
UI/UX Designer & Full Stack Developer
📎 GitHub • Behance