mfp4073 / anchore

Abe Kinney

Anchore People List

Vite scaffoled using React and React-Hook-Form to add, edit and delete a list of favorite people.

Table of Contents

1. About The Project
   • Built With
2. Getting Started
   • Prerequisites
   • Installation
3. Assignment
4. Improvements
5. Contact

About The Project

It's an intriguing phase in the world of JavaScript. In the past few years, we've witnessed the deprecation of Create React App, with either Next.js or Vite (with React) taking its place. In my case, I opted for Vite and React. Recognizing that React-Hook-Form is becoming the industry norm, I embraced it. To streamline development, I turned to Material UI for readily available components. On the server/API side, I employed an Express server coupled with json-server to mimic a database and REST API. This setup facilitates reading from and writing to a local JSON file.

(back to top)

Built With

This section should list any major frameworks/libraries used to bootstrap your project. Leave any add-ons/plugins for the acknowledgements section. Here are a few examples.

• Vite
• React
• React-Hook-Form
• Material UI
• Express/json-server

(back to top)

Getting Started

Local set up is very simple

Prerequisites

Make sure you have the latest node & npm

npm install npm@latest -g

Installation

1. Clone the repo

   git clone https://github.com/mfp4073/anchore

2. Install NPM packages

   npm install

3. Run local API/Server

   npm run json-server

4. Run local dev instance

   npm run dev

• ALTERNATIVELY: the Snackbar notifications will fire twice as this is Dev mode and React forces strict mode. If you want to avoid this do this in place of step 3:

   npm run build
   npm run preview

5. Open app

(back to top)

Assignment

Create a responsive React-based application that accepts user input in order to present data in an editable tabular form. The basic flow for data submission is described below:

Business Requirements

• Clicking an Add User button will open a modal dialog

• The modal dialog will contain a form that provides the following fields, all of which must be populated unless otherwise stated:

  • First Name
  • Last Name
  • Date of Birth
  • Phone Number
  • Address
  • Notes (This field must be present, however entering data in this field is optional)

• Once the required fields have been populated and validated, the form data can be submitted. Upon submission, a table that displays user data entries is updated to display the new information.

• The application will also allow row entries to be edited and removed. The data submitted should be persistent and survive a refresh of the view or an application restart.

• Follow wireframes for UI

Technical Requirements

• CSS, HTML5, and Javascript (ES5 and above) or TypeScript

• A service should be used to store and return user data, however this must not be a client-side storage mechanism (for example, local storage).

• Note: The service can be the same one you use to provision your application view, or a standalone Node instance dedicated specifically to this task. The mechanism employed by the service to actually hold the data is up to you. You may use a remote system (for example Heroku) if you wish, although a local DB or flat file are also perfectly acceptable. framework.

(back to top)

Improvements

• Work with PM and UX individuals to discuss edit strategy
• Work with QA to strongly test Floating Labels (abstract into component for re-use)
• Add React Router and Nav/Footer for new views and complete base UI
• Work with PM on mobile table solution

(back to top)

Contact

Abraham Kinney

• Linkedin
• [email protected]

Project Link: https://github.com/mfp4073/anchore

(back to top)