This project demonstrates the integration of Django as a backend and React as a frontend to create a simple web application. The application allows users to input their name and email, which is then displayed both in the Django Rest Framework and on the React frontend.
Description: This screenshot shows the Django backend where user data input .
Description: This screenshot shows the Django API app named api located inside the djangobackend folder.
Description: This screenshot displays the React frontend where user data is displayed.
Before you begin, ensure you have met the following requirements:
- Node.js and npm installed on your system.
- Python and Django installed on your system.
-
Clone this repository to your local machine:
git clone https://github.com/your-username/django-react-integration.git
-
Change into the project directory:
cd django-react-integration -
Set up the Django backend:
-
Create a virtual environment:
python -m venv venv
-
Activate the virtual environment:
-
On Windows:
venv\Scripts\activate
-
On macOS and Linux:
source venv/bin/activate
-
-
Install Django and other dependencies:
pip install -r requirements.txt
-
Apply migrations and run the Django server:
python manage.py migrate python manage.py runserver
The Django API should now be accessible at http://localhost:8000/api/student/.
-
-
Set up the React frontend:
-
Change into the
frontenddirectory:cd frontend -
Install frontend dependencies:
npm install
-
Start the React development server:
npm start
The React frontend should now be accessible at http://localhost:3000/.
-
-
Access the React frontend at http://localhost:3000/.
-
Enter your name and email in the form on the homepage and click "Submit."
-
The data you entered will be displayed on the same page.
-
To view the data in the Django Rest Framework, visit http://localhost:8000/api/student/ in your browser or use an API client like Postman.
This project is licensed under the MIT License - see the LICENSE file for details.