Employee Details App

This clone is made with pure HTML, CSS and JavaScript,Reactjs and Library like Material UI, JSON-Server in this project.

Links Related to project Demo

Project Demo Video Link

Member

• Kiran Kumar Medikurthy

Porfolios link:

• Kiran Kumar Medikurthy Portfolios

Functionality

• Main Functionalities Present in my App is :
  • Add Employee Detail into JSON-Sever
  • Retrieving the data from the JSON-SERVER
  • Edit the Data Present in the JSON-SERVER

How To Use

• First Clone or Download Zip file from the GITHUB;

• Open the Clone Directory in the Online Editing Tools like Visual Studio code or Sublime Text etc.

• Open Terminal go to the source directory named as src with help of cd(Change Directory)

  • cd /home/kirankumar/Git_Repository/webfw11_024/InterViewProjectAssignments/tericsoft-assignment

• Run npm install or yarn Inorder to download the dependencies for Employee Details projects

• Run json-server --port 3001 db.json on the src directory To Run a JSON-SERVER in order to display details about the employees;

• Run npm start or yarn start on the src directory to start our react Application;

• When you start the Application, It will open a new window in the Browser

• You can a Employess Form then You can start add employee details like

  • Name
  • Email Address
  • Phone Number
  • Date of Birth
  • Gender
  • Hobbies

• On clicking the SUBIT DETAILS BUTTON The Employee Details have been stored in the db.json file present is src directory.

• When you Scroll up a little bit, Where You can See Employees Details, This is the place you can see the Employee Details;

Starting with the App Creation

• First i have gone through the Assignment Document.
• I have visited the package links given in the Links and I read about the documentation of that NPM PACKAGES like
  • JSON-SERVER PACKAGE
  • FAKER;
• I Have Started Creating the Employee Form So that User Can Enter Their Details
• After Completion of all Functionality of Creating Form then I started creating Display Employee Details;
• I have succusfully Completed the Task

Thankyou so much for reading the blog.

Some snapshots of how our App Looks Like:

Employees Forms

Employees Details

;