Capstone Project - Building a Full-Stack App

# CHAPTER 30

Capstone Project - Building a Full-Stack App #

1. Introduction #

You have reached the summit. Over the past 29 chapters, you have learned the syntax, the architecture, and the optimizations required to engineer professional mobile applications. However, reading about a hammer does not build a house. True mastery is achieved through synthesis. In this final chapter, we will outline the Capstone Project. This is not a tutorial; it is an architectural blueprint. Your mission is to build a full-stack "Recipe Social Network" application from scratch, utilizing every single technology and paradigm you have learned in this curriculum.

2. Capstone Objective #

App Name: *Culinario* Concept: A social network where users can log in, view a feed of recipes from a remote API, save their favorite recipes to a global state, take a photo to upload their own recipe, and toggle a dark mode theme.

3. Required Technologies Stack #

To successfully pass the capstone, you MUST integrate the following:

1. 1. React Navigation: Protected Auth Routes, Bottom Tabs, and Native Stacks.

1. 2. Context API: Global Theme state (isDarkMode).

1. 3. Redux Toolkit: Global Shopping Cart / Saved Recipes state.

1. 4. Axios: Fetching the recipe feed from an external REST API.

1. 5. Firebase: Authentication (Login/Signup) and Firestore (Saving custom posts).

1. 6. Expo Image Picker: Accessing the camera to snap food photos.

1. 7. AsyncStorage: Persisting the login session and theme preferences on the hard drive.

1. 8. Animated API: A fluid loading screen or button interaction.

4. Phase 1: Architecture and Routing #

Goal: Build the skeleton of the application.

1. 1. Initialize a new Expo project.

1. 2. Configure app.json with a custom Icon and Splash Screen.

1. 3. Build the NavigationContainer.

1. 4. Create an <AuthStack> containing LoginScreen and SignupScreen.

1. 5. Create a <MainTab> navigator with three tabs: Feed, Create, and Profile.

1. 6. Implement the "Magic Switch" (Protected Routes) in App.js so unauthenticated users cannot access the Tabs.

5. Phase 2: Authentication & Persistence #

Goal: Secure the application.

1. 1. Integrate the Firebase JS SDK.

1. 2. Wire the SignupScreen to Firebase createUserWithEmailAndPassword.

1. 3. Wire the LoginScreen to Firebase signInWithEmailAndPassword.

1. 4. Use AsyncStorage to save the UID when a user logs in.

1. 5. Use useEffect in App.js to read AsyncStorage. If the UID exists, bypass the Login screen entirely and dump the user directly into the MainTab feed!

6. Phase 3: The API Feed (Axios & FlatList) #

Goal: Display dynamic data efficiently.

1. 1. In the Feed tab, create an Axios instance.

1. 2. Fetch a list of dummy recipes from an API (e.g., https://dummyjson.com/recipes).

1. 3. Manage the isLoading state and display an ActivityIndicator.

1. 4. Render the data using a highly-optimized <FlatList>.

1. 5. Style the individual <RecipeCard> components using the StyleSheet API and Flexbox.

7. Phase 4: Hardware and Firebase Storage #

Goal: Break out of the sandbox and write to the cloud.

1. 1. In the Create tab, implement a button that requests Camera permissions.

1. 2. Use expo-image-picker to open the viewfinder and capture a photo.

1. 3. Render the captured local URI in an <Image> component.

1. 4. Provide a <TextInput> for the Recipe Title (Wrapped in a KeyboardAvoidingView).

1. 5. On submit, write a new NoSQL document to Firebase Cloud Firestore containing the Recipe Title and the User's UID!

8. Phase 5: Global State (Redux & Context) #

Goal: Manage cross-screen data.

1. 1. Configure a Redux Store and a savedRecipesSlice.

1. 2. Add a "Save" icon to each <RecipeCard> in the feed. When tapped, use useDispatch to push that recipe object into the Redux Store.

1. 3. In the Profile tab, use useSelector to read the Redux Store and display a list of all saved recipes.

1. 4. Create a ThemeContext to manage Dark Mode. Connect a switch in the Profile tab to toggle the global UI colors!

9. Phase 6: Polish and Optimization #

Goal: Achieve AAA quality.

1. 1. Add an Animated.spring effect to the "Save" icon so it bounces when clicked.

1. 2. Wrap your heavy RecipeCard components in React.memo to prevent cascading re-renders when scrolling the FlatList.

1. 3. Ensure your layouts use useWindowDimensions so they look perfect if rotated to Landscape mode.

10. Phase 7: Deployment #

Goal: Publish the binary.

1. 1. Create an Expo account.

1. 2. Run eas build:configure.

1. 3. Execute eas build -p android --profile preview.

1. 4. Download the resulting APK, install it on a physical Android phone, and show your friends!

11. Final Words of Advice #

Building a full-stack application is hard. You will encounter red error screens. You will misspell variable names. You will forget to wrap things in curly braces. Do not copy-paste code blindly. When an error occurs, read the stack trace. Debugging is 80% of software engineering. Trust the architectural patterns you have learned in this course.

12. Congratulations! #

You have officially completed the React Native for Beginners curriculum. You started by learning how a single View box renders on a screen, and you have graduated with the ability to engineer complex, secure, hardware-integrated, full-stack mobile applications deployed to the cloud.

The mobile ecosystem is now yours to command. Happy coding!