Before starting with my Summer 2019 experience and learnings, if you haven't visited my website, please click here to know about me.
This blog is divided into 8 parts each containing the details about that week's activity. If you have any problem with the content or any other issues, feel free to contact me. Let's get started.
My internship at Pudle! started from 26th May. I had already interacted with my Senior Udit Bansal and another software intern Vishwas Chhimpa before for some discussions. I realized that we were going to build a SPA(Single Page Application) using React and handle backend using Firebase. I had no experience in this field. I realized it soon that I have to learn a lot of things to make things work my way. From my first day, I started looking into the documentations of React and Video lectures in Youtube to learn about it as much as I could. In the first day, we were successful in implementing the authentication of user using Phone Number and Email(including verification) part using Firebase. We were supposed to be implementing Maps in our platform. I took the job to implement the map part while my colleague took the job for handling the furthur authentication part. First we decided to go along with Google Maps in our platform. For the next two days, I was working on the implementation of Google Maps. I saw a lot of libraries built or react which helps to implement Google Maps easily. At first, I decided to go along with google-maps-react. The library was well made and it solved some of my problems. Since I didn't had any experience in react and I was unable to find any good video lectures, I faced lot of problems to add markers dynamically in my platform. But after a lot of head scratching, I finally found the solution to add markers dynamically. I was working on the map implementation till thursday. On thursday, we were supposed to add search bar in our platform to let users search for a location. While implementing that, I saw in the Google Maps Platform, that they only allow a single request per day free for the Places API. After discussing with my senior and looking into the pricing structure of the Places API, we decided that we should go with MapBox in our platform because of the high pricing structure of Google compared to MapBox. On friday, I started with implementing MapBox in our platform. For MapBox, I found an awesome package react-map-gl, developed and maintained by Uber. It solved a lot of problems of mine to implement the map in our paltform. For the searching in the map, I found another awesome package react-mapbox-gl-geocoder, which integrates itself along with the Mapbox object and helps in searching in Maps easily. On Saturday, We documented our week's work and went for a small party. Also, we met our design intern, Prerna Vimania. We discussed along with our senior and interacted with each other. For the next week, we planned that we will be going along with the design sprint 2.0, to know more about our requirements. This marks the end of my first week at Pudle!
Syntax highlighted code block
# Header 1
## Header 2
### Header 3
- Bulleted
- List
1. Numbered
2. List
**Bold** and _Italic_ and `Code` text
[Link](url) and This week was all about the Design Sprint 2.0. It was supposed to be a 4 day activity but since we were all interns and not that experienced, we faced some problems in the later part of the sprint, which increased our time to 5 days. First day of the design sprint is about creating the Map of the problem and sketching. We started the day with some expert interviews and user interviews. We created our "How Might we" questions in this process. This is the first step of Design Sprint. After that, we divided the problems into different categories and merged some of the common questions. After that each member got to vote to the problem they thought was the most important to solve. After voting process, We reached at some conclusion which cleared what problems we should be solving in our product first. After that We discussed the future of the company. Everyone wrote about the long-term goals of the company(goals for the next 2 years). This also concluded with a voting part which gave us the final goal we should be focussing on to achieve for the next 2 years. After this We created the Map of the problem which was basically solving the problem keeping in mind 4 different perspectives. They were Discovery, Learning, Using and Goal. Discovery was about how people will discover our platform. Learning was related to the learning curve and how they will know what we do. Using was related to how they will use it and why. And goal was the final activity that we want the user to do. In our case it was related to "Making a Booking". After this we were supposed to do the lightining demo but it was late and so we decided to do it next day. Tuesday, Lightining Demo was choosing any 3 different live examples from other products which we should use in our platform or create in a similar way. For example: Search Page like Google. We all gave presentation about our three major ideas and then we voted on the ideas we thought were the best among those(Choose 3). Then we moved on the Crazy Eight. It was a process in which we were supposed to select a page in the product and sketch 8 different views of it in 8 minutes. We all completed this process in almost 8 minutes. After that We all selected that page and sketched a 3 page User-test flow of that page. For Example: user reaches search page -> Clicks on the profile option -> Views the profile page. So we will draw all the search page, navigation bar, and profile page along with notes in it to tell about different actions. After that we discussed about the different ideas of each other and selected the best among those. After completing this process, We created a storyboard out of it. The stodyboard consist of the different pages that will be present in the product to navigate the user to the desired location. We created our storyboard keeping in mind the different How Might We questions and the Long term goal. After creating the storyboard with everyone onboard we called it a day. Wednesday was the prototype designing day. We were supposed to be designing all the different pages that we all decided to and connect all those pages. We started with creating the basic design of the product and the imformation that was supposed to be shown to user and collected from user. As we made a storyboard related to a Mobile Application, so we decided that we should be creating a Mobile Application for users. The mobile application was supposed to be created using React-Native and firebase. I had never worked on React-Native before. So, We started looking into the documentation of react-native and also looked for videos which could help us. We used expo to run our application in our devices. As neither of use had a IOS device, we faced problems debugging the application on a IOS Platform. So we decided that we should be creating the application debugging on android and at the end debug on a IOS device and solve the problems. On wednesday we designed the structure of the application. On thursday, We started learning react-native and our designers was working on the UI of the application. Building the environment was creating a problem in the system and after lot of problem I was able to create the environment. I worked on the map implementation in the app while my colleague worked on the authentication part. I found a library react-native-mapbox-gl to work with mapbox. I worked on the map part for the next 2 days i.e. Thursday and Firday. On saturday we learned about PWA(Progressive Web Applications) which let the user have the feel of a native application on the mobile device through the website. This catched our attention and since we needed Google SEO to let users find our platform, so on saturday we decided that We will be working on a PWA rather than just Mobile Applications. This decision marked the end of my Week 2 at Pudle!
As I was not from the Web development field, I had no idea about PWA. On monday we reseached more about PWA and how we should be starting with it. We came across Net Ninja PWA Tutorial on Youtube. It showed how to start with PWA using Vanilla JS and HTML. So we decided to start along with it and ended up getting along a MPA(Multiple Page Application) creation. On wednesday, in a discussion our senior got to know that we were working on a MPA and not a SPA. So he told us to first research on it and then we had a meeting with one of our's technical expert. He told us about the problems that we will be facing in future to create animations and various other things in Vanilla JS. Also he told us that MPA will also create a lot of problem to us in future. So he guided us to either choose Vue.js or React and create a SPA to avoid problems in future. On thursday and friday, we learned about vue.js and compared with react. I found Vue.js better than react and also it's documentation was really good. So I discussed along with my colleague and we both decided that we will be going along with Vue.js as it is easier to learn than React. I read about the pros and cons of react and vue in this medium article. It gave me a lot of insights about the difference between react and vue and which one should one pursue. After deciding about Vue, we discussed this with our senior and he was onboard with our decision. On saturday, We documented all of our week's work and that maked the end of my week 3 at Pudle!
Getting started with Vue.js. I read the documentation of Vue.js on Sunday and saw some videos which cleared my basics regarding this framework. After gaining some insights about this framework, I started to work in Vue and started implementing Leaflet.js in it. On Monday, I was able to add Map into our website and all the functions that we needed in future. I used Algolia Places API to implement places searching function in our website. I found this API better than the Geocoder of Mapbox and not as good as Google Places API but considering the price difference between the both, this was the best option for us. We discussed and agreed on this part. On Tuesday, We met with our technical advisor Piyush Gururani. He helped us in solving some of the problems that we were facing and later in a meeting he advised us to first complete the UI part of the application and then focus on connecting the backend to it. So we agreed with that and started working on the UI part. I took the job to complete the UI of the Personal details and family details form and the Center Details page in the website. We compared some of the Vue.js Front-end frameworks by reading the article Choosing the right Front end framework for your Vue app. We decided to go along with Bootstrap vue as I gave us the ability to customize according to our needs. For the next 3 days, I was working on the Front end development of the page. Some of the codes that helped me to get started with Bootstrap vue were:
### Installation using NPM(Considering Vue CLI is installed otherwise install vue too)
`npm install vue-bootstrap bootstrap`
### Importing in Main.js
`import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
Vue.use(BootstrapVue)`
More details can be found at this. All the components are easily customizable according to our needs and very less problems are faced if used correctly. Also, If unable to use it or customize it, we can easily customise the input fields or buttons of the Vue.js libraries without facing mucn problem. That was all for this week.