Little Lemon Food Ordering App

• The application is a React Native Expo Food app.
• Users will be capable of signing up on the Little Lemon restaurant app.
• Users will have to go through a registration process.
• Once they successfully complete that phase, they are redirected to a home screen.
• Home screen will represent the landing screen after completing the onboarding flow, displaying a header, a banner with a search bar and a list of menu items where a user can filter each categories.
• User can also customize their name, email, photo and and other user preferences through a Profile Screen.
• Profile screen also contains four checkboxes enable specific email notifications, like order status, password changes,special offers, and newsletters.
• Use AsyncStorage module to preserve the chosen preferences even when the user quits the application
• When clicking the Logout button, user will redirect back to login page, clearing all data saved from Profile.
• Use SQLite Database to populate, query and filter menu items.

Table of contents

• Overview
  • How to use the project
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Useful resources
• Author

Overview

How to use the project

npm install && npm start

Then, a QR Code wil appear on your terminal.

On IOS Scan QR code through Camera app.

On Android : Scan QR code through Expo Go app.

You can also scan this QR CODE to view the project. (Please use SDK Version 47 on Expo Go to view the project)

Screenshot

Links

• Github: Code
• Demo : Scan the QR Code to see the demo.

My process

Built with

• React Native - React Native app built with expo
• SQLite - For storing restaurant's menu items.
• AsyncStorage - For storing user preferences.
• StyleSheet - For styles

What I learned

• Create a React Native App using Expo
• Create a wireframe and high fidelity mockup using Figma.
• Use ContextAPI for login
• Use React Navigation (Native Stack) for screen routes.
• Use ImagePicker API to set user Profile Picture
• Use useFonts Hook from expo-fonts to set custom fonts
• Use AsyncStorage to store user settings.
• Use getItem and setItem methods to read and set data to AsyncStorage
• ConnectAsyncStorage to a state
• Use SQLite to store Menu Items
• Connect SQLite to a state
• Create form validation for users
• Handling side-effects using useEffect Hook
• Use FlatList component to render menu
• Use ScrollView component to render categories title
• Use View, View, Text Components
• Extract all styles to StyleSheet API

Here is a code snippet:

const [profile, setProfile] = useState({
  firstName: "",
  lastName: "",
  email: "",
  phoneNumber: "",
  orderStatuses: false,
  passwordChanges: false,
  specialOffers: false,
  newsletter: false,
  image: "",
});
const [data, setData] = useState([]);
const [searchBarText, setSearchBarText] = useState("");
const [query, setQuery] = useState("");
const [filterSelections, setFilterSelections] = useState(
  sections.map(() => false)
);

const fetchData = async () => {
  try {
    const response = await fetch(API_URL);
    const json = await response.json();
    const menu = json.menu.map((item, index) => ({
      id: index + 1,
      name: item.name,
      price: item.price.toString(),
      description: item.description,
      image: item.image,
      category: item.category,
    }));
    return menu;
  } catch (error) {
    console.error(error);
  } finally {
  }
};

useEffect(() => {
  (async () => {
    let menuItems = [];
    try {
      await createTable();
      menuItems = await getMenuItems();
      if (!menuItems.length) {
        menuItems = await fetchData();
        saveMenuItems(menuItems);
      }
      const sectionListData = getSectionListData(menuItems);
      setData(sectionListData);
      const getProfile = await AsyncStorage.getItem("profile");
      setProfile(JSON.parse(getProfile));
    } catch (e) {
      Alert.alert(e.message);
    }
  })();
}, []);

Useful resources

• React Native Docs (StyleSheet) - This helped me for all the neccessary React Native styles. I really liked their documentation and will use it going forward.
• ImagePicker API - This helped me for creating an option for user to select profile picture on their devices.
• SQLite - This helped me for saving menu items.
• Async Storage - This helped me for saving user settings.
• ContextAPI- This helped me for creating a authentication context for login.

Author

• Website - Marvin Morales Pacis
• LinkedIn - @marventures
• Twitter - @marventures11