Giter Club home page Giter Club logo

react-popmenu's Introduction

React Popmenu

An example of a simple menu application for Popmenu

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.

Level 1 - Basics

Desktop:

Menu-Basics-desktop

Mobile:

Menu-Basics-mobile

Additions:

  • 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

Level 2 - Add/Remove

Desktop:

Menu-AddRemove-desktop

Mobile:

Menu-AddRemove-mobile

Components added:

  • 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

Features added:

  • 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

Misc:

  • Theme folder with colors (if time weren't limited I would also define a constants object for spacing/padding variables for consistency throughout app)

Level 3 - Edit

Desktop:

Menu-Edit-desktop

Mobile:

Menu-Edit-mobile

Additions:

  • 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

Level 4 - Bonus - Menu Management

Additions

  • 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

Level 5 - Add a menu

Additions

  • 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

Desktop:

Menu-AddMenu-desktop

Mobile:

Menu-AddMenu-mobile

react-popmenu's People

Contributors

08fdange avatar

Watchers

James Cloos avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.