Marketplace Feed - Browse items in a beautiful 2-column grid layout
Item Details - View full item information with direct seller contact
Sell Item - Create listings with AI-powered description generation
Classify App is a modern, AI-powered marketplace mobile application built with React Native that revolutionizes the way people buy and sell second-hand items. The app combines cutting-edge AI technology with location-based discovery to create a seamless buying and selling experience.
- 🤖 AI-Powered Descriptions: Generate compelling, sales-oriented item descriptions automatically using Google Gemini AI - just enter your title, price, and category!
- 📍 Location-Based Discovery: Find items near you with intelligent geospatial search powered by MongoDB's 2dsphere indexing
- 📞 Direct Seller Contact: Connect with sellers instantly via one-tap phone calling - no chat delays
- 🎨 Premium UI/UX: Beautiful, modern interface with clean design principles and smooth navigation
- 📱 Cross-Platform: Native performance on both iOS and Android with a single codebase
- 2-Column Grid Layout: Beautiful card-based design showcasing items with images, prices, and categories
- Location-Based Filtering: Automatically shows items near your location
- Distance Display: See how far each item is from you with map pin indicators
- Category Badges: Quick visual identification of item categories (Electronics, Furniture, Clothing, Vehicles, Other)
- Pull-to-Refresh: Easy content refresh with a simple swipe
- Floating Action Button: Quick access to create new listings
- Immersive Image Display: Full-width hero images with gradient overlay for better visibility
- Comprehensive Information: Title, price, category, and detailed descriptions
- Seller Contact Section: Direct access to seller name and phone number
- One-Tap Calling: Initiate phone calls directly from the app
- Sheet-Style Layout: Modern bottom sheet design for smooth content presentation
- Image Upload: Easy photo capture from camera or gallery with Cloudinary integration
- Smart Form Fields: Title, price, category, and description inputs
- AI Description Generator:
- Enter title, price, and category
- Click "✨ Generate Description with AI"
- Get a persuasive, sales-oriented description automatically
- Category Selection: Horizontal chip-based category picker
- Seller Information: Name and phone number fields for direct contact
- Form Validation: Comprehensive validation before submission
- Automatic Location Detection: Uses device GPS to find your current location
- Geospatial Queries: MongoDB 2dsphere index for efficient location-based searches
- Radius Filtering: Find items within a specified radius (default: 10km)
- Fallback Support: Graceful handling when location permissions are denied
| Technology | Version | Purpose |
|---|---|---|
| React Native | 0.83.0 | Cross-platform mobile framework |
| TypeScript | 5.8.3 | Type-safe development |
| React Navigation | 6.1.9 | Native stack navigation |
| Axios | 1.6.2 | HTTP client for API calls |
| React Native Image Picker | 7.0.3 | Camera & gallery integration |
| Geolocation | 3.4.0 | Location services |
| Safe Area Context | 5.5.2 | Handle device notches and safe areas |
| Technology | Version | Purpose |
|---|---|---|
| Node.js | >=20 | Runtime environment |
| Express.js | 4.18.2 | RESTful API server |
| MongoDB | Latest | NoSQL database |
| Mongoose | 8.0.3 | MongoDB ODM |
| Cloudinary | 1.41.0 | Image storage & CDN |
| Google Gemini AI | 0.24.1 | AI description generation |
| Multer | 1.4.5 | File upload handling |
| CORS | 2.8.5 | Cross-origin resource sharing |
- Color Palette: Modern, clean colors with primary blue (#2563EB) and emerald green (#10B981)
- Typography: Consistent font sizes and weights for headings, body, and subtle text
- Spacing: Comfortable padding and margins (16px minimum on screen edges)
- Shadows: Subtle iOS-style shadows for depth
- Border Radius: 12px for small elements, 16px for cards, 24px for large buttons
Classify/
├── src/ # Frontend React Native code
│ ├── components/ # Reusable UI components
│ │ ├── Icon.tsx # Custom icon component
│ │ └── ItemCard.tsx # Item card for marketplace
│ ├── constants/ # App constants
│ │ └── designSystem.ts # Design system (colors, typography, spacing)
│ ├── hooks/ # Custom React hooks
│ │ └── useLocation.ts # Location detection hook
│ ├── navigation/ # Navigation setup
│ │ └── AppNavigator.tsx # Stack navigator configuration
│ ├── screens/ # App screens
│ │ ├── HomeScreen.tsx # Marketplace feed
│ │ ├── ItemDetailScreen.tsx # Item details view
│ │ └── SellItemScreen.tsx # Create listing form
│ ├── services/ # API services
│ │ └── api.ts # Axios-based API client
│ └── types/ # TypeScript type definitions
│ ├── item.ts # Item interfaces
│ └── navigation.ts # Navigation types
│
├── backend/ # Backend Node.js/Express server
│ ├── config/ # Configuration files
│ │ ├── cloudinary.js # Cloudinary setup
│ │ └── database.js # MongoDB connection
│ ├── controllers/ # Request handlers
│ │ ├── aiController.js # AI description generation
│ │ └── itemController.js # Item CRUD operations
│ ├── middleware/ # Express middleware
│ │ └── upload.js # Multer file upload config
│ ├── models/ # Mongoose schemas
│ │ └── Item.js # Item model with geospatial index
│ ├── routes/ # API routes
│ │ ├── aiRoutes.js # AI endpoints
│ │ └── itemRoutes.js # Item endpoints
│ ├── utils/ # Utility functions
│ │ └── cloudinaryUpload.js # Image upload helper
│ └── server.js # Express server entry point
│
└── docs/ # Documentation
├── SETUP.md # Setup instructions
├── TECH_STACK.md # Technology details
└── IMPLEMENTATION_SUMMARY.md # Implementation overview
GET /api/items- Get all items (with optional location filter)- Query params:
lat,long,radius(km)
- Query params:
GET /api/items/:id- Get single item by IDPOST /api/items- Create new item listing- Body:
{ title, description, price, category, imageUrl, location, sellerName, sellerPhone }
- Body:
POST /api/generate-description- Generate AI description- Body:
{ title, category, price } - Returns:
{ description }
- Body:
git clone https://github.com/yourusername/classify.git
cd classify# Install frontend dependencies
npm install
# Install backend dependencies
cd backend
npm install
cd ..Create a .env file in the backend/ directory:
# MongoDB
MONGODB_URI=mongodb+srv://username:password@cluster.mongodb.net/classify
# Cloudinary
CLOUDINARY_CLOUD_NAME=your_cloud_name
CLOUDINARY_API_KEY=your_api_key
CLOUDINARY_API_SECRET=your_api_secret
# Google Gemini AI
GEMINI_API_KEY=your_gemini_api_key
# Server
PORT=3000Update src/config/api.ts based on your setup:
// Android Emulator
export const API_BASE_URL = 'http://10.0.2.2:3000';
// iOS Simulator
export const API_BASE_URL = 'http://localhost:3000';
// Physical Device (use your computer's IP address)
export const API_BASE_URL = 'http://192.168.1.XXX:3000';cd backend
npm startThe server will run on http://localhost:3000
# Start Metro bundler
npm start
# In a new terminal, run on Android
npm run android
# Or run on iOS
npm run ios- Browse Items: Open the app to see the marketplace feed with items near your location
- View Details: Tap any item card to see full details, description, and seller information
- Contact Seller: Tap the phone number or "Contact Seller" button to call directly
- Create Listing: Tap the floating "+" button on the home screen
- Upload Photo: Take a photo or select from gallery
- Fill Details: Enter title, price, and select category
- Generate Description: Tap "✨ Generate Description with AI" to auto-generate a compelling description
- Add Contact Info: Enter your name and phone number
- Post Listing: Tap "Post Listing" to publish your item
The AI feature uses Google Gemini to generate persuasive, sales-oriented descriptions:
- User enters: Title, Price, Category
- AI generates: A short, catchy description (max 3 sentences)
- Description is optimized for sales and engagement
Example:
- Input: Title: "Vintage Camera", Price: "$150", Category: "Electronics"
- Output: "Capture timeless moments with this beautifully preserved vintage camera. Perfect for photography enthusiasts and collectors alike. At just $150, this is an incredible opportunity to own a piece of photographic history."
- Uses MongoDB's
$nearoperator with 2dsphere index - Default search radius: 10km (configurable)
- Calculates distance using Haversine formula
- Falls back to recent items if location unavailable
- Cloudinary integration for reliable image hosting
- Automatic optimization and CDN delivery
- Supports camera and gallery selection
- Base64 encoding for efficient uploads
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is licensed under the ISC License.
- React Native - Mobile framework
- Google Gemini AI - AI description generation
- Cloudinary - Image storage and CDN
- MongoDB - Database
- Express.js - Web framework
For support, email suryadammalapa.com or open an issue in the repository.
Built with ❤️ using React Native
⭐ Star this repo if you find it helpful!