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.

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