📋 Tutorial Manager React Client

A sophisticated Tutorial Management client built with React, designed to interface with a remote Django REST API hosted on PythonAnywhere. This project showcases a decoupled architecture, utilizing asynchronous API orchestration via Axios, environment-based configuration for secure endpoint management, and optimized React hooks for seamless state synchronization.

• ✨ Overview
• 📖 Description
• 🚀 Features
• 🗂️ API
• 🗂️ Application Architecture
• 🗂️ Project Skeleton
• 🛠️ Built With
• ⚡ How To Use
• 📌 About This Project
• 🙏 Acknowledgements
• 📬 Contact Information

A fullstack CRUD application that demonstrates how a React frontend communicates with a Django REST Framework backend via a RESTful API.

The application allows users to create, update, delete, and list tutorials with real-time UI updates, showcasing end-to-end data flow from frontend to backend.

Tech Stack: React + Axios (Frontend) · Django REST Framework (Backend)
Backend Hosting: PythonAnywhere

This project is a basic CRUD application where users can manage tutorials.
It demonstrates how to integrate React with a REST API using axios for data fetching and modification.
The backend is hosted on PythonAnywhere.

• 📌 Fetch tutorials from REST API
• ➕ Create new tutorials via POST requests
• ✏️ Update existing tutorials using PUT requests
• ❌ Delete tutorials with DELETE requests
• 🔄 Real-time UI updates without page reload
• 🖼️ Modal-based edit form for better UX

The project communicates with a REST API hosted on PythonAnywhere. Base URL:

The backend is built with Django REST Framework and exposes a RESTful API consumed by the React frontend using Axios.

https://umit8101.pythonanywhere.com/todo/

Endpoints:

• GET /todo/ → Fetch all tutorials
• POST /todo/ → Create a new tutorial
• PUT /todo/:id/ → Update a tutorial
• DELETE /todo/:id/ → Delete a tutorial

• React handles the user interface and state management
• Axios is used for HTTP communication
• Django REST Framework provides the RESTful API
• PythonAnywhere hosts the backend service

Data Flow: React UI → Axios → Django REST API → Database → Response → UI Update

Full Stack - Tutorial App
|
|----readme.md   
SOLUTION
├── public
│     └── index.html
│  
├── src
│    ├── components
│    │       ├── AddTutorial.jsx
│    │       ├── EditTutorial.jsx
│    │       └── TutorialList.jsx 
│    │            
│    ├── pages
│    │       └── Home.jsx
│    │
│    ├── App.js
│    ├── App.scss
│    ├── index.js
│    └── index.css
├── package.json
└── yarn.lock

• React
• Axios
• Bootstrap 5
• React Icons
• Django REST Framework (API)

To clone and run this application, you'll need Git, Node.js, and a package manager (yarn or npm) installed on your computer.

# Clone this repository
$ git clone https://github.com/umitarat-dev/Tutorial-Manager-React-Client.git

# Navigate into the project folder
$ cd Tutorial-Manager-React-Client

# Install dependencies
$ yarn  
$ yarn start

# or using npm
$ npm install
$ npm start

This project focuses on demonstrating a complete frontend-to-backend workflow using modern React practices and a RESTful backend built with Django.

It highlights API integration, state updates, and clean component structure in a real-world fullstack scenario.

• Clarusway
• React Icons
• Bootstrap

I am always open to discussing new projects, creative ideas, or opportunities to be part of your visions.

• LinkedIn: linkedin.com/in/umit-arat
• Email: [email protected]
• GitHub: github.com/umitarat-dev (Current Workspace)