This is a new version of a Store Map App I built a year ago with Vanilla JavaScript, this time built with React.
The application is custom-built for an unidentified store in Kitchener. It makes shopping easier by allowing customers to create and organize their shopping lists, and find where their list items are on a map of the store’s layout, just by pressing a button and rotating their device by 90 degrees. Because their lists are stored on the device’s local storage, their items are automatically saved and shown on each new visit to the app.
How it is built:
☑️Store Map in HTML & CSS
☑️React controls Shopping List and Item Locator
☑️React Beautiful DnD package added for user to arrange list items
☑️Item Locator finds list items using CSS
☑️Over 400 items and growing in the data set
☑️Item Locator, Searched Item, and Shopping Lists are all stored in State.
☑️Shopping List is saved for future use in Local Storage, retrieved in ComponentDidMount lifecycle method
Use cases:
☑️Retailers looking to make shopping easier using branded applications
☑️Events looking to showcase vendor locations
☑️Locate a vehicle in a large parking lot (using numbers on light posts to search)