Deployment link: https://react-popmenu.vercel.app/
Notes:
- All styling is built with styled-components using custom CSS. There's no styling libraries like Bootstrap or Material UI used.
- I've used a couple external libraries/packages for certain features including enquire.js, react-hook-form, react-redux and uuidv4.
- Testing libraries consist of react-test-renderer, jest-styled-components and redux-mock-store.
- MenuItemCard component and it's implementation to display dummy data supplied by javascript object in menu.js
- The implementation is currently located directly in the App component via a map function mapping through the menu.js data, a Menu component may be added in the future to extract it's implementation for scaling purposes
- It's simplicity allows it to display/scale properly on both mobile and desktop viewports, future iterations may include a viewport manager to support more complexity in the layout of the MenuItemCard component among other future components
- Button components with hover and focus states added
- Header component that sticks to the top of the page to always allow access to button to add a menu item
- BaseModal component used to build two modals for adding or deleting menu items
- Basic unit tests provided for all components although, the tests can be extended further
- Viewport Manager built with enquire.js to handle media queries within components. It's used to scale MenuItemCard and Modal components. It could also be used in a parent component to pass down the viewport to children
- Animation Wrapper used with the modals
- Redux with actions/reducers and a redux store that's stored in localStorage allowing you to save menu items and have them persist even when refreshing the page
- Ability to add items via add menu item form in a modal with validation and error messages
- Ability to remove an item with a modal that pops up for confirmation
- Theme folder with colors (if time weren't limited I would also define a constants object for spacing/padding variables for consistency throughout app)
- Extracted Inputs from AddItemModal, with Input orchestrator and two variants: TextInput and TextAreaInput
- Added an edit button for each item, state values for editing and editing image url editing
- Added inputs that are based on ternary operators that render either text or inputs based on isEdit state
- Added image overlay for menu item pictures, with "Click to edit" text and onClick that renders another input to edit the image url based on the editImg state
- Changes to redux store, reducers and actions to handle multiple menus in the menu store
- Updates regarding responsiveness, padding changes between mobile and desktop viewports
- Switched out Header component for NavBar with a SideNavBar for menu management
- Integrated SideNavManager into higher-order component used in conjunction with the ViewportManager
- Added two more menus
- Fixed multiple small bugs/edge cases
- Button to open modal for menu creation
- Redux action and reducer function
- Utility function for making menu key camelCase
- Empty state for menus with no items on it yet