https://github.com/harikrish58/mockapi-crud
This is demo of CRUD operation from fetching data from MOCK API
https://github.com/harikrish58/mockapi-crud
bootstrap css html reactjs
Last synced: 3 months ago
JSON representation
This is demo of CRUD operation from fetching data from MOCK API
- Host: GitHub
- URL: https://github.com/harikrish58/mockapi-crud
- Owner: Harikrish58
- Created: 2025-03-23T08:19:07.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-03-23T08:33:37.000Z (over 1 year ago)
- Last Synced: 2025-03-23T09:27:27.981Z (over 1 year ago)
- Topics: bootstrap, css, html, reactjs
- Language: JavaScript
- Homepage: https://crudoperation-mockapi.netlify.app/
- Size: 35.2 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React CRUD App with MockAPI
This React application provides a full CRUD (Create, Read, Update, Delete) interface for managing user data fetched from a MockAPI endpoint. It features a responsive navbar, a home page with user cards, a detailed user directory with edit/delete options, pages for creating and editing users, and a footer, all powered by React Router and Axios.
## Features
- **Create**: Add new users via the `/create` page with a detailed form.
- **Read**:
- View a grid of user cards on the home page (`/`) with contact, address, and company details.
- Browse a detailed table of users on the `/users` page with edit/delete actions.
- **Update**: Edit user details via dynamic routes (`/edit/:id`) with a pre-filled form.
- **Delete**: Remove users from the `/users` page with immediate UI updates.
- Responsive navbar with links to Home, Users, and Create pages.
- Footer with dynamic copyright year on all pages.
- Success messages on the `/users` page after create/update/delete operations (auto-dismiss after 3 seconds).
- Loading and error states for all API interactions.
## Tech Stack
- **Frontend**: React (Hooks), React Router
- **API**: MockAPI (RESTful mock API)
- **HTTP Client**: Axios
- **Styling**: Bootstrap (used across components for layout and UI)
- **Deployment**: Netlify-compatible
## Prerequisites
- Node.js (v16+ recommended)
- npm (v8+)
- MockAPI account and project