A new project idea. I thought of this as I am facing issues finding a local doodh-waala. An application that allows users to list milk-procuring places in their locality and search for them. Let me start with basic code implementation.

Here is the backend

from flask import Flask, request, jsonify
from flask_sqlalchemy import SQLAlchemy

app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'your_database_url_here'
db = SQLAlchemy(app)

class MilkProcurer(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    name = db.Column(db.String(100), nullable=False)
    address = db.Column(db.String(200), nullable=False)
    contact = db.Column(db.String(15), nullable=False)
    # Add more fields as needed

@app.route('/create_doodh_waala', methods=['POST'])
def create_doodh_waala():
    data = request.get_json()
    name = data.get('name')
    address = data.get('address')
    contact = data.get('contact')
    # Validate and save the milk-procurer data
    milk_procurer = MilkProcurer(name=name, address=address, contact=contact)
    db.session.add(milk_procurer)
    db.session.commit()
    return jsonify({'message': 'Milk-procurer created successfully'}), 201

@app.route('/get_doodh_waala', methods=['GET'])
def get_doodh_waala():
    milk_procurers = MilkProcurer.query.all()
    result = []
    for milk_procurer in milk_procurers:
        result.append({
            'name': milk_procurer.name,
            'address': milk_procurer.address,
            'contact': milk_procurer.contact,
            # Include more fields here
        })
    return jsonify(result)

React component for listing doodh-waala

import React, { useEffect, useState } from 'react';

function MilkProcuringPlaces() {
    const [places, setPlaces] = useState([]);

    useEffect(() => {
        // Fetch milk-procuring places from the backend and update the 'places' state.
        // You may use the Fetch API or a library like Axios for this.
    }, []);

    return (
        <div>
            <h2>Milk Procuring Places</h2>
            <ul>
                {places.map((place) => (
                    <li key={place.id}>
                        <h3>{place.name}</h3>
                        <p>Address: {place.address}</p>
                        <p>Contact: {place.contact}</p>
                        {/* Add more fields as needed */}
                    </li>
                ))}
            </ul>
        </div>
    );
}

export default MilkProcuringPlaces;

To allow users to add a milk-procuring place (Doodhwaala) along with uploading photos and providing a rating, you can create a React component as follows:

import React, { useState } from 'react';

function AddDoodhwaala({ onAddDoodhwaala }) {
    const [name, setName] = useState('');
    const [address, setAddress] = useState('');
    const [contact, setContact] = useState('');
    const [rating, setRating] = useState(0);
    const [photos, setPhotos] = useState([]);
    const [photoUrls, setPhotoUrls] = useState([]);

    const handleNameChange = (e) => {
        setName(e.target.value);
    };

    const handleAddressChange = (e) => {
        setAddress(e.target.value);
    };

    const handleContactChange = (e) => {
        setContact(e.target.value);
    };

    const handleRatingChange = (e) => {
        setRating(e.target.value);
    };

    const handlePhotoUpload = (e) => {
        const selectedPhotos = Array.from(e.target.files);

        // Display selected photo names to the user
        const selectedPhotoUrls = selectedPhotos.map((photo) => URL.createObjectURL(photo));

        setPhotos([...photos, ...selectedPhotos]);
        setPhotoUrls([...photoUrls, ...selectedPhotoUrls]);
    };

    const handleSubmit = () => {
        // Prepare the data to send to the parent component
        const doodhwaalaData = {
            name,
            address,
            contact,
            rating,
            photos,
        };

        // Pass the data to the parent component for further processing
        onAddDoodhwaala(doodhwaalaData);

        // Clear the form fields after submission
        setName('');
        setAddress('');
        setContact('');
        setRating(0);
        setPhotos([]);
        setPhotoUrls([]);
    };

    return (
        <div>
            <h2>Add Doodhwaala</h2>
            <form onSubmit={handleSubmit}>
                <label htmlFor="name">Name:</label>
                <input type="text" id="name" value={name} onChange={handleNameChange} required />

                <label htmlFor="address">Address:</label>
                <input type="text" id="address" value={address} onChange={handleAddressChange} required />

                <label htmlFor="contact">Contact:</label>
                <input type="text" id="contact" value={contact} onChange={handleContactChange} required />

                <label htmlFor="rating">Rating:</label>
                <input type="number" id="rating" min="0" max="5" value={rating} onChange={handleRatingChange} required />

                <label htmlFor="photos">Upload Photos:</label>
                <input type="file" id="photos" accept="image/*" multiple onChange={handlePhotoUpload} />

                <div>
                    {photoUrls.map((url, index) => (
                        <img key={index} src={url} alt={`Photo ${index}`} style={{ maxWidth: '100px', maxHeight: '100px' }} />
                    ))}
                </div>

                <button type="submit">Submit</button>
            </form>
        </div>
    );
}

export default AddDoodhwaala;

I will soon make this up and running and then share the git repo here.

Thanks for reading this far. Happy learning!!