This is a Single Page Application (SPA) called "Person Management System" built using React, a popular front-end JavaScript library. The application aims to manage a list of persons with features to add, view, update, and delete person records in a clean, efficient, and scalable manner. It consists of three main components: "Person-list," "Person-add," and "Person-home."
The "Person-list" component displays a table with a list of all the persons in the system. It supports responsive design, ensuring a smooth user experience across different devices. The table is customizable and provides options to edit or delete individual person records.
The "Person-add" component offers a form to add new persons to the system. The form fields include essential information like name, age, contact details, etc., and it validates user input to ensure data integrity. The form also adheres to responsive design principles, allowing users to add persons on various screen sizes.
The "Person-home" component serves as the landing page of the application. It presents an animated background featuring an awe-inspiring view of the Earth, Moon, and stars, all dynamically rendered using React three fiber with threejs. This captivating visual experience enhances the overall user engagement and sets the stage for a delightful user journey. Additionally, the page includes a button labeled "Redirect to person list" to navigate users to the "Person-list" component seamlessly.
The application provides functionalities to Create, Read, Update, and Delete person records. Users can add new persons, view the list of existing persons, edit their information, and remove them from the system with ease.
The "Person-home" page is enriched with an animated background using CSS or the React three fiber plugin with threejs. This captivating visual element enhances the overall user experience.
Both the form in "Person-add" and the table in "Person-list" are designed to be responsive, ensuring optimal usability on various devices, including desktops, tablets, and mobile phones.
-
Before proceeding, make sure you have the following installed on your machine:
-
Node.js (https://nodejs.org) npm (Node Package Manager, comes with Node.js)
-
Clone the Repository Start by cloning this repository to your local machine using the following command:
-
git clone https://github.com/your-username/person-management-system.git Install Dependencies Navigate to the project directory and install the necessary dependencies using npm:
-
cd person-management-system npm install Development Server To run the development server and see the application in action, use the following command:
-
npm run dev This will start the Vite development server, which automatically reloads the page whenever you make changes to the code.
-
Build for Production If you want to build the application for production, you can use the following command:
-
npm run build This will create an optimized production build in the dist directory.
-
Running the Production Build To serve the production build locally, you can use the following command:
-
npm run serve