<h3>What is the main problem?</h3>
The client requires me to build a functionality that enables their customers to find affiliate retailers in Australia. The retailer locator must have some sort of filter functionalities that will help the customers to find the nearest retailers to a given area and limits the search result with the business type category. The search results must display on a Google Map.
<h3>Feature overview:</h3>
<ul>
<li>Integration with Google Maps</li>
<li>Find the nearest retailers in a given area.</li>
<li>Limit the results with the retailer&#8217;s business type.</li>
<li>Find specific retailers in a given area.</li>
</ul>
<h3>How I built the application?</h3>
This store locator was built using the React.js library. I know this type of functionality can be done also in a vanilla javascript development approach but I want to use the flexibility of React in building widgets and apps. Another reason is it&#8217;s so easy to manage the application&#8217;s state in React. 
I used the React Context and useReducer to managed the functionality state and not Redux. I think using Redux is quite overkill for this specific widget&#8217;s functionality.
I used the Formik package for rendering form components. I find it easy to control or manage the input fields, errors, validations, events, and form&#8217;s state when I&#8217;m using Formik.
In terms of styling the widget, I used the Tailwind CSS to add the styles.
I think the most complicated part of this widget was the integration of the Google Map APIs. It&#8217;s easy to show the map in the widget, the difficult part is how to show the retailer&#8217;s map pin conditionally. I need to show the retailer&#8217;s map pin that is only located in a given radius or area. 
For example, a user wants to find all the retailers within a 10 km radius. All the retailer&#8217;s map pins within this area will be visible on the map. 
To be honest, I&#8217;m not that good when it comes to Google Maps API because most of the time I&#8217;m just embedding maps to my client&#8217;s website and there is no complex customization like this one. 
I read some of the Google Maps API documentation, I tried to look for related issues that might help as well. After several searching, I came up with a helper method that I can use. Based on Google Map docs, there&#8217;s a method called &#8220;computeDistanceBetween&#8221;. Basically, this method needs the retailer&#8217;s position (latitude &amp; longitude), and also the center position of the given area. This method will return a distance value that I can use to compare with the user&#8217;s provided radius. If the value (distance) is less than or equal to the user&#8217;s provided radius, it means that the current retailer is within the given area.
<h3>How does the application work?</h3>
It&#8217;s easy to use this widget. The user can choose between searching for the nearest retailers and searching for specific retailers. They can easily switch between different forms.
<img src="https://api-portfolio.egoymagnaye.com/wp-content/uploads/2021/04/store-locator-tab.jpg" alt="" />
The Address input field is connected to the Places Library of Google Map API. This gives an auto-complete feature so whenever a user searches, a handy suggestion dropdown will show.
<img src="https://api-portfolio.egoymagnaye.com/wp-content/uploads/2021/04/places-ac.png" alt="" />
<h5>The Form for Searching Multiple Retailers:</h5>
The default form contains input fields for the Address, Business Unit, and the Radius. 
<img src="https://api-portfolio.egoymagnaye.com/wp-content/uploads/2021/04/tab-1.jpg" alt="" />
Address &#8211; Input for getting the address of the user. Behind the scene, this will get the latitude and longitude of that current address that will be processed to get the retailers.
Business Unit &#8211; This is the retailer&#8217;s category. The users can choose between these categories to filter out the retailers that they are looking for. This is not required data, if the user didn&#8217;t choose any business unit, all retailers in that area will show.
Radius &#8211; This is responsible for getting the area in the map that the user wants to search for. For example, the user wants to search for retailers within 25 km using the given address as the center position.
If they are done completing the form, they can click the Search Retailers button. The map will show all the retailer&#8217;s map pins that are located in that area.
<img src="https://api-portfolio.egoymagnaye.com/wp-content/uploads/2021/04/full-store-locator.jpg" alt="" />
<h5>The Form for Searching Specific Retailers:</h5>
This form works like the default form but instead of showing all retailers in that area based on the business unit category, it will show specific retailers only. Useful for searching retailers directly. 
This form contains the same input fields except for the Business Unit field, it was replaced with the Branch Name field.
<img src="https://api-portfolio.egoymagnaye.com/wp-content/uploads/2021/04/tab-2.jpg" alt="" />
Branch Name &#8211; This field is responsible for getting the retailer&#8217;s branch name. The keyword doesn&#8217;t need to match with the branch name exactly. If the current search matches multiple retailers, the retailer&#8217;s map pins will show on the map.
<h5>The Map:</h5>
Whenever a user searches for retailers, all the map pins in a given area will show on the map. If a user clicks a pin, a custom info window will show at the bottom left corner of the map. This info window will show the details about the currently selected map pin.
<img src="https://api-portfolio.egoymagnaye.com/wp-content/uploads/2021/04/sample-search-result.jpg" alt="" />
<h5>The Reset Button:</h5>
If the user wants to do a new search, they can just click the Reset button to restore the widget to its default state.
<h3>Limitations:</h3>
<ul>
<li>The widget doesn&#8217;t integrate with Geolocation API. The Geolocation API can help the user to get their location automatically.</li>
</ul>

A Store Locator Widget Built With React & Google Map API

<h3>What is the main problem?</h3>
The main problem that the client wants to fix is that they need a fair decision on what set of cakes they are going to bake every week. So our goal is to build something that can help them decide by letting each staff vote.
<h3>How I built the application?</h3>
I developed this polling app using React JS by using the create-react-app package. I used the React Router for page routing. Although it looks like a simple application, I still need a good state management package to help me manage the application state. I used the Redux state management package for this. I love using the Redux dev tools, it gives me a good insight into my app&#8217;s process and state.
The client is currently using WordPress for their business. So I just need to integrate the custom app into their current platform. Luckily, WordPress support REST API so I used that for the application data. 
I think planning your CSS is still important when it comes to developing your applications and websites. Other than creating custom CSS for some projects, I&#8217;m using the Bootstrap CSS framework if I&#8217;m building custom websites. But since the Tailwind CSS is becoming popular, I used it for this project.
<h3>Feature overview:</h3>
<ul>
<li>Polling capability</li>
<li>Limited time for polling</li>
<li>Sorted results</li>
<li>Restricted actions for specific user roles</li>
<li>Authentication</li>
<li>Mobile-ready</li>
</ul>
<h3>How does the application work?</h3>
I designed the application to make it easier to use. I&#8217;m always assuming that users that will use the application are not tech-savvy. 
Before the staff can join the poll, a user with an administrator role needs to add a poll, he/she can add duration and a title for the current poll. 
<img src="https://api-portfolio.egoymagnaye.com/wp-content/uploads/2021/01/adding-of-poll.jpg" alt="" />
A user with no administrator role can only join a poll or view the poll&#8217;s results.
<img src="https://api-portfolio.egoymagnaye.com/wp-content/uploads/2021/01/non-admin.jpg" alt="" />
After an administrator adds a poll, this poll is now listed on the Poll&#8217;s main menu.
<img src="https://api-portfolio.egoymagnaye.com/wp-content/uploads/2021/01/poll-menu.jpg" alt="" />
Then the users or the selected staff can now start voting for their preferred cakes in the single poll menu. They can vote for a limited amount of time only. If the time expires, clicking on the heart button and form submission will be disabled. 
<img src="https://api-portfolio.egoymagnaye.com/wp-content/uploads/2021/01/single-poll-page.jpg" alt="" />
Also, there&#8217;s a maximum number of cakes that they can select.
<img src="https://api-portfolio.egoymagnaye.com/wp-content/uploads/2021/01/limited-cakes.jpg" alt="" />
The users can view the results by going to the Results page.
<img src="https://api-portfolio.egoymagnaye.com/wp-content/uploads/2021/01/sample-results.jpg" alt="" />
<h3>Limitations:</h3>
<ul>
<li>Some of the administrator actions like adding users and adding cakes are still dependent on WordPress. If the admin needs to add a cake, they need to go to the WP admin to add it. Same for the users, adding new staff need to be performed in the WP admin.</li>
<li>No in-app user registration functionality.</li>
</ul>

A Polling Application for Cakes Built Using React JS & Redux

<h3>What is the main problem?</h3>
This time, the problem will not come from the client but the development approach. The client only wants a separate enquiry form for each product. These forms work like an &#8220;add to cart&#8221; functionality in an e-commerce website. But instead of adding the products to the cart, they want their customers to add the products in the global enquiry email.
<img src="https://api-portfolio.egoymagnaye.com/wp-content/uploads/2021/02/initial-enquiry-form.jpg" alt="" />
The main enquiry form was generated using <a class="editor-rtfLink" href="https://contactform7.com/" target="_blank" rel="noopener">Contact Form 7</a>, a contact form generator in WordPress.
<img src="https://api-portfolio.egoymagnaye.com/wp-content/uploads/2021/02/contact-form-page.jpg" alt="" />
I can just create separate enquiry forms in Contact Form 7 then add them to each product. I can also customize these forms to disable the form submission and just save the submitted values into some kind of storage like the Local Storage.
That would be a good solution, right? But there are features that the client wants that will just make the functionality development complicated.
First, the client wants a &#8220;cart&#8221; like widget where they can see the products that were added to their enquiries. For every product that was added and removed, the &#8220;cart&#8221; like widget needs to update as well.
<img src="https://api-portfolio.egoymagnaye.com/wp-content/uploads/2021/02/inquiry-widget-header.jpg" alt="" />
Another feature, although this feature was not requested by the client. I want to add a section in the main contact form where the customers can see all the products they have added, the customers can also remove a product if they want. I think adding this feature will improve the user experience.
<img src="https://api-portfolio.egoymagnaye.com/wp-content/uploads/2021/02/overall-enquiry.jpg" alt="" />
I&#8217;m sure you notice what will be the issue.
Each widget is separated but these widgets must communicate to each other to update their view or their UI. The widgets must share the same state so they will update in real-time.
You might notice as well that these widgets are located in a different part of the website, one in single product pages, the &#8220;cart&#8221; like widget is in the main header and the overall enquiries list is on the Contact page. They don&#8217;t share the same parent DOM element.
A little heads up! These widgets are built using React but if you know how React works, all the components are rendered to a parent DOM element by default.
Now let us go to the next section and talk about how I built the features and came up with a solution.
<h3>How I built the application?</h3>
I&#8217;m not saying that this is the correct way of doing this kind of customization but I just want to share how I did it. I know there are lots of ways how to accomplish this. Please understand that these are just an overview and not the complete process.
Let us talk about how I built each feature first and later how I connected each widget.
<h5>The enquiry forms:</h5>
All the form data was dynamically generated by the back-end. The client website was using <a class="editor-rtfLink" href="https://www.advancedcustomfields.com/" target="_blank" rel="noopener">Advanced Custom Field</a> plugin, a plugin that provides custom fields or data. I think it&#8217;s better and much faster to use it than to build a custom form input generator. 
<img src="https://api-portfolio.egoymagnaye.com/wp-content/uploads/2021/02/acf-form-generator.jpg" alt="" />
Then I used these form input data and integrate them with <a href="https://formik.org/" target="_blank" rel="noopener">Formik</a> so that I have a dynamic form for each product.
<img src="https://api-portfolio.egoymagnaye.com/wp-content/uploads/2021/02/enquiry-selected.jpg" alt="" />
These forms do not need to send something, it just needs to update the state. I used React Context and React Hooks to control the global state instead of Redux state management package. If the customer submits the form, the submitted values will be saved to the global state.
<h5>The &#8220;cart&#8221; like widget or the overview enquiry widget:</h5>
This widget was located in the main header. This widget will show the total of enquiries the customer has and also the title of the items. 
<img src="https://api-portfolio.egoymagnaye.com/wp-content/uploads/2021/02/overview-enquiry-w-items.png" alt="" />
Whenever a customer submits a product enquiry or removes an item, this widget will update.
This widget gets its data to the global state. This widget was built also using React but in separate parent DOM element.
<h5>The overall enquiries list:</h5>
This section was added to the main contact page. Before the customers submit their message, they can review their products. They can remove product items if they want. 
<img src="https://api-portfolio.egoymagnaye.com/wp-content/uploads/2021/02/overall-enquiry-list.png" alt="" />
All the products that they have added will be included in the main contact form submission.
This was also rendered on a different parent DOM element, and it gets its data to the same global state as well.
<h3>How the components communicate?</h3>
So the question is how I connect these three components and make them share the same global state?
Well, React has a feature called <a href="https://reactjs.org/docs/portals.html" target="_blank" rel="noopener">Portals</a>, you can create different React components and attached them to a different parent element. Basically, this portal serves as a bridge to these separated components so they can still communicate (in a way).
In my case, I just created different portals by using the &#8220;createPortal&#8221; method and enclosed all the components into the context provider. By doing this, even though they are separated they will still share the global state.
To be honest, I can&#8217;t remember what is the exact reason why I came up with this approach. As far as I can remember, my first solution was to depend only on every update of my global state in Local Storage.
That solution was not working, I&#8217;m not sure why. When I tried testing it by adding a new product enquiry, the overview widget in the header was not updating in real-time. The overview widget will only update after the next product enquiry submission, some sort of a delayed update.
Well, I have deadlines to meet, I need a better solution and Portals help me with these issues.
<h3>Limitations:</h3>
<ul>
<li>The form input generator depends on a separate extension (Advanced Custom Fields). The form generator doesn&#8217;t have its settings.</li>
<li>There is no remove functionality on the overview widget.</li>
</ul>

Custom Product Enquiry Widgets Developed Using React

<h3>What is the main problem?</h3>
The main reason why the client wants this type of functionality is that they want to cut some operational costs. Digital signage services are quite expensive services. I developed this functionality so that the client can just create unlimited image slideshows and videos that can be displayed in their stores.
<h3>How I built the application?</h3>
This digital signage builder was divided into two parts; the back-end part, and the front-facing of the digital signage.
<h5>The Back-end &#8211; Signage Settings:</h5>
The back-end part was developed using React JS for the settings&#8217; user interface.
<img src="https://api-portfolio.egoymagnaye.com/wp-content/uploads/2021/01/initial-settings.jpg" alt="" />
I didn&#8217;t use the create-react-app package to develop the Settings UI, because of its default configurations. The reason for this is because when a create-react-app initiates the build process, it will export a lot of files (js, CSS, assets, etc.) which I don&#8217;t like for this task. It will just add some more configurations when building the entire plugin.
What I need are just a single script &amp; stylesheet files that contain all the customization and logic of the app. I can just include these files in the settings area when needed. 
To accomplish this goal, I need a custom Webpack setup and configuration. This custom configuration will give me control over where to export my files and use some of the Webpack plugins.
Now let&#8217;s talk about the application&#8217;s state. As always, I used Redux to manage the state of the app. It was easy to change some settings by controlling the global state.
<img src="https://api-portfolio.egoymagnaye.com/wp-content/uploads/2021/01/changed-settings.jpg" alt="" />
<h5>The Front-end:</h5>
This part of the signage builder is responsible for the view only, so I just need a simple React setup. Although create-react-app is a good choice for this, I still didn&#8217;t use it. I built a custom setup and this time I used the Parcel bundler instead of Webpack. I want to try Parcel not because it was gaining popularity at that time, but I want to see if it&#8217;s much simpler to use than Webpack. So far for this project, the configuration is much less compare to Webpack.
Since the front-end is for view only, I just need it to fetch data and not POSTing something back. I still used the WP REST API to fetch the signage data.
<h3></h3>
<h3>Feature overview:</h3>
<ul>
<li>Three media type available: Images, Vimeo videos, Self-hosted Videos</li>
<li>WordPress Media Library integration</li>
<li>Unlimited signages</li>
<li>Add schedules &#8211; display different media types according to their schedules.</li>
<li>Developed on a WP Plugin environment so it&#8217;s easy to share with other stores.</li>
</ul>
<h3>How does the application work?</h3>
Using the signage builder is simple. Since this is a WordPress plugin, the user needs to install the Digital Signage Builder plugin first to activate the functionality.
<img src="https://api-portfolio.egoymagnaye.com/wp-content/uploads/2021/01/signage-plugin-page.jpg" alt="" />
If the plugin is activated successfully, the plugin will add a custom post type to the admin area. The user can add unlimited signages. 
<img src="https://api-portfolio.egoymagnaye.com/wp-content/uploads/2021/01/signage-after-install.jpg" alt="" />
If the user has added new signage, it will show the signage settings. The user needs to choose between Images, Vimeo, or Self-hosted Video media type. By default, the Image media type is selected. 
<img src="https://api-portfolio.egoymagnaye.com/wp-content/uploads/2021/01/initial-settings.jpg" alt="" />
The Image media type is completely integrated with the WP Media Library. 
<img src="https://api-portfolio.egoymagnaye.com/wp-content/uploads/2021/01/medial-library.jpg" alt="" />
The user can add schedules for each media. This will control what media to show on the front-end. The client requested this feature because they are creating signage for a whole week of operation at once. They just need to reload the digital signage in the front-end and the correct media type will be displayed on their monitors. 
<img src="https://api-portfolio.egoymagnaye.com/wp-content/uploads/2021/01/add-schedule.jpg" alt="" />
If all signage settings were configured properly, they can click the Publish or the Update button to save the signage. After saving it, they can go to the signage display by clicking the link at the top after the signage title. 
<img src="https://api-portfolio.egoymagnaye.com/wp-content/uploads/2021/01/signage-link.jpg" alt="" />
The user will be redirected to the signage display. The media type that will be displayed depends on what media type is selected in the backend. 
<img src="https://api-portfolio.egoymagnaye.com/wp-content/uploads/2021/01/signage-front-end.jpg" alt="" />
The signage display contains some basic info about each media type. Toggling fullscreen depends on each media type. For Image, there&#8217;s a Toggle Fullscreen button, while the Videos have their toggle fullscreen by default. The Edit Signage button is displayed only when an admin user was logged in.
<h3></h3>
<h3>Limitations:</h3>
<ul>
<li>There is no image manipulation for the image slideshows. The image must be edited externally using image editing tools then upload the images to the builder.</li>
<li>This plugin was not uploaded to the WordPress Plugin repository. The client just wants to use it for their business only.</li>
</ul>

Hey, I'm Egoy Magnaye

My Portfolio

A Store Locator Widget Built With React & Google Map API

A Polling Application for Cakes Built Using React JS & Redux

Custom Product Enquiry Widgets Developed Using React

A Digital Signage Builder Developed On React JS