This is a solution to the Invoice app challenge on Frontend Mentor
Users should be able to:
- View the optimal layout for the app depending on their device's screen size
- See hover states for all interactive elements on the page
- Create, read, update, and delete invoices
- Receive form validations when trying to create/edit an invoice
- Save draft invoices, and mark pending invoices as paid
- Filter invoices by status (draft/pending/paid)
- Toggle light and dark mode
- Bonus: Keep track of any changes, even after refreshing the browser
- Solution URL: https://www.frontendmentor.io/solutions/invoice-app-on-serverless-1XWXhpZVk
- Live Site URL: https://fm-invoice-app.netlify.app/
- Gatsby
- React
- Typescript
- Tailwind
- Storybook
- Netlify Functions
- Netlify Identity
- Hasura
This is was my first fullstack app + there is a lot of work with forms:
- Tested the new version of gatsby-starter-vadyan starter
- Setup the serverless app based on Netlify Functions
- Used Netlify Identity as auth provider
- Played with tables inside Hasura database
- Practiced with GraphQL queries/mutations
- Used Fetch API instead of axios
- Integrated postcss-import to split tailwind styles into separate files
- Integrated downshift's useMultipleSelection hook with useSelect to create filters dropdown
- Used formik's FieldArray for dynamic fields
- Got a headache while integrating custom datepicker form field
- Tried out hooks prerelease version of react-media
- Setup dark mode as the context option inside Storybook
For the future projects:
- More fullstack practice with serverless architecture in particular
- Try out another solutions for the data management to compare
- Introduction to Serverless Functions - Great Frontend Masters course. Used project's code as the reference
- Website - p1t1ch.com
- Frontend Mentor - @p1t1ch
- Twitter - @p1t1ch