A company is looking to achieve inorganic growth through acquisitions. They have asked us to develop an online tool to track and analyze potential target companies.
Develop a prototype that will allow the client to perform the following activities:
- View a list of targets
- Edit an existing target
- Create a new target
- Delete a target
Assumptions:
- Use a modern JavaScript framework
- React
- Data does not need to be persisted
- Use mock data
- Examples of data to be captured:
- Status (e.g., researching, pending approval, approved, declined)
- CompanyInfo
- KeyContacts
- FinancialPerformance
This project was bootstrapped with Create React App. Use npm to install. In the project directory, you can run:
Runs the app in the development mode. Open http://localhost:3000 to view it in the browser.
Launches the test runner in the interactive watch mode.
Builds the app for production to the build
folder.
Create, read, update, and delete items in a list of fake companies. The app uses React Hooks to manage state.
For example, create a target:
// App.js
const createTarget = company => {
setCreating(true)
company.companyId = faker.random.uuid()
setCompanies([...companies, company])
}
return (
{creating && (
<CreateTargetForm
createTarget={createTarget}
creating={creating}
setCreating={setCreating}
/>
)}
)
Then add it to a list of companies:
// CreateTargetForm.js
const initialFormState = {
companyId: null,
companyName: '',
...
}
const [company, setCompany] = useState(initialFormState)
const handleInputChange = event => {
const { name, value } = event.target
setCompany({ ...company, [name]: value })
}
const handleSubmitForm = event => {
event.preventDefault()
if (!company.companyName) return
createTarget(company)
setCompany(initialFormState)
setCreating(false)
}
- Write tests
- Form validation
- Improve UX
parker smathers / parkersmathers.github.io
This project is MIT licenced.