## Problem statement

Currently, I’m pursuing computer engineering in Vidhyanagar, Anand. In our vvn(vidhyanagar), There’s a problem for students while in search of food to eat at noon and night.

Students like me, wasting their around 1 hour deciding what to eat in food, We’ve options but still can’t decide what to eat.

> Having too many options create confusion.

### Food options

-   Mug pulav (One of the famous food items in vvn)

-   Gujarati dish at a fixed price

-   Other fast foods

> Note: [Foodie VVN](https://www.foodievvn.com/) is a product by [Gigaweb](https://www.gigaweb.in/)

Here’s the post about Gigaweb.

## The solution that we’ve founded

We’ve developed a web app that provides restaurants, cafes, lounges and tiffin services. Especially this will help those students who are new in vvn. In this web app, we also provide a food menu which will be updated by restaurant owners.

### Functionalities

-   Searching functions

-   [Filter restaurants](https://www.foodievvn.com/category/restaurant) by category - [Cafe](https://www.foodievvn.com/category/cafe), [Lounges](https://www.foodievvn.com/category/lounge), and [Tiffin services](https://www.foodievvn.com/category/tiffin-service)

-   Filter restaurants by food - [Gujarati](https://www.foodievvn.com/food/gujarati), [Punjabi](https://www.foodievvn.com/food/punjabi), [Chinese](https://www.foodievvn.com/food/chinese), [South Indian](https://www.foodievvn.com/food/south-indian), and [Fast food](https://www.foodievvn.com/food/fast-food)

-   Owner right to update food menu

### Features

-   Secure and fast server connectivity

-   Install as a mobile application

-   Clean and eye catchy user interface

-   Smooth user experience

-   User-friendly and responsive

## Add restaurants functions

Any user or restaurant owner can submit restaurant data and once we verify it from our admin panel, It will publicly available.

## Market survey

All lounges write daily food on board at their place. What happens if we bring those data in our foodie vvn app. It saves up to 1 hour for students.

We’ll not only list out lounges but we are including tiffin services as well. So that owners of tiffin services don’t need to share the food menu with students every day anymore.

We’ve analysed the market by visiting the restaurants in vidhyanagar and this application will be helpful for them again it’s a useful platform to publicity and list out their restaurant.

## About Foodievvn Web app

### Used technologies

-   [React.js](https://reactjs.org/) for frontend

-   [Firebase](https://firebase.google.com/) for server and database

-   [Progressive web apps](https://web.dev/progressive-web-apps/) (PWA) technology to convert web app in to mobile application

## Marketing

We’ve created awesome posts for social media marketing, especially for an Instagram post here is the post that we’ve shared.

We’ve created an account for foodie vvn on Instagram where we will publish some useful content which will be beneficial for students.

Follow [Foodie VVN](https://www.instagram.com/foodievvn/) for further updates on Instagram.

## Conclusion

Foodie vvn is a good option for students to save up to 1 hour daily to decide what to eat every day.

In this post, I've described a problem and depth solution in vidhyanagar using web app technologies.

Foodie VVN

Here's How We solve a daily problem for students

[React](https://reactjs.org/) is an open source front-end javascript library to build web application and websites. React is build by [Facebook](https://facebook.com/) in may 2013.

There are so many resources to learn react.js but here, I've shared my journey about how I learned react.js after learning javascript. Before to learn react.js, You've to learn basic javascript concepts.

## List of concepts to learn before react

-   Function Declarations and Arrow Functions
-   Template Literals
-   Short Conditionals
-   Three Array Methods: `.map()`, `.filter()`, `.reduce()`

Warning: These array methods are very useful while implementing data populating concepts where you'll fetch data from an API to your front-end interface. very useful while implementing data populating.

-   Object Tricks: Property Shorthand, Destructuring, Spread Operator
-   Promises + Async/Await Syntax
-   ES Modules + Import / Export syntax

Here's the [blog post](https://www.freecodecamp.org/news/javascript-skills-you-need-for-react-practical-examples/) to refer all the things and I've list out above concepts from this article.

## Learning perspectives

There are 2 learning point of views by my side.

1.  Learn concepts by doing projects.
2.  Learn concepts by making notes for those concepts.

Personally, I prefer 1st aspect to learn any technology. Again, there's nothing is wrong with 2nd point of view. It's also a good way to learn concepts. But 2nd way is better when if we are learning any particular programming language.

### Here's, Why I prefer 1st way to learn react.js

I've noticed one thing while learning react.js or learning any framework or library implementation where every youtuber or anyone who is teaching react.js, there are directly implementing concepts of that library or framework in any project and again trust me, It's the best way to learn framework.

Tip: The best way to learn any framework is from it's own documentation.

## Where We've to learn React.js

So, Finally came to the point, I wasn't following any particular course from youtube or udemy. I switched to many courses and tutorials and finally I've realized the one thing, which is to learn react.js by doing projects and implementing concepts in my projects.

## Personal advice to learn React.js

So, my personal advice to learn react.js is to not stick to any one course or tutorial. The best way to learn react.js is to explore blogs which is written by developers but for that you need to get an index or kind of [roadmap of react.js](https://github.com/adam-golab/react-developer-roadmap)

So, first explore react.js road map [(github repository)](https://github.com/adam-golab/react-developer-roadmap) and then go with the flow. You can also follow youtube videos for any specific concept or a topic.

### Why I prefer online tutorials over books?

React.js versions update on daily bases. In current version of `react@18.2.0` There are top updates and it [changes](https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html) some code basis of index root files. In this versions they've [updated to server side rendering apis](https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html#updates-to-server-rendering-apis). So, the point is when you're learning from books, it can't be update but online tutorials can be. That's why, I prefer to learn from online resources.

## Creating animations with react.js

There's one of the best library to create animations with react.js is called [Framer Motion](https://www.framer.com/motion/).

## React.js examples

Here, I'm mentioning the best websites for react examples

-   [ReactJs Examples](https://reactjsexample.com/)
-   [FreeCodeCamp Tags](https://www.freecodecamp.org/news/tag/reactjs/)

[I](https://www.abhidadhaniya.com/) and my developer friend [Rohan](https://www.rohankiratsata.xyz/) have created free resources to master full stack web development by using this [free resources](https://web-dev-resources.notion.site/web-dev-resources/Web-Development-Resources-be1207bcc32e434481c1ce6e90756964).

Eager to learn react.js? But don't know how and where to start?

2 Posts found for React.js

Here's How We solve a daily problem for students

Guide to learn React.js

Want to build brand website?

2 Posts found for React.js

Here's How We solve a daily problem for students

Guide to learn React.js

Get the latest updates

Want to build brand website?