https://github.com/sahilk-027/internship-journey-fyle-2024

My internship journey at Fyle Inc.
https://github.com/sahilk-027/internship-journey-fyle-2024

diary fyle internship

Last synced: 3 days ago
JSON representation

My internship journey at Fyle Inc.

• Host: GitHub
• URL: https://github.com/sahilk-027/internship-journey-fyle-2024
• Owner: SahilK-027
• Created: 2024-01-04T14:36:31.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2024-10-16T14:29:02.000Z (3 months ago)
• Last Synced: 2024-10-18T10:32:55.546Z (3 months ago)
• Topics: diary, fyle, internship
• Homepage: https://www.fylehq.com
• Size: 216 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Internship-Journey-Fyle-2024

My internship journey @Fyle

## 🔹 Introduction 🚀

Greetings, fellow developers and tech enthusiasts! 👋

Welcome to the journey of a six-month voyage through the dynamic landscape of front-end development at Fyle. Get ready to join me on a super cool adventure.

### Destination: Fyle HQ

As I step into the realm of front-end development, I invite you to be a part of my professional diary. In this repository, each commit signifies a victory, a lesson learned, and a step forward in my growth as a software geek. 

### About Fyle:

Fyle is a Real-time expense management software for cards you already have. Fyle aims to reduce the time spent on business expense management. Nestled within everyday productivity tools like Gmail, Outlook, Slack, MS Teams, text messages, and email forwarding, Fyle provides employees with a unique and simple way of submitting expense receipts on the go. Fyle is also easy to use and significantly increases adoption rates for employees.

- Website: [https://www.fylehq.com](https://www.fylehq.com)

- LinkedIn: [https://www.linkedin.com/company/fyle/about/](https://www.linkedin.com/company/fyle/about/)

- Industry: Software Development

- Headquarters: Newark, Delaware

- Founded: 2016

- Specialties: Paperless Expense Management, Expense Management, Travel Expense Management, Business Expense Management, Receipt Management, Spend Management, Expense Reporting, Credit Card Reconciliation, and Business Credit Card Management.

### Building Blocks

In this repository, you'll find more than just my experience. This repository is like my diary where I am going to write the challenges I've conquered, the bugs I've squashed, and the aha moments that define my path towards mastering the art of crafting seamless user interfaces.

### Chapters Unfold

This is not just a README; it's a living document, a story in progress. Join me as I navigate the challenges, celebrate victories, and immerse myself in the world of pixels and protocols.

Buckle up, fellow coders! The journey begins here. Let the journey unfold! 🌟

## 🔹 Timeline

| Date                   | Event                                     |

|------------------------|-------------------------------------------|

| 27th November 2023    | Applied                                    |

| 29th November 2023    | Got the Assignment                         |

| 06th December 2023    | Sent the submission                        |

| 12th December 2023    | Mail to schedule an interview Round 1      |

| 18th December 2023    | Interview                                  |

| 19th December 2023    | Mail to schedule an interview Round 2      |

| 20th December 2023    | Interview                                  |

| 20th December 2023    | Mail to schedule an interview Round 3      |

| 22nd December 2023    | Interview                                  |

| 26th December 2023    | Got an offer                               |

| 09th January 2024     | Start the internship                       |

## 🔹 Application and Assignment

Guess what? I'm in the final semester of my Computer Engineering journey, and let me tell you about this wild ride with Fyle!

So, I was on the lookout for an internship to level up my skills during my 7th semester. Found this place called Fyle on Internshala. They had this super cool Frontend Engineering Internship, but get this - they only had 4 spots, and over 1300 people applied! 😱

I decided to give it a shot, applied, and to my surprise, Fyle replied in just two days! They gave me a task: create a GitHub Repositories listing page using Angular 14+. Cool, right?

Here's the catch – I had never used Angular before. I usually roll with vanilla JS and React, but hey, let's learn Angular in just 7 days! 😅 I found this [YouTube playlist](https://youtube.com/playlist?list=PL1BztTYDF-QNlGo5-g65Xj1mINHYk_FM9&feature=shared) and started my Angular journey.

Now, the fun part! With only 3 days left to build the app, I had zero time for fancy designs. So, I took a blank page and drew a basic outline of my application. Funny, right? But that sketch really saved me during the interview (I'll spill the beans on that later).



  

    

    



Fast forward 7 days, and voila! Check out the frontend web application I created for the assignment: [My Application](https://fyle-internship-challenge-23-sahilk-027.vercel.app/).

Submitted it through a Google form and now playing the waiting game for their response. Exciting times ahead! 😇

## 🔹 Interviews

Alrighty, Amigos, gather 'round for the next chapter of my Fyle internship adventure! The interview at Fyle, Imagine it like having a chat about your favorite video game with a friend who's really good at it!

### The Epic Wait

After sending in my assignment, the waiting began. And oh boy, did I have to wait... for a whole week! But then, like a beacon of hope, an email arrived from one of the engineers at the Fyle team. They wanted to chat with me! 🎉

### Round 1: The Techie Talk

We started by talking about Fyle and what the engineers do there. Then, the fun part began - the technical stuff! They asked me questions about how I make THE THINGS on the internet (front-end development, as they call it). We talked about my assignment. And guess what? My sketches came to the rescue! I explained my code using those doodles, and it worked like magic! ✨

Now, here's the exciting part. They wanted to see any one of my past projects! I was so excited that I showed not just one, but TWO of my coolest projects - [Trinity-2023](https://trinity-2023.vercel.app/) and [AssembleScript](https://assemblescript.vercel.app/). Cleared this round easily!

### Round 2: The Chill Chat

Next up, round two – the Non-techy + a dash of Tech. We talked about my personality, how I see startups, my portfolio and some projects I tackled before. It was more like a friendly phone call than a serious interview. Can you believe it lasted an hour? But hey, it was all about sharing ideas and learning about each other. 😄

### Round 3: The Unexpected Round

Picture this: after two rounds of cool chats, I thought my job interview adventure was coming to an end. But surprise, surprise - there was a third round waiting for me! That's why I call it the Unexpected Round. 

Here we talked about the awesome things Fyle offers to its workers and some cool perks, like extra treats in your lunchbox. It was different from the first two rounds. No tricky tech questions, instead, we talked about why Fyle? and what kind of cool things they do for their team members.

And just like that, the Unexpected Round was over. It was a bit surprising because usually at Fyle, people have two rounds, but Fyle threw in an extra one for a twist. They wanted to make sure I'd be a happy camper at Fyle, and that's how the Unexpected Round became a little surprise in my job interview adventure! 🌟😄

## 🔹 First Day at Fyle - Onboarding Adventure 🌟 (9 Jan 2024)

Let's move a little further, fellow travellers...(Yeah you are travelling this journey with me so far 😇)! Today marked the commencement of my internship at Fyle. The onboarding process kicked off with a delightful meeting with Yitzhak from the People Success team. In our scheduled call, he told me about the perks and benefits showered upon Fyle interns.

### Perks and Benefits 🍔

Fyle goes above and beyond to ensure interns have a stellar experience. Some highlights include:

- Glamorous Gear: Interns are equipped with Apple MacBooks, the epitome of geekiness in the tech world. Talk about coding in style!

- Fuel for Thought: Food and internet reimbursement, because well-fed brains code better. It's science, right?

- Knowledge Boost: Yitzhak pointed me towards essential security and professional training courses to finish within the first week. A proactive approach to skill development!

- Health First: Fyle acknowledges the importance of well-being by providing interns with their own health insurance coverage. Healthy interns, happy interns!

### Unique Work Culture 🌈

Here's the scoop on Fyle's work culture – they don't have an HR team! Why? Because at Fyle, people are not just resources; they are valued individuals. A refreshing perspective in the corporate landscape.

### Leave Policy 🏝️

Hold on to your hats – Fyle boasts a leave policy that's as cool as an Ice 🥶. Annual 20 leaves and unlimited sick leaves 😲. And get this, they actually encourage people to take leaves! Who would've thought that? 😲

### Meet the Team 🤝

Next on the agenda was meeting my manager, "Dimple." We delved into work, discussed about the codebase, and explored a mix of technical and non-technical topics.

But wait, there's more! I also got introduced to my "Buddy," a lifeline in the world of Fyle. Aniruddha is my go-to person for any queries or questions that may arise during this exciting journey.

And there you have it, the highlights of my first day at Fyle. Buckle up, as this internship journey promises more adventures, challenges, and aha moments! 🌟

## 🔹 Milestone Unlocked: First Bug Fix 🐞 (11 Jan 2024)

Just two days into my internship and I have already experienced a mini-victory that brought a big smile to my small coder's heart. My first contribution to the real-world production app! 🎉 Today, I successfully fixed my first bug! After my manager approved the PR it was time to test the fix.

- First, the local environment – check ✅

- Then, the staging environment – all good ✅

- Then, the test production environment- done 😇

After thorough testing in local, staging, and production environments, my code patch is officially live in the real-world app. 🚀 Users, get ready to experience a better UI, courtesy of this newbie coder! 🤩🌐

## 🔹 First size/M task ⚡️ (21 Jan 2024)

Time to dive into my recent task at Fyle – my first encounter with a Size/M task. So, a few days ago I was making some awesome style tweaks in one `scss` file, and the moment I was about to hit that commit, bam! An error Appears 😮.

Then I turned to the documentation and finally stumbled upon Slack threads where a few fellow coders had already faced the same issue. The culprit? A mismatch in stylelint versions between the `setup.sh` file and package.json. Ah, the classic dependency mismatch error.

Not one to back down, I tried to fix the issue and proudly raised a PR. Victory is sweet, right? Well, not so fast. But just after I merged my PR one of our senior Engineers asked me to fix all rules that are deprecated and adding any that make sense. So this was my first task of dependency upgradation. I have never done it before, because generally in our personal projects we usually use the latest versions of dependencies but in corporate first we forcefully install a specific version and then comes the task of Upgrading them and removing deprecations...You might be wondering Why I call it size/M task, because at Fyle we label tasks as size/s to size/xl i.e. from small to large.

So there I go, fixing deprecations for stylelint.  What's next on the agenda? Well, brace yourselves, because the journey includes more dependency upgrades – think Eslint and a bunch of others. The coding adventure continues, and I'm here for it! 😅🚀

## 🔹 First BR 🐞 (30 Jan 2024)

So now it's time to solve the mystery behind the quirky bug that's been causing some serious field naming chaos in Fyle's expense management software. So, grab your magnifying glass, put on your coding hat, and let's dive into this bug-hunting!

The problem was when a customer renamed a field in the Mileage category, and bam! All heck breaks loose. Suddenly, fields across different expense categories are changing their names. This isn't the expected behaviour, if someone is changing or customizing the name of a field in one form why the heck it should reflect that change in other places? 

#### 🕵️‍♀️ The Mystery Unraveled: Here's what I uncovered:

Our culprit? Undefined variables! Yep, turns out that when the default category isn't chosen in the expense fields by default it is used to show the last updated field.

#### 🛠️ The Solutions:

Customers have been facing this issue for months and I thought the fix would be hectic and long, but to my surprise, it was just a one-line fix 😅. By sorting the data based on sequence numbers, we can ensure the field names are displayed properly, that's it. Just one line of code `{order: seq.asc}`. And that's how I fixed it. It's in production now 😎, so no more inconsistency in naming will be faced by customers. 

From this entire experience, I've learnt a significant lesson: no matter how big a problem may appear or how long it has haunted you, the solution often boils down to simplicity, and more often than not, it's just a one-liner. Don't let the daunting nature of a problem intimidate you; tackle it, and you might discover that victory is achieved through straightforward solutions and not through fancy ones. Until next time, happy coding, and may your bugs be few and far between!

## 🔹 #1st Product Roadmap Initiative (q1_fix_alert_icon_issue) (24th Jan - 29th Feb)

Let's dive into my recent task of fixing some icon issues at Fyle Software.

So, imagine you have this cool app where you track your monthly expenses like buying books, snacks, and all that jazz. Now for your convenience, you have added a few icons to identify particular expenses in a glance. Icons like a cool badge for a special expense, different icons to identify expenses related to enjoyment or related to study and all that. So in the Fyle Expense Management App, we have similar icons some related to expense receipt some related to amount, credit card split expense etc etc. But, guess what? These icons were causing a bit of confusion and needed a makeover. 

Let's be a little technical and know about what the real problem was. 🤓

- Problem 1: We had extra unnecessary icons cluttering things up. Greyed-out icons, meant to represent potential issues like expense-related policy violations or flagged expenses, were always there, even when not needed. This wasted space and made things unclear.

- Problem 2: It was like mixing up icons with totally different meanings on the same page. similar to mixing up the "electricity due" sticker with the "birthday celebration" sticker. Icons with distinct meanings, such as policy violations and split expenses, were grouped, confusing users.

- Problem 3: Some important pages forgot to put stickers on them! Inconsistencies were observed in the presence of icons across different screens, leading to confusion for users.

Now, I teamed up with some awesome folks - Dimple, Meeha and Mihir. Meeha did a fantastic job of creating the plan, while Mihir added the Figma designs. Dimple helped in coordinating between different teams. Then, it was my turn. It was my first product roadmap initiative, and I had to make sure everything happened just like we planned. From writing down the engineering doc. to testing out the code I had written, I made sure our new icons were in the right places.

And guess what? It worked! The app looked cleaner, and everyone could understand their expenses better. Big shoutout to the team for making this journey awesome! 🚀 Now, every expense and report in Fyle has its own special icon, making it super easy for you to keep track. Until next time, happy expense tracking!

## 🔹 View report tab navigation (19 Mar 2024)

Recently, a senior manager, Abhishek, brought to our attention a usability issue that had gone unnoticed for quite some time.

Let me outline the problem first. 

In the Fyle WebApp, for any expense report view, we have three navigation options:

1. Expense Details

2. Comments

3. History

 

By default, the Expense tab is selected. So, imagine you've navigated to the Comments tab and you're scrolling through a lengthy list of comments. Suddenly, due to a network issue or another unforeseen circumstance, the page refreshes. In such cases, the Fyle app used to reload the page and return you to the default Expense tab. This behaviour posed a significant inconvenience. The desired functionality is that when users are on any of the tabs—Expense, Comments, or History—if the page refreshes, they should be redirected to the section they were previously engaged with.

Given my prior experience working in the Expense and Reports area during the last initiative, this task was assigned to me. To address this issue, I proposed two solutions:

1. Store the last visited tab in session or local storage. Upon a page refresh, retrieve this information to redirect the user to the appropriate tab.

2. Use query parameters in the URL, such as `REPORT_URL/?tab=expenses`, `REPORT_URL/?tab=comments`, or `REPORT_URL/?tab=history`. This way, we can easily determine the last tab the user was on.

The first solution was lots of resource-demanding, particularly for organizations with a large volume of reports storing the last visited tab for each report in local storage could consume significant storage, especially in the worst cases. Consequently, we opted for the second solution.

I implemented the chosen solution within a few days and it's now live in production. Feel free to explore and submit your report and read the comments and history without any inconvenience. 

Until next time, happy expense management 😂!

## 🔹 Projects API migration (1 April 2024)

Let us first discuss the API migration process. Right now in the Fyle app, we have three versions of API, the first one is a very old `v1 API` which we used in the initial phases of our application building, but then due to the need for scalability and efficiency we introduced `v2 API`. There were a few problems with `v2 API`, such as unnecessary lengthy key names, and some redundant calculations the backend was performing in order to serve API. So we switched to `platform API` But this switch from APIs introduced a new problem. The problem of multiple master-slave DBs. Like in the Fyle app some features still use `V1` & `V2` APIs this is why we still have their corresponding DBs in the backend. Due to this each time the user writes something it is supposed to be propagated on all three DBs. As by now you might have got it, why to perform these unnecessary writes? That's why we are migrating all the occurrences of `v1` & `v2` APIs to `platform` API.

I am doing the job of `Projects API` migration. It's getting lengthy and there is a lot of work in migration, but I have finished up a few tasks from the list. To date, I have successfully migrated all the ProjectAPIs from the settings web-app, and almost finished migrating Projects API from the entire mobile app. So few tasks are remaining. And we are trying to finish it by the end of May 2024.

Read the detailed blog about Projects API migration here: https://stories.fylehq.com/p/the-way-we-migrate-apis-projects