Django + React Project

This project demonstrates a full-stack web application using Django REST Framework for the backend API and React for the frontend.

Project Structure

/Users/rahbe/vyte/
├── backend/                    # Django backend configuration
│   ├── api/                   # Django app for API endpoints
│   │   ├── models.py         # Message model
│   │   ├── serializers.py    # API serializers
│   │   ├── views.py          # API views
│   │   └── urls.py           # API URL routing
│   ├── settings.py           # Django settings
│   └── urls.py               # Main URL configuration
├── frontend/                  # React frontend application
│   ├── src/
│   │   └── App.js            # Main React component with API integration
│   └── package.json
├── manage.py                 # Django management script
└── venv/                     # Python virtual environment

Features

• Django REST Framework: Provides a clean API for CRUD operations
• React Frontend: Interactive UI that connects to the Django API
• CORS Configuration: Allows React (localhost:3000) to communicate with Django (localhost:8000)
• SQLite Database: Simple database for storing messages

API Endpoints

• GET /api/messages/ - Retrieve all messages
• POST /api/messages/ - Create a new message
• GET /api/messages/{id}/ - Retrieve a specific message
• PUT /api/messages/{id}/ - Update a specific message
• DELETE /api/messages/{id}/ - Delete a specific message

Running the Project

Backend (Django)

1. Activate the virtual environment:

   source venv/bin/activate

2. Start the Django development server:

   python manage.py runserver

   The API will be available at: http://127.0.0.1:8000/

Frontend (React)

1. Navigate to the frontend directory:

   cd frontend

2. Start the React development server:

   npm start

   The React app will be available at: http://localhost:3000/

Testing the Integration

1. Open your browser to http://localhost:3000/
2. You should see a React app that displays messages from the Django API
3. Use the input field to add new messages
4. The messages are stored in the Django backend and displayed in real-time

Development

• Django backend runs on port 8000
• React frontend runs on port 3000
• CORS is configured to allow cross-origin requests between the two servers
• The React app makes HTTP requests to the Django API to fetch and create messages

Database

The project uses SQLite database with a simple Message model:

• id: Auto-generated primary key
• text: The message content (up to 255 characters)

Next Steps

• Add user authentication
• Implement message editing and deletion in the frontend
• Add input validation
• Style the React components
• Deploy to production servers