---
# System prepended metadata

title: AFRY User-Company Web Application

---

# AFRY User-Company Web Application 
 

<p align="center">
<a href="https://github.com/badges/shields"><img alt="Custom badge" src="https://img.shields.io/badge/custom-badge-f39f37.svg" height="20"/></a>
<a href="https://github.com/SWESRINIS/AFRY_UserCompany_WebApp/graphs/commit-activity"><img alt="Maintained" src="https://img.shields.io/badge/Maintained%3F-yes-green.svg" height="20"/></a> <a href="https://github.com/SWESRINIS/AFRY_UserCompany_WebApp/graphs/commit-activity"><img alt="License" src="https://img.shields.io/badge/License-Apache_2.0-yellowgreen.svg" height="20"/></a>
</p>


</br>

## :question: Afry Problem Statement

   Develop a simple web application / webpage with at least the three views described below. Choose what framework and/or techniques that you find suitable for the task, unless we specifically ask you to use a certain framework. The focus should be to choose a reasonably modern framework/technique and show that you know this well and structure your code with an architecture that is easy to follow. The web app shall keep all data in some kind of database (you can choose a suitable type, and everything from local storage to conventional database or web service will do). This storage shall make it possible to restart/reload your web app/page without losing information. For us to run a test your code it, along with any dependencies, shall be installed and started through npm or similar without requiring other globally installed software. We prefer you to send the code to us using a link to your code on GitHub or equivalent, rather than having it sent to us in a .zip-file or similar. 
   
1. **View 1 ->** Here the user can create a person. A person has a name and can be associated with a company (companies are created in view 2). 
2. **View 2 ->** Here the user can create a company. A company should only have "names" as attributes. Here the user should also be able to choose a company and then get all employees listed. In that listing, it should also be possible to remove an employee from the company. Then, the employee should no longer be associated with the company, but the person should remain in the system without any connection to any company (as if you created a person in view 1 without choosing a company). 
3. **View 3 ->** Here is a list of all people who are not linked to companies and have the opportunity to link them to one of the companies created in view 2.      


## :heart_eyes: Demo


<p align="center">
  <img src="https://github.com/SWESRINIS/AFRY_UserCompany_WebApp/master/public/demo.gif" alt="Demo" width="800" />
</p>

##  ➤ Stack

| Tech                | Name                                         | 
|-----------------------|--------------------------------------------------|
|  Package Manager       | npm                                           |
| Language | Typescript |
| Backend | Firebase Custom Functions |
| Database | Firestore |
| Framework | NextJs |
| UI Library | MaterialUI |


## ➤ Installation of Dependencies


```javascript
npm install
```

## ➤ Run the app in your localhost :dizzy:
     npm run dev
     
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.



## ➤ Takeaways

**Fun** : Loved the challenge, super eager in trying out different models, architecture patterns in solving this was sheer fun

**Knowledge Gained** : Experimenting the ways of coding helped me gain this way of solving the problem using Quick and clutter-free Firebase.

:::info
:bulb: **Experience:** 
It was exciting to utlize latest tech stack and solve it for Afry!
:::

>  As i have written in the CV: Code, tools, libraries, packages and syntaxes is just one google search away! I m a firm believer of concepts, architecture design patterns, logics, efficient code handlers and more in that similar line!  

There can be more takeaways, but the point is not the way of solving instead choosing what suits the best for the solution. We have so many references in the present day STACK OVERFLOW with similar sources, but my motivation to apply for this job is to solve the unsolveable cases for the greater good, impacting on a bigger stage @ Afry! 

