ProjectCare

A full-stack application with Django backend and React frontend.

Project Structure

ProjectCare/
├── backend/          # Django backend
│   ├── projectcare/  # Django project settings
│   ├── api/          # API app
│   ├── customer/     # Customer app
│   └── manage.py
└── frontend/         # React + Vite frontend
    └── src/
        ├── components/
        └── pages/

Setup Instructions

Backend Setup

1. Navigate to the backend directory:

cd backend

2. Create a virtual environment (recommended):

python -m venv venv

3. Activate the virtual environment:

   • Windows: venv\Scripts\activate
   • Linux/Mac: source venv/bin/activate

4. Install dependencies:

pip install -r requirements.txt

5. Run migrations:

python manage.py migrate

6. Create admin superuser:

python create_admin.py

This creates an admin user with:

• Username: admin
• Password: admin123
• Email: admin@projectcare.com

7. Start the Django development server:

python manage.py runserver

The backend will be available at: http://localhost:8000

Frontend Setup

1. Navigate to the frontend directory:

cd frontend

2. Install dependencies:

npm install

3. Start the development server:

npm run dev

The frontend will be available at: http://localhost:5173

Local Testing Links

• Frontend: http://localhost:5173
• Backend API: http://localhost:8000
• Django Admin: http://localhost:8000/admin
• API Health Check: http://localhost:8000/api/health/
• Sample Data API: http://localhost:8000/api/sample/

Features

Backend

• Django REST Framework
• CORS enabled for local development
• Sample API endpoints
• SQLite database (for local testing)
• Customer app with PhoneNumberField support
• Pillow for image handling
• Customized admin interface (Customer Administration)

Frontend

• React 18 with Hooks (useState, useEffect)
• React Router for navigation
• Vite for fast development
• 3 sample pages/templates:
  • Home (with counter example)
  • About (with toggle example)
  • Sample Data (fetches from Django API)

API Endpoints

• GET /api/health/ - Health check endpoint
• GET /api/sample/ - Returns sample data

Development Notes

• Both servers need to be running simultaneously for full functionality
• The frontend is configured to proxy API requests to the backend
• CORS is configured to allow requests from localhost:5173