If you want to take a look on all screens of the App, they are here.
The idea of the App is:
"Show differents options of restaurants, dishes and gastronomic events in the city based on what the user is looking to eat and his location in the city."
PS: There's a big market behind this context, and that can be extended to other areas (like music, parties, etc), and I'll be so glad if you could find any idea based on this project to build your own business!
On the Media 🤩: An interview about this app.
This project is part of my personal portfolio, so, I'll be happy if you could provide me any feedback about the project, code, structure or anything that you can report that could make me a better developer!
Email-me: [email protected]
Connect with me at LinkedIn
Also, you can use this Project as you wish, be for study, be for make improvements or earn money with it!
It's free!
1 - All the data abount dishes, gastronomic events and restaurants that is showed in the App are mocked by me, and they don't exists in the real world. The files that contains all data that it's displayed in the App are stored on the back-end of the app.
2 - The current-user-location that is showed by the App is also mocked. All the locations are static and provided by the back-end of the app in this file.
3 - If you're running the App in an Android device (physical or virtual), you'll need to have an Google Maps key to see the Map in Near Me screen and in Restaurant Address Screen. To active your key, follow this tutorial. Those Screens will works properly on iOS by default.
4 - There's no functionality of Login/Register, the buttons and the forms in the Login Screen are only for UI matters.
5 - The Screen Settings it's also only for UI matters.
If you want to test the App in the Production mode, the installers are listed below:
iOS .ipa installer: Soon!
-
Get a Dashboard with:
- A list of Gastronomic Events happening in the City
- Dishes that the User might like
- Popular Dishes
-
Get informations about a specific Dish, with reviews, price, image, comments and the restaurant that offers the dish.
-
Get Informations about a specific Restaurant, with address, operating hours, location on the map, image and the menu.
-
Get Informations about a specific Gastronomic Event, with a list of the Restaurants participating,
-
Search restaurants with a filter based on type of dishes and max distance of search.
-
Visualize the most closests Restaurants with a specific type of Dish, sorted by distance from the user to the restaurant.
To run this project in the development mode, you'll need to have a basic environment to run a React-Native App, that can be found here.
Also, you'll need to the server running locally on your machine with the mock data. You can find the server and all the instructions to start the server here.
Cloning the Repository
$ https://github.com/steniowagner/bon-appetit-app
$ cd bon-appetit-app
Installing dependencies
$ yarn
or
$ npm install
1 - Follow the instructions on the bon-appetit-server to have the server running on your machine.
2 - With the server up and running, go to the src/service/api.js file and edit the value of the field baseURL (line 4) with the IP of your machine (you can have some issues with localhost if you're running on an android physical device, but you can use localhost safely on iOS).
3 - Pay attention with the server address in src/service/api.js file! It should looks like this:
http://< IP of your machine >:3001/bon-appetit/api/v1
or
http:// localhost:3001/bon-appetit/api/v1
With all dependencies installed and the environment properly configured, you can now run the app:
Android
$ react-native run-android
iOS
$ react-native run-ios
- React-Native - Build the native app using JavaScript and React
- React-Navigation - Router
- Redux - React State Manager
- Redux-Saga - Side-Effect model for Redux
- Axios - HTTP Client
- ESlint - Linter
- Flow - Static Type Checker
- Prettier - Code Formatter
- Babel - JavaScript Compiler
- Reactotron - Inspector
- Styled-Components - Styles
- React-Native-Fast-Image - Image Loader
- React-Native-Linear-Gradient - Gradient Styles
- React-Native-Maps - Map
- Shimmer-Placeholder - Placeholder of Images at Home screen
- React-Native-SplashScreen - Splashscreen of the App
- React-Native-Vector-Icons - Icons
- Image-Resize - Resize the Images
- Unsplash - Source of the Images
- Tabs and Tidbits - Dishes Recipes
- Recipe Tin Eats - Dishes Recipes
- Japan - Recipe Tin Eats - Japanese Dishes Recipes
- BBC Good Food - Dishes Recipes
- Trip Advisor - Restaurants Information
- LatLong - Convert Address to LatLong coordinates
- Amazon S3 - Storage Service
You can send how many PR's do you want, I'll be glad to analyse and accept them! And if you have any question about the project...
Email-me: [email protected]
Connect with me at LinkedIn
Thank you!
This project is licensed under the MIT License - see the LICENSE.md file for details