README DRAFT
Focal is a workflow and client management tool for wedding photographers. It aims to help a photographer consolidate a 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 and Workflows
- Creating & Updating Client Events
- Updating Client Packages to Remove Events and Workflows
- Toggling Task Completion in Client Workflows
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 API data shape can be handled in one place (DataAdapters class) as opposed to having to update values throughout the codebase.
Another benefit is that 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).
The class is also used to prepare data for the API (reversing the formatted value changes) and for forms (for example, dates need to a specific date format to render correctly in the input date elements).
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