Code Monkey home page Code Monkey logo

gayathri1462 / usermanagementapplication Goto Github PK

View Code? Open in Web Editor NEW
0.0 2.0 0.0 130 KB

Developed a user management web application using React JS and Redux, featuring CRUD functionalities for efficient user data management. Integrated React Router for seamless navigation and utilized React Saga middleware to handle complex asynchronous operations, ensuring optimal performance and user experience.

Home Page: https://2x7tt5.csb.app/

HTML 3.68% CSS 1.74% TypeScript 67.30% SCSS 27.27%
html-css-javascript reactjs redux reduxsaga typescript redux-toolkit uuid react-icons

usermanagementapplication's Introduction

User Management Web Application

Overview

image

This is a user management web application built using React JS and Redux, featuring CRUD functionalities for efficient user data management. Integrated React Router for seamless navigation and utilized React Saga middleware to handle complex asynchronous operations, ensuring optimal performance and user experience.

Built With

  • Languages: HTML,CSS and TypeScript
  • Libraries/Frameworks: React JS, React Router, Redux Toolkit, Redux Saga, React Icons, React Toastify
  • CSS Preprocessor: SCSS
  • Version Control: Git
  • Package Managers: NPM

Features

The user management web application follows the following flow:

  1. Initial Screen: The initial screen will display a list of users, including their names, email addresses, and other relevant details. If there are no users, it will show a button to navigate to the "Add User" page. If there are existing users, it will display each user's information with "View" and "Delete" buttons.

  2. Header: The header will have two buttons: "Add User" and "Clear All Data."

  3. Add User: The "Add User" page will allow users to input necessary information such as name, email address, and additional details. The app should validate the input and add the new user to the user list.

  4. View User: Clicking on a user's details from the user list will provide a detailed view of the user's information. This view-only mode will allow users to review the user's data without the ability to make changes.

  5. Edit User: Within the "View User" mode, there should be a "Switch to Edit Mode" button, which will allow users to modify the user's information and save the changes.

  6. Delete User: Each user's details page will have a "Delete" button to allow users to delete the corresponding user record.

  7. Clear All Data: The "Clear All Data" button in the header will enable users to delete all user records from the list.

How To Use

To clone and run this application, you'll need Git and Node.js (which comes with npm) installed on your computer. From your command line:

# Clone this repository
$ git clone https://github.com/gayathri1462/UserManagementApplication

# Install dependencies
$ npm install

# Run the app
$ npm start

usermanagementapplication's People

Contributors

gayathri1462 avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.