↓Skip to main content
Resources for the Modern Web Resources for the Modern Web
  1. All Posts/

ecommerce-demo

eCommerce JavaScript

A basic e-commerce app with React Native

A very small ecommerce application focussing on fundamentals of React Native. The app consists of a landing page with search textInput, a product list page & a product display page (PDP). Please note that this project is for learning purposes.

Screenshots

   

Prerequisites

Install node + npm & then Expo
Install npm
Install Expo

Getting Started

These instructions will get you a copy of the app and running on your local machine/emulator/device for development & learning purposes:

  • Fork the repo to your personal Github account
  • Open terminal, navigate to project directory & run following commands
  • npm i -g exp Install Expo if you haven’t already
  • npm install Install dependencies
  • expo start Build Expo project & Run the bundler
  • git checkout v1.0 Checkout first version

Post this, jump to How to proceed

What will you learn

You will learn about following concepts:

  • Making a complex layout using in-built components of React Native such as View, Image, Text, TextInput, Touchables, etc.
  • Adding an external library to package.json & using it
  • Handling Navigation between screens using React Navigation
  • Handling Networking using fetch & async-await
  • Creating a simple list layout
  • Modifying a component for reusability

How to proceed

This is an incremental project. You can proceed through the project by using git tags in the repo. The project is build step by step. Checkout the first tag(v1.0) to start. Here’s a description of each step:

  1. Blank expo project with Hello World layout – v1.0
  2. A basic layout with TextInput, Button & Touchables – v1.1
  3. Updated folder structure breaking down app to screens/sub apps & components – v1.2
  4. Move the existing search screen to new folder structure – v1.3
  5. Add an external navigation library(React Navigation) and navigate to a new screen – v1.4
  6. Create a list based layout using Flatlist & a custom component – v1.5
  7. Modify the Product component to make it reusable for Product Display Page(PDP) – v1.6

Authors

Anurag Dadheech

License

This project is licensed under the MIT License



↑