Grocery Shopping App Template built in React Native & Redux
Tags: reactnative, grocery, template, ecommerce
Published: 2020-03-26 00:37:18

<main role="main"><article class=" u-minHeight100vhOffset65 u-overflowHidden postArticle postArticle--full is-supplementalPostContentLoaded is-withAccentColors" lang="en" ><div class="postArticle-content js-postField js-notesSource editable" id="editor_6" g_editable="true" role="textbox" contenteditable="true" data-default-value="Title
Tell your story…" spellcheck="false"><section name="2bfe" class="section section--body section--first"><div class="section-divider"><hr class="section-divider"></div><div class="section-content"><div class="section-inner sectionLayout--insetColumn"><p name="dc0c" class="graf graf--p graf-after--figure">In this blog post, you’ll learn how to create your own Grocery app in React Native using an awesome app template.</p><p name="f459" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">React Native Grocery Shopping App Template</strong> is made by expert UI developers at <a href="https://enappd.com"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Enappd</a> to provide a great UI for your own Grocery App. As a result, you can start your own Grocery shopping or delivery app with these functionalities. This is a great starting point for app development, as all pages and components are set. This app template also implements <a href="https://redux.js.org/"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Redux</a>. This takes care of state management within the app.</p><p name="fe4a" class="graf graf--p graf-after--p">Hence, all you need here is to integrate your back-end, API and feed in the data. This app has many features common with popular apps like <a href="https://play.google.com/store/apps/details?id=com.grofers.customerapp"  class="markup--anchor markup--p-anchor" rel="noreferrer nofollow noopener noopener"    target="_blank">Grofers</a>, <a href="https://play.google.com/store/apps/details?id=com.bigbasket.mobileapp"  class="markup--anchor markup--p-anchor" rel="noreferrer nofollow noopener noopener"    target="_blank">Bigbasket</a>, etc.</p><h3 name="5c40" class="graf graf--h3 graf--hasDropCapModel graf-after--p">What Is React&nbsp;Native?</h3><p name="08a3" class="graf graf--p graf-after--h3">React Native is another app technology that lets you create iOS and Android apps with single source code. It helps you create real and exciting mobile apps with the help of JavaScript only. Just code once, and the React Native apps are available for both iOS and Android platforms which helps to save development time.</p><p name="41e4" class="graf graf--p graf-after--p">It’s based on React, Facebook’s JavaScript library for building user interfaces, but instead of targeting the browser, it targets mobile platforms.</p><h3 name="966c" class="graf graf--h3 graf-after--p">Why React&nbsp;Native?</h3><p name="bf3e" class="graf graf--p graf-after--h3">With React Native you build a real mobile app that’s indistinguishable from an app built using Objective-C or Java. React Native apps are faster than other hybrid apps, and cost half as much as native since React Native uses a common source code for iOS and Android.</p><p name="1385" class="graf graf--p graf-after--p">The great thing about React Native is, unlike Ionic/Cordova, it does not create webview based apps. Instead, it create native components for the apps, so the performance of React Native apps is much greater than Ionic apps.</p><h3 name="9ee5" class="graf graf--h3 graf-after--p">What Is&nbsp;Redux?</h3><p name="b669" class="graf graf--p graf-after--h3 is-selected">By definition, Redux is a predictable state container for JavaScript apps. Redux makes it easy to manage the state of your React Native app. Another way of looking at this&#8202;—&#8202;it helps you manage the data you display and how you respond to user actions.<br>Simply put, Redux is a state management tool. While it’s mostly used with React, it can be used with any other JavaScript framework or library. It is lightweight, so you don’t have to worry about it making your application’s asset size bigger. It comes along with React Native apps mostly, because React Native does not have a data/state management resource built-in, unlike Angular.</p><h3 name="d57e" class="graf graf--h3 graf-after--p">Why Redux?</h3><p name="1239" class="graf graf--p graf-after--h3">As mentioned above, Redux is a library for application state management. It’s generally used with React, Angular, etc. It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test. In redux, we have a store, actions, and reducers. Here,</p><ul class="postList"><li name="7507" class="graf graf--li graf-after--p">the data flow is uni-directional and we can have a decoupled design where data management is separated from the UI.</li><li name="cd6a" class="graf graf--li graf-after--li">Actions can be sent when a user presses a button, load an app, etc. They can contain information that you want to add to the state. Reducers listen for actions. When it hears that an action has been sent to it, it updates the state.</li><li name="047d" class="graf graf--li graf-after--li">The Store holds the Redux state and allows access and modifications to it. It’s the middleman between actions and reducers.</li></ul><h4 name="2a98" class="graf graf--h4 graf-after--li">Best Coding Practices</h4><p name="1b5e" class="graf graf--p graf-after--h4">At <a href="https://enappd.com"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Enappd</a>, we make use of best coding practices. Code of <a href="https://store.enappd.com/product/react-native-redux-stater-grocery-shopping/"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Grocery Shopping Starter</a> is well structured, so it can be scaled up to larger applications. To make your development experience more pleasant we have integrated necessary components and screens in the starter.</p><p name="5ccf" class="graf graf--p graf-after--p">Following are the packages that we have used:</p><ul class="postList"><li name="bdab" class="graf graf--li graf-after--p"><a href="https://palantir.github.io/tslint/"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">&#8203;TSLint</a> to provide you with linting capability in Javascript.</li><li name="473d" class="graf graf--li graf-after--li"><a href="https://prettier.io/"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Prettier</a> for code formatting.</li></ul><h4 name="bcc6" class="graf graf--h4 graf-after--li">Libraries that helped us build this App Template / App&nbsp;starter</h4><ul class="postList"><li name="7717" class="graf graf--li graf-after--h4"><a href="https://facebook.github.io/react-native/"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">React Native</a></li><li name="bf82" class="graf graf--li graf-after--li"><a href="https://nativebase.io/"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">NativeBase</a></li><li name="c9b4" class="graf graf--li graf-after--li"><a href="https://expo.io/"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Expo</a></li><li name="2f1d" class="graf graf--li graf-after--li"><a href="https://redux.js.org/"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Redux</a></li><li name="20e7" class="graf graf--li graf-after--li"><a href="https://react-redux.js.org/"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">React-redux</a></li><li name="f8c9" class="graf graf--li graf-after--li"><a href="https://reactnavigation.org"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">React-navigation</a></li><li name="c6d0" class="graf graf--li graf-after--li"><a href="https://www.npmjs.com/package/react-native-country-picker-modal"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">React-native-country-picker-modal</a></li><li name="0315" class="graf graf--li graf-after--li"><a href="https://github.com/reduxjs/redux-thunk"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Redux-thunk</a></li><li name="edb4" class="graf graf--li graf-after--li"><a href="https://palantir.github.io/tslint/"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Tslint</a></li><li name="edb3" class="graf graf--li graf-after--li"><a href="https://www.typescriptlang.org/"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Typescript</a></li><li name="bcc2" class="graf graf--li graf-after--li"><a href="https://github.com/progre/tslint-config-airbnb"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Tslint-config-airbnb</a></li></ul><h3 name="92c7" class="graf graf--h3 graf-after--li">Why should you use React Native Grocery Shopping&nbsp;Starter?</h3><p name="9917" class="graf graf--p graf-after--h3">This React-Native Redux Grocery Shopping Starter contains following features</p><ul class="postList"><li name="caee" class="graf graf--li graf-after--p">Redux API calls</li><li name="c0ae" class="graf graf--li graf-after--li">Log in/Sign up</li><li name="a055" class="graf graf--li graf-after--li">OTP page</li><li name="dd61" class="graf graf--li graf-after--li">Shop By Categories</li><li name="692d" class="graf graf--li graf-after--li">Home page with tab configuration for multiple shopping categories.</li><li name="05d1" class="graf graf--li graf-after--li">The swipe-enabled section ensures better UX</li><li name="76c0" class="graf graf--li graf-after--li">Home page sees all available product in particular Categories.</li><li name="1899" class="graf graf--li graf-after--li">Product Page</li><li name="339e" class="graf graf--li graf-after--li">Rate us</li><li name="88b8" class="graf graf--li graf-after--li">Review component</li><li name="d7f6" class="graf graf--li graf-after--li">Favorite Product Functionality</li><li name="a0c2" class="graf graf--li graf-after--li">Payment page</li><li name="e3bd" class="graf graf--li graf-after--li">Add Address page</li><li name="6729" class="graf graf--li graf-after--li">Add Credit/Debit Card</li><li name="d56e" class="graf graf--li graf-after--li">Delivery Day and Time</li><li name="3c4a" class="graf graf--li graf-after--li">Order History Page</li><li name="51ba" class="graf graf--li graf-after--li">Search page for easy searching of products</li><li name="f34e" class="graf graf--li graf-after--li">Product detail page</li><li name="a27a" class="graf graf--li graf-after--li">Standard code with iOS and Android tested</li><li name="d3a6" class="graf graf--li graf-after--li">It is <a href="https://expo.io/"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Expo</a> compatible</li></ul></div><div class="section-inner sectionLayout--outsetColumn"><figure tabindex="0" contenteditable="false" name="9bff" class="graf graf--figure graf--layoutOutsetCenter graf-after--li is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 1192px; max-height: 1627px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 136.5%;"></div><img class="graf-image" data-image-id="1*7fBwdesXlU22YPMJdhPsYA.jpeg" data-width="2000" data-height="2730" src="https://cdn-images-1.medium.com/max/1080/1*7fBwdesXlU22YPMJdhPsYA.jpeg"><div class="crosshair u-ignoreBlock"></div></div></figure></div><div class="section-inner sectionLayout--insetColumn"><h3 name="0abd" class="graf graf--h3 graf-after--figure">App Setup</h3><h4 name="7c86" class="graf graf--h4 graf-after--h3">Installing dependencies</h4><p name="48c2" class="graf graf--p graf-after--h4">You will need <a href="https://nodejs.org/en/"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Node</a>, <a href="https://expo.io/"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Expo</a>, the React Native command line interface, Python2, a JDK, and Android Studio.</p><p name="69cc" class="graf graf--p graf-after--p">While you can use any editor of your choice to develop your app, you will need to install Android Studio in order to set up the necessary tooling to build your React Native app for Android.</p><blockquote name="dd98" class="graf graf--blockquote graf-after--p">A macOS is required to build projects with native code for iOS. You can follow the <a href="https://react-native.org/doc/getting-started.html"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank">Quick Start</a> to learn how to build your app using Expo instead.</blockquote><h4 name="b5aa" class="graf graf--h4 graf-after--blockquote">Why use a template at&nbsp;all?</h4><p name="6eab" class="graf graf--p graf-after--h4">There are several benefits of making your app from a template like above. Let’s go through the key benefits</p><ol class="postList"><li name="939c" class="graf graf--li graf-after--p"><strong class="markup--strong markup--li-strong">Cheaper</strong>&#8202;—&#8202;You save thousands of dollars spent in UI development. This is a crucial phase where a majority of startups end up spending most of their time and money. Designing a feature from scratch is not worth if you can just pick the feature off the shelf for fraction of the price.</li><li name="bb0d" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong">Faster</strong>&#8202;—&#8202;You save weeks (if not months) of time which you would otherwise spend on designing and developing your app’s UI. Faster time to market is often the deal maker for an app startup.</li><li name="d028" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong">Keep your team smaller&#8202;</strong>—&#8202;If you are an early stage startup, and the co-founders are not developers, it is not wise to hire separate developers for UI designing, and then UI development on different devices. Using a hybrid app (same technology for both iOS and Android) halves your problem, but you would still love to have an <em class="markup--em markup--li-em">off-the-shelf</em> template. This way you can jump to feature integration directly and keep your team smaller</li><li name="5d2f" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong">Standard and Bug-free&#8202;</strong>—&#8202;One of the biggest advantages of using a good app template is the standard feature and code structure. It is often seen that the founding team develops an app with whatever they know. This results in a badly written (although working) code. Instead, you can use an <em class="markup--em markup--li-em">off-the-shelf</em> code written with proper standards, and mostly bug-free. You cut costs, save time and get better quality code. How much more can one ask for!</li><li name="a52f" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong">Standard features&#8202;</strong>—&#8202;Other than great code standards, you get standard features already working and device tested in templates. E.g. A tinder card format has been a popular layout for the past many years. Creating the layout on your own from scratch is not worth if you can just pick it up from an app template like <a href="https://store.enappd.com/product/react-native-tinder-netflix-whatsapp/"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank"><strong class="markup--strong markup--li-strong"><em class="markup--em markup--li-em">React Native Star App Template</em></strong></a><strong class="markup--strong markup--li-strong"><em class="markup--em markup--li-em">.</em></strong></li></ol><h4 name="f354" class="graf graf--h4 graf-after--li">Conclusion</h4><p name="d9ba" class="graf graf--p graf-after--h4 graf--trailing">This Starter is a perfect fit for a quick start if you are looking to build a Grocery Shopping app. Well-customized and user-friendly starter. Make use of this React Native template and save thousands of dollar and weeks of time on your next project&nbsp;!</p></div></div></section><section name="b364" class="section section--body section--last"><div class="section-divider"><hr class="section-divider"></div><div class="section-content"><div class="section-inner sectionLayout--insetColumn"><p name="3e61" class="graf graf--p graf--leading"><em class="markup--em markup--p-em">—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;-<br></em><strong class="markup--strong markup--p-strong"><em class="markup--em markup--p-em">Buy “</em></strong><a href="https://store.enappd.com/product/react-native-redux-stater-grocery-shopping/"  class="markup--anchor markup--p-anchor"    target="_blank"><strong class="markup--strong markup--p-strong">React Native Grocery Shopping Starter with Redux</strong></a><strong class="markup--strong markup--p-strong">”<em class="markup--em markup--p-em"> today!!</em></strong></p><p name="fba2" class="graf graf--p graf-after--p graf--trailing"><em class="markup--em markup--p-em">—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;—&#8202;-</em></p></div></div></section></div></article></main>