React App for Foodilog

React App for Foodilog Description

Foodilog is a mobile app to post a review about restaurants, bars, food trucks for any food you like (or not). 

Inception phase

The client has approached to us with the need of develop a web platform to be integrated with existing mobile app. He was expecting to implement the administration panel (for restaurants and dishes administration) and the user website to browse reviews and rate them.

Therefore, the first thing we evaluated was the existing mobile app structure and the backend server. We have worked collaboratively with client's IT guy to have developed necessary endpoints for our application. In order to reach that, we've provided documentation and technical requirements using Postman before proceeding.

Development phase

We have developed a web application from scratch using a ReactJS framework with Bootstrap. We defined an strategy to implement both admin and user applications based on the same starting point. 

We started the development by coordinating with the backend api team. We have implemented a Postman Test Suite with all endpoints and expected values to make the final app integration easier. 

The administration app was implemented based on a Bootswatch theme. We defined the main menu structure with a very simple and intuitive interfaz to quickly browse sections like users, restaurants, dishes, posts and photo gallery. Admin authentication was implemented using native react to perform and catch requests via tokens provided by backend RESTful API. 

The admin panel provide a set of tools to manage basic information and accounts. The admin can control login, users generated content, dishes and restaurant information. 

Dishes section one of the most important areas, it was defined to be the tool to approve/reject logs and reviews and also to collect useful information to be show on both users website and mobile app. The admin can create a new dish by adding a title, assign a restaurant ID, category and price. he can also easily add pictures under the dish page by using the drag-and-drop tool.

The admin ReactJS application has been deployed using node and npm. We have integrated packages like react-bootstrap, react-router-bootstrap, react-dropzone, react-infinite-scroller, react-slider besides others in order to improve the app and code maintainability.

On the other hand, we have developed the regular user website. This is another ReactJS app which also integrate similar tools and packages. We have also used a custom theme based on Flatly Bootswatch to match brand web design. 

The main goal of the user website is to make publish user profiles and improve SEO for brand presence. It adds also a way to reach more people and encourage them to install and use the mobile app. 

The user application was implemented to connect to the same server api. It pulls information from user profiles and dishes reviews. Foodies are able to check restaurantes, dishes and comments from other users. This is connected with the mobile app and synced to show up-to-date information.

Both admin and user react applications have been deployed under Docker environments. We have integrated a node docker image and a volume for persistent data.

Technologies

  • NodeJS is an open-source, cross-platform JavaScript run-time environment for JavaScript code server-side
  • ReactJS is a JavaScript library for building user interfaces. It is maintained by Facebook, Instagram and a community of individual developers and corporations
  • Bootstrap is an open-source HTML5+Javascript+CSS3 framework to build mobile-first user interfaces 
  • Postman is a complete API development environment. It provides several tools to improve and standarize API development

Tagged under

Tags

Serfe info(at)serfe.com https://www.serfe.com/images/serfe_logo_text.png https://www.serfe.com/images/serfe_logo_text.png MACIA 2472, S3016OCP, SANTO TOME, SANTA FE, ARGENTINA 1-305-5375397