Vite scaffoled using React and React-Hook-Form to add, edit and delete a list of favorite people.
Table of Contents
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.
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
Local set up is very simple
Make sure you have the latest node & npm
npm install npm@latest -g
-
Clone the repo
git clone https://github.com/mfp4073/anchore
-
Install NPM packages
npm install
-
Run local API/Server
npm run json-server
-
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
- Open app
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.
- 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
Abraham Kinney
Project Link: https://github.com/mfp4073/anchore