YUM was designed with the intent to provide an enhanced browsing experience for users. The app boasts 4 main features: a profile page for users to store their data, a daily menu page for dining halls, a favorites section for meals and food trucks, and a profile page for uses to keep track of their activity.
-
Login/Signin: Users can create profiles or sign in to their existing profiles.
-
Profile: All users have a profile to store their activity and karma.
-
Menu: The menu page showcases accurate and detailed menus for each dining hall, which helps educate users in their choices and increases satisfaction with their meals.
-
Favorites: Users can like meals and check the favorites page to see which of their liked meals are being served on that day.
-
Popular: The trending list is updated daily with the community's favorite meals, acting as inspiration for indecisive users looking for a good meal.
- React Native: we made a mobile app for accessibility and ease of use.
- Express: Our backend component which allowed us to build API endpoints
- MongoDB: The database we used to store user information as well as the menu and meal information.
- Cheerio: To dynamically obtain dining hall menus, we used Cheerio to scrape the html and crawl through websites.
-
Install dependencies
npm install
-
Set up ngrok (if you are not on private WiFi) Follow the instructions in the link below: https://ngrok.com/downloads/mac-os?tab=download
ngrok http 4000
In the app/config.js file, replace the link with the ngrok link that pops up after running the command.
-
Start the server
cd backend npx nodemon start -
Start the app
npx expo start
Why ngrok? When developing a mobile application locally, the device or simulator needs a publicly accessible URL to reach your backend server. By default, Express runs on localhost (e.g., http://localhost:PORT), which is only reachable from your machine. ngrok creates a secure tunnel from an external, internet-accessible URL to your local server. Start ngrok with ngrok http PORT, then replace any localhost:PORT references in your React Native code or environment files with the forwarded ngrok URL displayed in the terminal. We used ngrok because we live on campus and had to use eduroam.
In the output after npx expo start, you'll find options to open the app in a
- development build
- Android emulator
- iOS simulator
- Expo Go, a limited sandbox for trying out app development with Expo
You can start developing by editing the files inside the app directory. This project uses file-based routing.
Why do I have a folder named ".expo" in my project? The ".expo" folder is created when an Expo project is started using the expo start command. It serves as a local cache for development-related metadata rather than production assets. What do the files contain?
- devices.json: contains information about devices that have recently opened this project. This is used to populate the “Development sessions” list in your development builds.
- settings.json: contains the server configuration that is used to serve the application manifest. packager-info.json: tracks the state of the Metro bundler and its configuration.
- shell-app-manifest.json: includes details about the shell application used for development when working with custom clients.
How does the ".expo" folder affect local development? During development, Expo uses the files in this folder to speed up reloads and maintain your project’s state between sessions. The caching mechanisms reduce redundant network requests by storing build artifacts and manifest information. Can the contents of ".expo" change automatically? Yes. Expo CLI updates these files whenever you run commands like expo start, expo publish, or perform OTA updates. Any changes to configuration flags (for example, toggling development mode) will be reflected in settings.json automatically. Are there any other files I might see inside ".expo"?
- logs.txt: captures runtime logs generated by the Metro bundler and Expo CLI.
- state.json: holds UI state information for the Expo DevTools, such as which tabs were open.
- expo-session-store: a folder containing session-related data for authenticated API requests.
What happens if I delete the ".expo" folder? Deleting this folder is generally safe but will cause Expo to regenerate its contents upon next launch. You may lose metadata like recent device history and custom settings, but your source code remains unaffected. In some cases, clearing ".expo" can resolve corrupted cache issues that prevent the project from starting. Should I commit the ".expo" folder? No, you should not share the ".expo" folder. It does not contain any information that is relevant for other developers working on the project; it is specific to your machine. Upon project creation, the ".expo" folder is already added to your .gitignore file. How do I ignore ".expo" correctly? Make sure your .gitignore file contains the line: Copy Edit .expo/ This ensures the entire directory and its subfiles are ignored by Git. What if I accidentally committed ".expo" in the past? You can remove it from version control using: sql Copy Edit git rm -r --cached .expo git commit -m "Remove .expo folder from repository" and then push your changes to remote.