FOFI (Food Finder)

Socializing with family and friends in an excellent restaurant can leave great memories in our lives. For this, we need a tool that allows us to establish a correct suggestion of the right place.

Comment

Inspiration

One of the pleasures that can be shared with family and friends is going to a good restaurant to enjoy good dishes. Due to the current situation of the crisis caused by the pandemic, people had to be at home to avoid any contagion in their families. Causing a social distancing almost obligatory. Fortunately, pharmaceutical companies began to work in the search for vaccines to prevent further spread of the virus. That helped restaurants and catering services to gradually reactivate. Therefore, our inspiration comes from the fact that we want to create an application that allows customers to connect with different places that offer a wide variety of menus so that people can once again feel those special moments of sharing that they enjoy so much with their families. and friends

What it does

Front-end Side

Users can connect with their friends to define a place where they can spend a pleasant time celebrating a special occasion. For that, they will be able to interact with each other through a short chat to reflect their opinions on the matter when visiting some type of specific place. For that, they will have an option where they will view the comments left by other people who have already visited that place through a rating system assigning a number of stars. The more stars a place has, it means that the quality, service, and atmosphere is highly recommended to visit it.

Back-end Side

Restaurant administrators will be able to see the reservations made by users who will be visiting the establishment. They also have the option of issuing reports such as total sales, the number of reservations in a date range, approve reservations, and more, feedbacks from customers and many more options.

How we built it

1. We define the conceptualization of the idea about the type of application we want to create for the competition. For that, we brainstormed ideas taking as reference the inspirational ideas provided in the competition, in the Resources section.

2. We made a brief sketch about how we want our application to have an attractive design for users. For that, we put some ideas into a whiteboard.

3. We used bitbucket to define the development stages of our project and keep track of the tasks that had to be carried out.

4. We configure the React development environment by installing its dependencies.

5 We selected and installed the Kendo packages from https://www.telerik.com/kendo-react-ui/ that we are going to use to integrate them with React. For do that, we start to search what package do we need and how to adapt to the design we have on mind for our project. From the Kendo website we downloaded the following packages: 

"dependencies": {
    "@progress/kendo-date-math": "^1.5.2",
    "@progress/kendo-drawing": "^1.10.0",
    "@progress/kendo-licensing": "^1.1.4",
    "@progress/kendo-react-buttons": "^4.6.0",
    "@progress/kendo-react-charts": "^4.6.0",
    "@progress/kendo-react-common": "^4.6.0",
    "@progress/kendo-react-conversational-ui": "^4.6.0",
    "@progress/kendo-react-dateinputs": "^4.6.0",
    "@progress/kendo-react-dialogs": "^4.6.0",
    "@progress/kendo-react-dropdowns": "^4.6.0",
    "@progress/kendo-react-form": "^4.6.0",
    "@progress/kendo-react-inputs": "^4.6.0",
    "@progress/kendo-react-intl": "^4.6.0",
    "@progress/kendo-react-layout": "^4.6.0",
    "@progress/kendo-react-progressbars": "^4.6.0",
    "@progress/kendo-react-scheduler": "^4.6.0",
    "@progress/kendo-react-treeview": "^4.6.0",
    "@progress/kendo-svg-icons": "^0.1.2",
    "@progress/kendo-theme-default": "^4.38.1",
}

6.: We had to create an API to consume the services of our application using Ruby. To do this, we had to create a JSON file in such a way that it could be integrated with the functions declared in our source code and that they are consumed by the established services. 

{
  "Users": [
    {
      "name": "Valentis Pizza",
      "username": "valenpizza",
      "password": "valenpizzapass",
      "isAdmin": true
    },
    {
      "name": "McDonalds",
      "username": "mcdonalds",
      "password": "mcdonaldspass",
      "isAdmin": true
    },
    {
      "name": "Reynerio Jose Davila Silva",
      "username": "reyneriod",
      "password": "reyneriodpass",
      "isAdmin": false
    },
    {
      "name": "Maria Alejandra Castillo Peraltes",
      "username": "mariacastillo",
      "password": "mariacastillopass",
      "isAdmin": false
    },
    {
      "name": "Francisco Antonio Molina Medrano",
      "username": "franmolina",
      "password": "franmolinapass",
      "isAdmin": true
    },
    {
      "name": "Juan Rafael Espinoza Chaves",
      "username": "juanchaves",
      "password": "juanchavespass",
      "isAdmin": true
    }
  ]
}

7: So that our application could work consuming the services, we put our entire project inside a docker container in such a way that everything would run without problem.

8. We wanted to share our application so that it was on the internet. For that, we use heroku where we store our complete application so it can be accessed from any device that has an internet connection by accessing the link https://foodfinderappnic.herokuapp.com/#/

Challenges we ran into

Select the ideal Kendo packages to integrate with our application. Due to the great variety that is available, we had to selectively choose only those necessary for our application.

Since we had never worked with Kendo, we were faced with the difficulty of knowing how to install these packages. We reviewed the documentation carefully and managed to resolve this issue.

Another problem we had was creating an API that was capable of working with the services that we want to provide in our application.

Accomplishments that we're proud of

We managed to create an application that works with a Front-end and Back-end that allows connecting different places where families and restaurants can enjoy great moments.

On the other hand, we managed to implement different components that Kendo offers for React. Allowing us to accelerate the production process and automation of our application

What we learned

We learned to configure different Kendo components that can be used according to the needs of the application to be developed.

We learned that using Kendo in an adaptive way benefits us greatly because its components can be used institutionally.

What's next for FOFI

Perhaps we could put our application in our own domain to apply the part of SEO and SEM where it allows us to have a more organic audience for our application.

It could be possible to create apps for both IOS and Android where users can download a mobile application and connect from their smartphone.

Add a notification section so that users can read the latest comments about a specific place that has good acceptance.

Evaluate other Kendo packages to grow our application.

Analyze, design, and configure access to multiple users so that greater interaction can be had.

Sometimes the server on heroku goes "asleep", causing the web link to be unavailable 24/7. So maybe you have to improve the settings so that it is always available or look for an alternative hosting

Share this project:

Updates