Building a store locator in React using Algolia, Mapbox and Twilio - Part 3:
Click & Collect logic implementation using Twilio
In this series of Live Coding Sessions, we will show you, in 3 hours, how to build a store locator in React using Algolia, Mapbox and Twilio. The session will happen in 3 parts:
- June 23rd: Introduction & Data indexing
- June 30th: Geo-search implementation using Algolia and Mapbox
- July 7th: Click & Collect logic implementation using Twilio
All sessions will take place at 10 am PST / 1pm CET / 7pm CEST.
Try out Algolia on www.algolia.com
Good evening, everyone. Good evening. Good evening, Europe. Good evening, Paris. And of course, good morning, San Francisco. Good morning, Pacific and good afternoon if you're watching us from New York, from Brazil and everywhere else in the world, even maybe good night if you're watching us from Japan or any times on what's night at that time of the day, the time of the day. I'm not sure. Well, whatever. Thank you for joining us today. My name is Clement and will be together for about 1 hour. Let's dive into the product. But first my name is Clement. I'm a software engineer and co mingle. It basically means that I love playing with APIs. I love playing with payments. Api is like try for a PayPal. I like playing with communication in API like Twilio. I love playing with search APIs like Algeria. Of course I'm an entrepreneur and as every entrepreneur at least I know I am a coffee lover and on the free time I have I'm mispairing trail runner and I'm absolutely stalked about sailing because I've grown up in junkie in Northern France next to the sea so I can't be far to the sea at any point in my life. I'm also live on Twitter and on Clubhouse. My handle there is at Lime so I just want to give you a tiny Disclaimer before starting. I am National Gordian. I love Algolia but I'm not part of the company so I won't endorse for it. Thank you. But before starting and before adding a look at the final app we're going to make. Let's talk about Star Locators. What is store at. Let's remind you ourselves about the last year and of due to the COI pandemic worldwide brands are to reinvent the way they are communicating with their customers. And one of the very last emerging trends which the clearest couple of years ago is purpose for buy online pick up in store. It basically allow customer to make all the shopping cart and they are cat online on the website of the US, on the website of the shop. Sorry and process everything online. Maybe using stripe APIs. Pay it and choose choose the location using some geographic APIs maps APIs. It could be by example map box and finally then correct them directly in stores. You are on the slide an example from Lululemon which is basically only available in the US that's very well known in Europe. But let's switch to another example here. I've set up a few example. If I can switch from tabs I may have I have an example here on the Apple. Basically you can select your ipad. We won't add any grading and you can then here select the store. I'm on the US website so I will type New York and then I can choose the Apple store. I want to go in, continue to proceed. I'm going to say that I'm going to pick up today my new I buy today at the Apple World Trade Center. Apple Store? Well, I'm not in the US. I want what it is, but it's the exact same thing. Another very transitional website named as I. Well, I'm French, so I love wine and I need space to store my Nifty wine bottles. If I want to pick up this item in store, I can just check availability installs here on the UK website. So I'm going to type in London and I see that the item is available on the Grinch store but not viable on the web store. That's a shame because I wanted to go to the Euro. So the games, but if it's not available, okay, fine. I'm gonna go to Greenwich. I'm going to select this store and then you get all information. I can enter my email today to get informed on the item is lacking stock or no, I didn't choose one player. Sorry, I'm gonna change that and I'm going to change. I can be alerted by SMS when the item is in. So it's exactly what we're gonna do. So it's back to the slide. So here this session will be stated to three parts, one on. Well, today, of course, one next Wednesday and the last one on the first Wednesday of July. So today we're going to set up almost everything, set up the account, set up the car, all of the app. Next Wednesday, we're going to implement old thing. I'll go the apps, one search and autocomplete. We also going to display resident on the map. And finally on the very first week of July, we're going to implement the click and politic using two sites. Okay, fine. Let's talk. Here is the app. We are going to build it's basically based on a few different locations. So if I slide into the demo here so you get on this site all the list of a vailable stores. You can have a set of filters. So basically I can choose to go to select open 24/7 stores. And when I move the map, the stores move in real time, showing all potential location. And when I click on unlike it, select here the shop I've selected. Let's go back to the site. Okay. We'll fit this video into four parts. The very first one going to be all the web services we're going to use. So we'll explain the technological choices and why we are choosing them. Then we're going to create accounts on these web services. On the third part, regular index all the data onto Algolia. And finally we're going to setting up the scaffold of the project. Let's talk about technological choices. I assume you're all developers. So I won't deep dive onto why I choose React and what is react. It's a UI library, which is about ten years old, about something like seven years. Eight years old doesn't matter. And we're going to use it with a visual framework named Tailwind. Tailwind from you may have heard of it basically provides you tons and tons of CSS classes to style with style your HTML. It gives you Flex box. It gives you magnificent colors, centering stuff and it's super highly customers customizable and whole thing around it and we're going to customize it to use it with crack create React app we're going to use. Also, Clever Cloud as St provider, have cloud focus on one single thing, maintaining and publishing your code so that you focus on what you like, on what you do the best coding. Basically you open a machine, you push your code and clever handle everything else, scaling, maintaining security and all this kind of stuff updating in real time. You can go on clear cloud. Com and see everything they do. Moreover, they are French. It's a company created by a friend of mine, so it up to protect against all everything related to cloud act and Privacy. At I'm in greatly in favor of building a European cloud. So that's the reason I've chosen Clever Cloud more than another solution. We're going to use Algolia, of course, for searching Algos, a company which is about ten years old. It's a bit older than Reacted became public. It came public, not public meaning in terms of IPO, but it was released in 2013. It went through the Y Combinator, the famous American startup accelerator program. It offers you tons and tons of features, but we're going to deep dive into it a bit later. And finally we're going to use Map Box which provides you a solution for API, geocoding and map displaying with lifestyle with bunch of configuration configuration options. That's pretty appreciable. And that's the reason I have chosen working Ramit. It's purely based on WebGL for a bunch of performance improvement. Okay, now let's move forward and create the account. So Teri CSS is basically public. So you don't need a new account. Then there is Clever Cloud where you need one. Of course there's Algeria where you need one. There is Twilio where you need one and there is Map box, of course. So we'll go today we're going to create Algeria's account and Clever Cloud account because we won't deal with maps. Laura SLS today. So let's do things one at a time and let's create a work account for Clever Cloud and Arrow account for Lori. You will find all the steps on the blog post related to these training sessions, so we'll go quite quickly. We'll deep dive onto indexing datas on Algora on the next part of the video for creating the account on Clever Cloud. It's pretty straightforward. You just go to the website here, you could sign up for free and you'll get $20 for free. I invite you to join with GitHub. If you are going to account. The reason I would choose this option is because they're going to share their SSH keys so you won't have to create another one and upload it. We're just going to take the same SSH key from GitHub. If you don't have any GitHub account, we just sign up with your regular email and that's done. Give them an email address password. They're going to need a bunch of details like your company. If you have one, your email, your address, your Pat number if you are an organ company. Well that's basically all once you've done that once you've got that sorry, you can just go to Clover Cloud on login here and here. You see there is all the information they need. I will get an authentication email to make sure it's your email. Of course like most of web services today, but I have another account so log out and connect with my password account here on the side. You get all your organization you're working on as you make. I can appreciate I'm working with too for quite a bunch of time. What interests me here is the machine I got on the the left hand. I'm going to just leave it for now because we don't need to have a proper machine. Now we will create and configure it at the very end of this video. When you will have something working then I invite you to go to open your browser on all. Com and here on Alba. Com. I'm going to just look out from the account. I'm just telling them that I don't have any account. Cruise not true. Of course I'm going to type the same address I put onto clever cloud. Hello. Plus Altoria. Then I'm going to type password. I'm going to tell that I'm accepting tons of services. I'm going to send them to the email. They told me that the email is already taken. Why? So what? Let's try to log in. Okay, fine. I didn't feel fulfil all the things so they can my email, my first name, my last name. I'm going to move full screen because I don't want to expose you my for numbers. I'm from France. I got my phone number here I can reach on my screen so my company is Angolian. Well it's just for this position. My company size is one to ten and I'm an engineer and complete sign up. Check your email. I resent here once again going to move full screen to open email client. Here it is. I got this kind of email I'm using super us my email client. I'm just going to confirm my email. We put on a new I'm kinda new to Algolia from here we can move to the next section of a video which is Algeria and indexing data for our need. We're going to need some data about the store we want to display in app and we need some data about opening hours, about locations, about servicing. The stores are providing to the users to the customers. Sorry and all this kind of stuff. So hopefully I won't tell you to create your own data sets. We will provide you one to you so you can head up to my GitHub account, my Gist account. If you have an IEP. Sorry, if you have a scanner, you can just scan this QR code. Otherwise you can just go to guest at GitHub. Com. Savage, I'm going to just add up with you in real time. So here I'm going to open a new tab. We're going to go to this that get up. Come. I'm going to view my guest and here on the link I'm providing you. I'm going to add it in the chat box so that you can go and see it live. So I'm just going to take this and paste it zero. You got a huge Jason with more than 300 shops worldwide. What happen to do is I'm gonna click row. Oh, sorry. I see that this is a bit small here, but I think that I can improve the size. Okay, it's a bit slow because of the size of the file. So here I'm going to click on. I'm going to tick row here. Sorry, my browser is kind of slow, so I'm going to click grow another I can do with what I see here is basically all the JSON file will. We won't go on to deep dive onto the JSON right now because we're just going to do it in very few seconds. So what I'm inviting you to do is click on file on your browser. Click on save the page. You gonna propose you to save it as a JSON file. I already have it. So I won't store it. But basically you can click on Save and it will save this file on your desktop. Now you're in Algeria. You can switch back to the Albalia tab, and here I'm going to choose a data center on the United States. It's a bit far on my location, but it will make the website more responsive for watches in the US and in the past area it continue configurations. And from here I'm going to just jump into the name of my indexes. So an indexes basically, is your databases view your indexes as a dictionary where you will be able to search as fast as lightning. So here I'm going to just give the name store locator. Nice coding and I'm going to hit create and my store is created. Hello. I'm just going to switch to my own account because I got a new UI. I would like to show you an Alegria. Here is the brand new UI. Sorry about that. So it's basically the exact same thing here. So I'm going to just add new index. I'm going to just remove all the data just for reloading it with you. So here I have my index life coding store. I'm just going to approve my JSON file. So I just click here and then select my JSON file from my desktop. I just hit the button upload from here. You see that the index worked on the JSON file and uploaded it Super Fastly, meaning that they managed to upload and to handle 3282 stores in less than 3 seconds. It's super fast. Then once you got that, you can just take on configuration here. I've done that already, but I'm going to remove this on the very same time. I'm going to also remove my face at we're going to dive into this together. So basically I got everything here and we will now config your this index. I want to add few before diving before diving into configuration. What I want to do is to explore what we have in every single item of this JSON file. So it's basically JSON representation of stores, as I already said. And you got the name of the store, you got the country and you got the city. Then on the side you got the services the store is providing. So here the store located in Jackson, Atlanta, has international offers package pickup and open, which is kind of great. And we also got some underscored Geolog with the latitude and longitude, which is kind of obvious. Now we got that. We also see Sorry popularity option, which is an integer. And here the most popular store as the highest score. We will use that to rank our shops based on popularity. So now we got all everything and the object ID here is just a random key given by Algolia to index more Fastly and to represent the item itself. And basically when we loop or when we are going to loop on the object, we're going to use this object ID, which is unique by by definition. We're going to use this object ID as the key for our React app to be completely safe with this kind of mapping. Now we dive into now does are into the object. Let's move to configuration on configuration. We'll add the first item is searchable attributes, so we'll add some sortable attributes. Basically, it's the thing we want to type on the search bar to display the items. So I want to search by name. I want to search by country and I want to search by city. And here I just click review and save. It means basically that if I click on browse and if I type some numbers randomly, it doesn't work. Even the coordinates. Now if I type Paris. Yeah. You see that every single shop locating Paris or where the world look like Paris here you have Pristina in Sylvia will be returned. Okay. So we add our sort of attributes then were you going to add facets facets is the way to sort item and filter them based on several things. So I want to facet my items by Sean this is they provide so here I can hit services and I want to fast based on countries and both will be searchable. I will save here my settings and what you will see here is that if I click on pro. I got two Nifty menus on the side which allows me to search for items. So basically if I hit countries and if I hit front hey, I'm French, a hippo in France and every single shop located in France. Aps same thing here for services I hit let's say free WiFi. I know that there's 1055 shops which offer free WiFi and I see that the shop located in Shippo airport of free WiFi. I see that the shop located in Gatwick of free WiFi, etcetera. Etcetera. Last thing I want to do about the configuration is about ranking. I told you and I've already put it previously. I told you that we have this popularity integer which represents how much a shop is popular compared to another. So here I'm just going to at puberty and descending because the highest score is the highest most popular. The shop is. Once this is done, we are almost done with our configuration for Algora, we will be able to move under code. Amazing, isn't it okay. It's fetching packages. It has built the thing. So we see that the builder succeeded. I will be able to see the result a few seconds. So now the builders are done and then it has low things to our type of they will re run it on the production machine. Basically, they separate their machine for building stuff and the machine for running stuff. So they basically say that there is a build cash and they are downloaded it. So it's basically on the same that I sent. So it's super fast. So then I run the serves, built it it. And if you run this, if we load this, it should be fine. Let's check out the logs, but it success. Three deployed in 1 minute. Perfect. Let's go to domain name and to app here. You can specify custom Twitch Twitch demo or a add and just open this. Yep, he's fucking perfectly. Okay. So we have created everything the project is running, so we are good for this video. Next week we're going to add basic to your search for Algora. So basically the thing that we would be able to search items on the Sidebar. As I showed on the previous version, we are going to add the map visualization. So adding pins on the map box map and finally will add address search with Algora autocomplete. It going be last part of next week's video. If you have any questions, just ask them on the chat. I would be happy to answer them. So thank you very much for watching this video and see you next week.