README DRAFT
Focal is a workflow and client management tool for wedding photographers. It aims to help photographers consolidate clients information (personal info, photography packages, shoot events, and private notes) and tie it to a set of workflow tasks.
Future features would include integrating third-party services like Google Gmail, Google Calendar or Stripe to reduce context switching for the users. For example, the app would be able to send emails, update their calendars, or send invoices directly from the workflow tasks.
The project is built in React and works with a Elixir/Phoenix API. Other dependencies include react-testing-library, formik, date-fns, axios, sass, react-router, moment, jest.
Note that the project is hosted on Heroku free-plan which has slow spin-up times -- Please give it a few seconds to load.
- Google Authentication
- Create & Update Client Information
- Create & Update Client Packages
- Create & Update Client Events
- Auto Generated Workflows Tied to Client Packages with Todo-style Task Completion.
- All Clients View with a List of the Current Task for All Clients
- Creating New Client
- Updating Client Information
- Creating Client Packages
- Updating Client Packages to Create Workflows and Create Events
- Updating Client Packages to Remove Events and Workflows
- Toggling Task Completion in Client Workflows
git clone https://github.com/Focal-App/focal.git
cd focal
npm install
npm start // in one terminal
npm test // in a second terminal
git push heroku master --force
git push origin/<branch name>:master --force
The DataAdapter class acts as a boundary between the data received from the API and the data shape the rest of the frontend codebase relies on. By wrapping incoming API data with our DataAdapters, any changes to the API data shape can be handled in one place as opposed to updating the changes throughout the codebase.
It can set formatted default values for null or un-renderable API values that the frontend can render with. For example:
// Null values are turned to dashes to signify no content
null → "-"
// ISOStrings are converted to formatted dates
"2019-04-17T07:00:00.000Z" → "April 17, 2019"
// Penny integers are converted to price strings
1000 → "10.00"
These formatted values allow the frontend codebase to immediately render values without checking the validity of the value (no more event_name ? event_name : "-" validity checks in react components).
For example, dates need to be a specific date format to render correctly in the input date elements.
For example, when passing in no existing event object to DataAdapter.toEventModel(), it will generate a default event data object with no UUID. This is then used to pass into a create event form to make sure the form data shape is what the API expects.