- 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.
You can also scan this QR CODE to view the project.
- React Native - React Native app built with expo
- SQLite - For storing restaurant's menu items.
- AsyncStorage - For storing user preferences.
- StyleSheet - For styles
- 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);
}
})();
}, []);
- 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.
- Website - Marvin Morales Pacis
- LinkedIn - @marventures
- Twitter - @marventures11