Full Stack - Tutorial

Demo | Project

Table of Contents

• Table of Contents
• Overview
• Description
• Features
• API
• Project Skeleton
• Built With
• How To Use
• About This Project
• Acknowledgements
• Contact

---

Overview

A simple CRUD (Create, Read, Update, Delete) application built with React and Axios. Users can add, edit, delete and list tutorials.

Built with React (Frontend) + Django REST Framework (Backend API on PythonAnywhere).

---

Description

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.

---

Features

• 📌 List all tutorials from API
• ➕ Add a new tutorial
• ✏️ Edit an existing tutorial (update task and description)
• ❌ Delete a tutorial
• 🔄 Real-time refresh after each operation (without page reload)
• 🖼️ Modal-based edit form

---

API

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

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

---

Project Skeleton

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

---

Built With

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

---

How To Use

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/Umit8098/React-Project-Tutorial-FullStack.git

# Navigate into the project folder
$ cd React-Project-Tutorial-FullStack

# Install dependencies
$ yarn  
$ yarn start

# or using npm
$ npm install
$ npm start

---

About This Project

• Built for educational purposes.
• Demonstrates CRUD operations in React and REST API integration.
• Showcases state management and form handling using React hooks.

---

Acknowledgements

• Clarusway
• React Icons
• Bootstrap

---

Contact

• GitHub @Umit8098

• Linkedin @umit-arat