Project design
- React Native course
- Intermediate
- Lesson 65/116
- 6 min
Design the structure of the e-commerce app.
Project: E-commerce
In this project we build a small e-commerce app. There will be three screens: a product list, a product detail and a cart. We keep the data in a products array; the selected product in state, and the cart in a Context.
Each lesson adds one piece and builds on the previous lesson's code. First we define the product data, then the list, then the detail and the cart. The final lesson ties everything together.
Product data model
Each product is held as an object: { id: '1', name: 'Pen', price: 20 }. id is the unique key, name the visible name, price the price. FlatList uses id for keyExtractor.
Put the products in an array: const products = [...]. This array is the app's data source; listing, detail and cart all read from it.
Practice Define the product data
Define a products array. It should hold at least two products; each product must have id, name and price fields.
Starter code
import React from 'react';
import { Text, View } from 'react-native';
// Define the product data here
export default function App() {
return (
<View>
<Text>Store</Text>
</View>
);
}Sample solution
import React from 'react';
import { Text, View } from 'react-native';
const products = [
{ id: '1', name: 'Pen', price: 20 },
{ id: '2', name: 'Notebook', price: 35 },
];
export default function App() {
return (
<View>
<Text>Store</Text>
</View>
);
}Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Why is the cart state kept in a Context?
- Every screen reaches it Correct answer
- Only one screen needs it
- It is for styling
- FlatList requires it
Explanation: The cart is reached from several screens; Context shares it.
2 Write the price field
{ id: '1', name: 'Kalem', ____: 20 }{ id: '1', name: 'Kalem', price: 20 }Explanation: The price field holds the product's price.
3 Match the pieces
| Term | Meaning |
|---|---|
products |
Data array |
FlatList |
List renderer |
Context |
Shared cart |
state |
Selected product |