https://github.com/imrenr/tutorialapp
React Tutorial Manager – A modern, responsive web app built with React, Vite, Axios, and Bootstrap that allows users to add, view, edit, and delete tutorials seamlessly. Perfect for learning and demonstrating basic CRUD operations in a React environment.
https://github.com/imrenr/tutorialapp
axios bootstrap crud hooks react-icons reactjs restful-api vitejs
Last synced: about 2 months ago
JSON representation
React Tutorial Manager – A modern, responsive web app built with React, Vite, Axios, and Bootstrap that allows users to add, view, edit, and delete tutorials seamlessly. Perfect for learning and demonstrating basic CRUD operations in a React environment.
- Host: GitHub
- URL: https://github.com/imrenr/tutorialapp
- Owner: ImrenR
- Created: 2025-09-07T00:06:43.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2025-10-19T19:03:10.000Z (8 months ago)
- Last Synced: 2025-10-28T01:55:31.559Z (8 months ago)
- Topics: axios, bootstrap, crud, hooks, react-icons, reactjs, restful-api, vitejs
- Language: JavaScript
- Homepage:
- Size: 58.6 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Tutorial Manager
A simple and interactive web app to manage tutorials using React, Vite, Axios, and Bootstrap. Users can add, view, edit, and delete tutorials in a clean, responsive interface.
---
## Features
- Add Tutorials – Users can create new tutorials with title and description.
- View Tutorials – All tutorials are displayed in a table with ID, title, and description.
- Edit Tutorials – Update existing tutorials through a modal interface.
- Delete Tutorials – Remove tutorials with a single click.
- Responsive Design – Built with Bootstrap for mobile-friendly UI.
- REST API Integration – Interacts with a backend API using Axios.
---
## Preview
[View](https://github.com/user-attachments/assets/d56b90f6-9ab6-4de8-8abc-50c74603934d)
---
## Tech Stack
- Frontend: React, Vite, Axios, Bootstrap
- Icons: react-icons
- Backend: REST API (any backend you connect to)
---
## Project Structure
```
my-project/
│── public/
│── src/
│ ├── components/
│ │ ├── AddTutorial.jsx
│ │ ├── TutorialList.jsx
│ │ └── EditTutorial.jsx
│ ├── App.jsx
│ └── main.jsx
│── .env
│── index.html
│── package.json
│── vite.config.js
```
---
## How It Works
- Add a Tutorial – Fill the form in AddTutorial and submit.
- View Tutorials – All tutorials fetched from API are displayed in TutorialList.
- Edit a Tutorial – Click the edit icon, modify the fields in the modal, and save.
- Delete a Tutorial – Click the delete icon to remove a tutorial.