# Scenario Based Learning

## What is Scenario Based Learning

Whenever I want to learn new technology, I can able to find a lot of resources to learn the syntax of a particular programming language/technology.

But, I couldn’t able to find resources which gives me a production level problem scenarios, from which I can able to learn the technology.

so, I thought why don’t I create a one which will be helpful for developers like me to learn a programming language or technology by practicing a problem scenario.

## why it is important

Every time, we learn something. we go and find something to implement in it to get a good grasp of it. From, a beginner perspective. it is great.

But, there is a gap between a beginners who learn the technology to a person who works in the production level application. we really don’t know what kind of a problem the particular technology solves in real industrial applications until we work for a company or in a freelancing project

What I am going to do is, I will be sharing all the problem scenarios that I faced in the production. So, the beginner for the particular technology can replicate the scenario on his own and learn from it.

Basically, he/she is going to gain my experience through learning on his own. So, In the future, if he faces the same problem scenario, he/she can tackle it in an efficient way.

## Table of  Contents

## Tech Stack

 - [Front End - React](#front-end-react)
 - [Back End - Node.js & MongoDB](#back-end-nodejs-and-mongodb)
 - [Full Stack - Node & React](#full-stack-node-and-react)


 ## `Front End-React`

 ### Beginner

[React Route Based on the Subdomain - Beginner](https://github.com/ganeshmani/solve_scenarios/blob/master/Scenarios/FrontEnd_React/React%20Route%20Based%20on%20the%20Subdomain%20-%20Beginner.md)

[Create a Basic Form with React & Formik - Beginner](https://github.com/ganeshmani/solve_scenarios/blob/master/Scenarios/FrontEnd_React/Create%20a%20Basic%20Form%20with%20React%20%26%20Formik%20-%20Beginner.md)

[Google Login & Google Captcha Integration with React Form - Beginner](https://github.com/ganeshmani/solve_scenarios/blob/master/Scenarios/FrontEnd_React/Google%20Captcha%20Integration%20with%20React%20Form-Beginner.md)

### Intermediate

[React File upload and Upload using DropBox , Google Drive Link - Intermediate](https://github.com/ganeshmani/solve_scenarios/blob/master/Scenarios/FrontEnd_React/React%20File%20upload%20and%20Upload%20using%20DropBox%20%2C%20Google%20Drive%20Link%20-%20Intermediate.md)

[Replacing React Component (Min 4) in a Single Route(Conditional Rendering) - Intermediate](https://github.com/ganeshmani/solve_scenarios/blob/master/Scenarios/FrontEnd_React/Replacing%20React%20Component%20(Min%204)%20in%20a%20Single%20Route(Conditional%20Rendering)%20-%20Intermediate.md)

## `Back End-Node.js and MongoDB`

### Beginner

[Get Users a NearBy Restaurants - Beginner](https://github.com/ganeshmani/solve_scenarios/blob/master/Scenarios/Backend_Nodejs/Get%20Users%20a%20NearBy%20Restaurants%20-%20Beginner.md)

[User Authentication and Authorization - Beginner](https://github.com/ganeshmani/solve_scenarios/blob/master/Scenarios/Backend_Nodejs/User%20Authentication%20and%20Authorization%20-%20Beginner.md)

### Intermediate

[API Grouping based on Role - Intermediate](https://github.com/ganeshmani/solve_scenarios/blob/master/Scenarios/Backend_Nodejs/API%20Grouping%20based%20on%20Role%20-%20Intermediate.md)

[Service to Generate Thumbnail - Node.js / MongoDB - Intermediate](https://github.com/ganeshmani/solve_scenarios/blob/master/Scenarios/Backend_Nodejs/Service%20to%20Generate%20Thumbnail%20-%20Node.js%20MongoDB%20-%20Intermediate.md)

[Event Sourcing - Kafka,Socket & Node.js - Intermediate](https://github.com/ganeshmani/solve_scenarios/blob/master/Scenarios/Backend_Nodejs/Event%20Sourcing%20-%20Kafka%2CSocket%20%26%20Node.js%20-%20Intermediate.md)

[Adding Watermark in Uploaded Images - Node - Intermediate](https://github.com/ganeshmani/solve_scenarios/blob/master/Scenarios/Backend_Nodejs/Adding%20Watermark%20in%20Uploaded%20Images%20-%20Node%20-%20Intermediate.md)

### Advanced

[Launch your own npm package - Node.js - Advanced](https://github.com/ganeshmani/solve_scenarios/blob/master/Scenarios/Backend_Nodejs/Launch%20your%20own%20npm%20package%20-%20Node.js%20-%20Advanced.md)

## `Full Stack-Node and React`

### Intermediate

[Document Management System - Node/React - Intermediate](https://github.com/ganeshmani/solve_scenarios/blob/master/Scenarios/Full%20Stack%20-%20Node%20%26%20React/Document%20Management%20System%20-%20Intermediate.md)

[GeoSearch Service - Node & React - Intermediate](https://github.com/ganeshmani/solve_scenarios/blob/master/Scenarios/Full%20Stack%20-%20Node%20%26%20React/GeoSearch%20Service%20-%20Node%20%26%20React%20-%20Intermediate.md)

[Chat Application with Slack Feature - Node, Socket & React - Intermediate](https://github.com/ganeshmani/solve_scenarios/blob/master/Scenarios/Full%20Stack%20-%20Node%20%26%20React/Chat%20Application%20with%20Slack%20Feature%20-%20Node%2C%20Socket%20%26%20React%20-%20Intermediate.md)

### Advanced

[Video Chat Application - Node & React - Advanced](https://github.com/ganeshmani/solve_scenarios/blob/master/Scenarios/Full%20Stack%20-%20Node%20%26%20React/Video%20Chat%20Application%20-%20Node%20%26%20React%20-%20Advanced.md)


[Online Document Editor - Drag and Drop - Node & React - Advanced](https://github.com/ganeshmani/solve_scenarios/blob/master/Scenarios/Full%20Stack%20-%20Node%20%26%20React/Online%20Document%20Editor%20-%20Drag%20and%20Drop%20-%20Node%20%26%20React%20-%20Advanced.md)

[OmniChat for All your Social Account - Node & React - Advanced](https://github.com/ganeshmani/solve_scenarios/blob/master/Scenarios/Full%20Stack%20-%20Node%20%26%20React/OmniChat%20for%20All%20your%20Social%20Account%20-%20Node%20%26%20React%20-%20Advanced.md)



### Contribution

Contributions are very welcome: [Submit](https://github.com/ganeshmani/solve_scenarios/blob/master/Contributing.md)

### Code of Conduct

 [CODE_OD_CONDUCT](./CODE_OF_CONDUCT.md)


### License

Copyright (c) [2019] [ganeshmani]

[License](./LICENSE)