FrontEnd : CRUD App using Axios

Vercel Deployment link : https://crud-app-using-axios.vercel.app/

Base URL : http://localhost:3000/

Mock API link : https://66f6345c436827ced97639aa.mockapi.io/api/users

React Axios :

Important

Axios, which is a popular library is mainly used to send asynchronous HTTP requests to REST endpoints. This library is very useful to perform CRUD operations.

CRUD Operation methods :

• Create
• Read
• Update
• Delete

React-icons :

Important

React Icons is a powerful library that provides accessible SVG icons for React applications, integrating popular icon sets like Font Awesome, Material Design, UI design, and Ionicons into your projects seamlessly.

React-Router-Dom :

Important

Using React Router DOM is an npm package that enables you to implement dynamic routing in a web app. It allows you to display pages and allow users to navigate them. It is a fully-featured client and server-side routing library for React.

Router DOM Tags:
<BrowserRouter>
<Routes>
 <Route path="" element={Tag Name} />   
</Routes>
</BrowserRouter>

Pages :

• Create
• Home
• Products
• Update

Package Install :

• npm i React-Router-DOM
• npm i React-icons
• npm i axios

Following requirements are completed :

• Display all the existing API data in the UI using Axios.
• Users should be able to perform CRUD operations on user data, including adding, editing, and deleting user records.
• The user data should be stored in a mock API that can be accessed using Axios fetch.
• The UI should have a clean and responsive design that is easy to use and navigate.

Command & Port Number :

• Start command - npm run dev
• Build command - npm run build
• Running Port Number - 3000

Languages :

Library:

Tools & IDE: