ARTsy Faker

Business Problem

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.

Challenge

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

Solution

Installation

This project was bootstrapped with Create React App. Use npm to install. In the project directory, you can run:

npm start

Runs the app in the development mode. Open http://localhost:3000 to view it in the browser.

npm test

Launches the test runner in the interactive watch mode.

npm run build

Builds the app for production to the build folder.

Usage

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)
}

Built With

• Create React App
• React Hooks
• styled-components
• Rebass
• Faker.js

To Do

• Write tests
• Form validation
• Improve UX

Author

parker smathers / parkersmathers.github.io

License

This project is MIT licenced.