Forem: Shad Mirza

MongoDB Simplified Part 2: How to Setup?

Shad Mirza — Fri, 14 Aug 2020 03:46:46 +0000

Hello amazing people, we are back with Part 2 of the MongoDB Simplified series. In the last article, we learned about MongoDB and NoSQL in general, now it's time to set up and get it running on our machine. Let's start!

Step 1: Download and install MongoDB locally

We are going to download the Community Server from MongoDb website. This is the free version that lets us test stuff on our machine.

Head over to download page for Community Server and select your operating system. Hit download and install to the default location when the download is finished.

For Mac user: You will extract the file from .tgz package and paste it to your preferred location inside the mongodb directory.

Step 2: Setup Environment variable

Once your install is finished, you will see the "mongodb" directory which will contain a bin folder with a bunch of other files.

This bin folder is important and we will use the files inside to execute various operations like connecting to MongoDB server, importing data, etc.

Open the terminal on Mac or command prompt on windows and type mongod. This command is used to connect to the MongoDB server. You might see a command not found error which means our machine can't find the file it needs to connect to MongoDB server. 😓

Remember we just talked about the mighty bin folder which has the files needed to connect to MongoDB server. We just need to tell our machine about that location.

To add PATH to that bin folder in Windows:

Go to the bin folder inside "Program Files" and copy the path to mongod file.
Go to "Edit environment variables" settings either by searching or right-clicking on My Computer.
Choose the "Path" variable and add a new entry with the location you just copied

To add PATH to that bin folder on a Mac:

Go to the bin folder and copy the path to mongod file by clicking "Get info"
Go to user folder and search for .bash_profile
Edit it and paste this line at the end: export PATH=YOUR_COPIED_PATH:$PATH

Make sure to replace YOUR_COPIED_PATH with the location of your bin folder. It will look something like this: export PATH=/Users/shad/development/mongodb/bin:$PATH

Once you're done, close the terminal and start again. Type mongo --version and you should be able to see the version. 🎉

Step 3: Setup MongoDB "data" directory

We need a place to store data and for that, we need to create a data folder.

Create a data folder at your preferred location.
Copy path to that location (we have to tell MongoDB about its location).
Open terminal and type mongodb --dbpath "/data/db".

Make sure you type your path. For me, it's "/data/db".

That's it 🎉. I hope you successfully finished the setup and able to get it running.

In the next article, we will build a TODO application with Node and MongoDB from scratch (no prior knowledge needed -- I will explain everything from the very basics). Stay tuned for Part 3 of MongoDB Simplified and take care.

Shad

MongoDB Simplified Part 1: What, Why and How?

Shad Mirza — Fri, 14 Aug 2020 03:44:48 +0000

This is the first article of series MongoDB Simplified which will cover all the basics of MongoDB. I will try to keep things as simple as possible.

We will start from understanding What is MongoDB?, How does it work?, Pros and Cons?, How to set up on your machine going all the way to learning how to perform basic CRUD operations. CRUD is short for Create, Read, Update and Delete if you're wondering. So let's start.

What is MongoDB?

MongoDB is a database that is based on document model. It is a non-relational type database.

Now, what are relational and non-relational databases? 🤔

Assume RDBMS (Relational Database Management System) like an "Excel Sheet" with Rows and Columns to save data in the form of tables. This table will have a unique ID to identify each row and where multiple fields are distributed along the column. These types of databases usually have relationships between them, hence the name "Relational Database" 💡.

Whereas MongoDB (DBMS) saves data in JSON-like documents inside a collection having no relationships with other documents hence they are called "Non-Relationship Database" types. Example of JSON like object is shown below 👇🏼:

{
    "id": "123",
    "name": "Shad Mirza",
    "hobbies": "Coding, Art, Writing"
}

How does it work?

A record in MongoDB is a document. Now, what's a document? 🤔

A document is a data structure composed of field and value pairs. A MongoDB document is similar to JSON object (see above example) but uses a variant called BSON (Binary JSON) that accommodates more data types. These documents are inserted separately which are unaware of other documents. (Non-Relational type, remember?)

It means that records are not restricted to have the same number of columns (which is a must in RDBMS).

Example: A collection of Employees can have multiple documents of each employee with a different number of key-value pairs i.e. one employee can have one phone number while other can have two phone numbers and that is totally fine.

{
    "id": "101",
    "name": "Ramesh",
    "personalNumber": "9123456789"
},
{
    "id": "102",
    "name": "Suresh",
    "personalNumber": "9123456788",
    "workNumber": "8123456789",
}

Now suppose we are using a relational database, then we are bound to use the same number of columns for each data.

What it means in the current example is that we would have to add a workNumber column for all the employees regardless of whether they need this field or not. This will result in "Ramesh" having an empty value in workNumber column 😓.

Without the restrictions of columns, the developer can add documents however they need without worrying that a little change will break everything 🤩.

MongoDB allows you to structure data in a way that is efficient for computers to process and easily readable for humans providing a natural way of storing and processing data across the application.

MongoDB is a distributed database, which means it provides three fundamental features that developers have to implement themselves otherwise. That's why it is so loved by the developer's community. Those 3 features are:

Fault tolerance: This allows MongoDB to have multiple copies of data, so if somehow one server fails, you will have the other one to serve the data. Single server failure doesn't affect the application as you always have multiple copies in which you can rely on. It uses a single master architecture for data consistency, with secondary databases that maintain copies of the primary database.
Scalability: MongoDB scales across multiple servers to store and process data. So, you can just add more servers as the data volumes and performance grows instead of upgrading the mainframe.
Data availability: You can move data across the globe where you have the requirement for faster processing.

Understand NoSQL and SQL

Countless wars ⚔️ have been fought over debating SQL vs NoSQL and answer still stays the same, "It depends on ".

Let's get to the basics. What's the dedicated purpose of a database? 🤔

"Storing Data" right?. Now in this context, let's understand what are the differences between SQL & NoSQL database and how they store data.

SQL

Structure: SQL stores data in tables which contains rows and columns. It is well structured and as SQL is Relational Database, it usually has some relations between different tables (Primary Key, Foreign Key, etc).
Speed: Because of these relations and * well-defined* structure, SQL avoids data duplication and is relatively faster for joins, queries, updates, etc. Sounds good right? But wait...
Flexibility: This also means that you need to plan the structure ahead of time and any changes to that will difficult (relations remember? tables are connected. You can't simply change one and not take care of the other side).
Big Data: Since the changes need to be applied at various places and the data is broken into various logical tables (we will see how in a minute). It requires performing a various read operations on multiple tables to get what we want. Big Data requires data READ and WRITE queries to be fastest, hence SQL might not a better choice for that. Although you can use SQL databases for a large scale deployment because...
Community: SQL is a mature technology, it's been there for ages and there are many experienced developers who understand it very well. This means that there is great support available and you will definitely find help if you get stuck somewhere and you can easily find a lot of independent consultants who can help with the deployment of large scale SQL databases.
Scalability: In almost all situations SQL databases are vertically scalable. This means that you can increase the load on a single server by increasing things like RAM, CPU, or SSD. It s robust and it has proven that it can handle possibly anything. It follows ACID properties (Atomicity, Consistency, Isolation, and Durability).

Example

Employee Table:

employee_id	employee_name	number	work_number	address
1	Shad	9988776655	9876543210	121
2	Vamsi	8877665544	null	122
3	Girish	7766554433	null	123

Address Table:

address_id	city	country	pincode
121	Varanasi	India	221000
122	Delhi	India	212345
123	Hubli	India	564635

🧐 Few things to notice in this example:

The two tables are interconnected with the FOREIGN KEY in the address column. This key can be used as id to reference the address table.
SQL follows a certain structure, hence the column work_number is required whether we need it (for a particular row) or not (look at the null value for the second and third-row).
To read the information about an employee, we have to query the employee table and then address table or we have to JOIN these two first and the get the data.

NoSQL

Structure: NoSQL stores data in a document-based model inside JSON like objects which contain key-value pairs. There is no standard schema definition for NoSQL databases and the collections don't have relations between them. You can add chunks of data together without splitting them.
Speed: Because of this, you can insert and retrieve all the data at once. Also, NoSQL databases are specifically designed for unstructured data. A particular data entity is stored together and not partitioned. So performing read or write operations on a single data entity is faster for NoSQL databases as compared to SQL databases.
Flexibility: Dynamic schema enables MySQL databases to change as the user wants. They are not connected and hence you don't need to worry about breaking things whenever to want to add something new.
Big Data: Since the schema is flexible and READ-WRITE queries are much faster, NoSQL suits best for Big Data application.
Community: NoSQL is comparatively new and support is not as rich as SQL but it's growing at a rapid rate. Also, only limited outside experts are available for setting up and deploying large scale NoSQL deployments.
Scalability: NoSQL databases are horizontally scalable. This means that more traffic can be handled by adding more servers. NoSQL database follows the Brewers CAP theorem (Consistency, Availability, and Partition tolerance) but ACID properties have also been introduced in the recent version.

Example

{
    "_id": "1",
    "employeeName": "Shad",
    "number": "9988776655",
    "workNumber": "9876543210",
    "address": {
        "city": "Varanasi",
        "country": "India",
        "pincode": "221000"
    },
},
{
    "_id": "2",
    "employeeName": "Vamsi",
    "number": "8877665544",
    "address": {
        "city": "Delhi",
        "country": "India",
        "pincode": "212345"
    },
},
{
    "_id": "3",
    "employeeName": "Girish",
    "number": "7766554433",
    "address": {
        "city": "hubli",
        "country": "India",
        "pincode": "564635"
    },
    "techStack": [
        {
            "_id": "565",
            "tech": "React",
            "experience": "3 Years",
        },
        {
            "_id": "867",
            "tech": "MobX",
            "experience": "2 Years",
        },
    ]
},

🧐 Few things to notice in this example:

There is no relationship between different objects in a collection. We can start adding new key-value pairs as we want. (On adding a new column in SQL, we have to deal with all the rows previously added, they will be assigned null values for the new field added).
The collection doesn't need to contain a specific number of values. We don't need workNumber in the second and third object so we don't save it at all, no null values.
We are eventually going to need all the user info at once (including address) and we can easily get it in a single API call by saving them together.
Having a JSON like an object allows us to store complex structure without worrying too much. See the last record where we are storing "techStack" in an array of objects 😵. This kind of flexibility comes very handy when you're trying to prototype something really quick.

Pros and Cons

MongoDB is not a replacement of Relational Database, it's an alternative. Both have their advantages and disadvantages and we must know when to use what.

This is the time where we clear that It depends debate. Let's go through the pros and cons to understand this better.

Pros 🥳

Data is stored in a single blob of a JSON object. Insertion and retrieval is easy.
No need to store NULL values: Every JSON object is independent.
Flexible Schema: Consider a scenario where you want to add one more column in Person table. Adding new data in SQL database requires some changes to be made like backfilling data, altering schemas. It means that all the already inserted values will get affected too. But in case of NoSQL, new data can be easily inserted as it does not require any prior steps. The older collection doesn't know about the next JSON object so you can start adding new fields right away.
Built for scale: NoSQL databases properly follow Brewers CAP theorem (Consistency, Availability, and Partition tolerance).
Built for aggregation: We can collect intelligent data like average salary, maximum age, etc.

Cons 😓

Not a good choice if you have a lot of updates to perform (for example DELETE followed by INSERT).
NoSQL is built for scalability, it means you can store a lot of data efficiently but it is not built for complex queries. Ofcourse you can use NoSQL for heavy transactional purpose. However, it is not the best fit for this. (MongoDB has released it's new version 4.2.0 recently which promises secure transactions so this point might get excluded in future, let's see how it goes.)
JOINS are harder to perform. If you want matching data from two different collection then you have to manually merge and retreive the data. Whereas SQl (because of relationship between tables) provide inbuilt support for JOINS.
SQL is an aged technology, it means that it is trusted, has been used in lot of scenarios and it has a huge community support. You will most probably find a solution if you get stuck somewhere whereas NoSQL is comparatively young.

That's it for this article and I hope it was helpful. In the next part, we will learn how to setup MongoDB on our machine and start using it. Until then, take care 👋, wear mask and happy coding. 😋

Shad

How I set up Notion for Productive Sanity

Shad Mirza — Sun, 26 Apr 2020 08:09:59 +0000

Hey everyone, today I'm going to give a walkthrough of how I set up my Notion workspace and organize my ideas. It will be a step-by-step guide and I hope this helps you. Let's start with a question.

What do you want?

I would suggest you sit down, take a pen & paper and write exactly what you need. These will be the things that you want to organize. There are tons of customization possible with the Notion and it's one of the reasons that makes it so overwhelming. Having a list of requirements will help you narrow down the structure. Always remember, If something works for you, it's the right thing.

Overview

Our Notion workspace will have a homepage that serves as a roadmap for all the pages inside. It will contain sections of different schemes which will consist of one or more pages each. So, this is what we are gonna organize:

Home Page
Ideas Section
Productivity Section
Project Section
Learning Path Section
Using Relations in Databases

These sections will vary upon your needs so you don't have to add everything I'm listing here. Let's start with Home Page.

1. Home Page Setup

This is pretty straight forward. We are just laying the ground for all of our important stuff. Follow the steps below:

Create a new workspace
Start without a template.
Delete everything on the page
Rename your page as per your preference, add a nice icon and a background. It will look something like this now.

This is going to be the container for everything we want to add.

2. Ideas Section Setup

Press the "+" button. Select Heading 2 from the options that appear. We are going to divide our Home Page into small sections.

After adding a heading, go to the next line and add a page.
I arrange my ideas on a Kanban board and move them to different stages as I progress. Go ahead, select Board from Database section. Here is the outcome:

I'll do the same thing for Talk ideas, Drawing ideas, and Generic ideas. Time for a trick: Create Duplicate is your friend.
Click on the right-most three dots on your page and select Duplicate.

This will create an exactly similar page. When the page is created, edit title, icon, cover, and remove the irrelevant cards and you are done. Repeat this for all the ideas you want to manage, here is the outcome:

Tip: Add icon and cover to make things pretty. I have moved No status view to end. I'll add items in Not started section and move those cards to Completed as I proceed.

Let's move on to the next section.

3. Productivity Section Setup

Go to the next line, add H2 heading Productivity and rearrange the position according to your choice

My productivity section has 2 pages

Daily Tasks
Habit Tracker

1. Daily Tasks

Add a new page in the productivity section.
Select Calendar from Database and add the title, icon, and cover. It will look something like this:

Click on "New" and select "+ New template". This will create a template that we can use each time we add a task to a new day.

I've created my template something like this, you can customize based on your preference.

Go back and click on "New" when you're done creating the template. You will see your template below. It will auto-populate everything for you which you can edit.

2. Habit tracker

Add a new page in the productivity section.
Click on the Template and browse the template gallery. You will find a Habit Tracker template which you can import by clicking Duplicate.

Here is the link to the template I'm using.

Our desk progress so far:

4. Project Section Setup

This is similar to how we created the "Ideas" section. Just create a new "Project" heading and add the page below. I will be using Boards, feel free to experiment, and see what suits you.

It will be a good idea to add separate pages for separate projects.

5. Learning Path Setup

When I'm learning something, I list out the things that I need to cover and create a todo list. This list will be in the order that I'm going to visit them. Our Board database can come handy in such use-cases.

6. Using Relations in Databases

We are using Databases here, and just like our relational databases, these pages can also have relations among them. You can refer to a different page inside a page. Go to Add property and select Relation inside the Advanced section.

When this is useful?

Suppose you're working for a bunch of clients and you have a database with there names and other important info. Let's name this database Clients. Let's say you have another page Project Name and you want to refer the client inside this project management page. You can easily do this by using Relation property of notion. Similarly, multiple columns can be connected to different pages. It becomes pretty handy if you know how to use it. 😉

Read this article for a detailed walkthrough.

I hope this is enough to get you started. You can explore the template gallery to see what's useful for you. There is no right or wrong here. What works for you is perfect so choose your preference and organize stuff.
This is how my complete setup looks:

Introducing React Native Design System (RNDS) 🎉🎉

Shad Mirza — Thu, 06 Feb 2020 08:53:58 +0000

Hey guys, I have been working on a library for a while now. It's a Design System around React Native and this blog answers some of the common questions that you might stumble while going through the repo. So let's start 😁.

What is RNDS 🧐?

RNDS in short for React Native Design System. It's a set of component library and design rules that lets you build React Native apps faster. It's documented, tested in production and works on Android, iOS and Web. Visit this link for documentation.

Why bother?

This title seems a little better than a generic title Motivation. So Why bother to create a library?

I was working on different projects and copy-pasting components I built over this past year.
I thought (like most devs) that it will be a good idea to make a package out of it and import it in any project.

I did exactly that! I wanted something to prototype faster and it was a perfect solution.

At first, I decided to add a bunch of props which is common across all the components to have a low API surface area because seriously Who wants to remember a lot of props to use a component library?

I tried making it close to React Native itself so that I don't have to learn anything new. My goal was to create something that lets you get started in 10 minutes or less. (which is not that easy, I realized later 😅). I'm gonna go through my approach in the next section as Failures because that's where the magic happens.

Failures and Learnings

I will discuss my failures and what I learned while making this. Most of the things are pretty common if you're familiar with design systems but I had to learn the hard way. I was solving my own problems.

API

I wanted flexibility, freedom to create any component real quick so I added a bunch of props like size, color initially.

Size prop was supposed to take an integer value like size={17}. There was some calculation involved to create a component of an appropriate size but possibilities were endless. I can basically create a component from size say 10 to say 100. I just had to try a bunch of numbers and see what fits.

color was supposed to take a hex code of color and it will be the color of a component say Button. When you're working on a project, all you get is a color and it's easy to pass like that. So what failed?

If you're experienced dev, you might have already guessed what an idiot I am but hear me out. The problem was With too much freedom comes too much inconsistency.

I provided size and color to each usage of say Button in a project and it's difficult to maintain consistency when there are so many options available. size={16} and size={17} looks almost similar but are not. This was a big failure in terms of pixel-perfect design.

The second problem was passing the hex code to color prop. There aren't a lot of buttons when it comes to a real app. It means I was passing one single color to each and every button for no reason 😑.

The solution was using a tokenized system of configuration and restricting the possibilities to a bare minimum which covers most of the cases.

The key is to find the balance between Freedom and Consistency.

Customization and Consistency

So as we talked above, the solution for inconsistency was defining all the component-specific configurations in a single file. It solved one more problem than it was supposed. Now, with everything in one place, it was much easier to customize components.
Suppose, I got 7 sizes of buttons as follows:

theme = {
  buttonSize: {
    'xxsmall': 8,
    'xsmall': 10,
    'small': 12,
    'medium': 14,
    'large': 16,
    'xlarge': 18,
    'xxlarge': 20,
  },
  ...
}

It means I can simply do this to assign a different size according to my requirements:

theme.buttonSize.medium = 15;

This also helps in making things consistent. There can be 7 different sizes of components and I feel that's enough. Any more than that will just introduce ambiguity. You can always modify things (or add more) in the theme file. This also works well for colors. Suppose, we have initially defined colors in theme file is as follows:

theme = {
  brandColor: {
    'primary': '#1e88e5',
    'secondary': '#f9a825',
    'tertiary': '#e53935',
    'background': '#f8f8f8',
    ...
  },
}

You can easily change primary (or any) brand color as:

theme.brandColor.primary = '#aeea00';

Sweet! Let's move on.

Design Language

Everything is interlinked with one another. Solving the first and second problems solved a third problem which I had no idea.

Communication was a problem with the earlier approach of size and color. You need to tell the exact (number of) sizes and (string) Hex code if you want someone to create a button for you. Token-based theme and restricting sizes eliminated this issue as well.

You just have to say that "Hey, can you create a medium size button with a primary color?" That's it. It favors better communication and avoids confusion.

Design Rules

Prototyping an app is much more than just dropping components on a screen. Space matters a lot more than actual components when you're working on the frontend. Managing space on each component was my first approach but it was difficult.

I added a few separate components which take care of space only. These are Layout components like Stack, Inline, Box and Card. Their sole purpose is to provide spacing to their children. You can go to the playground of Stack in the documentation for a live demo.

All the other components like Button, Badge, etc have 0 margins.

This separates the concerns in two:

A normal component should worry about only one thing: rendering a component of appropriate size.
A layout component should worry only about providing space to the component.

There are a bunch of other rules that will be discussed later in these articles (Also available on docs).

Layout components are inspired/stolen from Braid Design System 🙈

Documentation

What good is a library if you don't know how to use it. A design system at its minimum is the sum of Design Library + Design Rules + Documentation and it is supposed to boost your productivity. Which is certainly not possible if you waste your time figuring out how to use a component.

After creating the whole library, I instantly googled "How to document your library like a pro" and decided to use React DocGen. I wrote half the documentation but it wasn't working out well so I decided to go with Docz. It's really good and I re-wrote the whole documentation for Docz but...

Then I went to a Design System Meetup organized by JSLovers and someone suggested to use StoryBook instead. It was perfect and exactly what I needed. It's an interactive playground not only helps you explore the components but also enables to create them in isolation a lot faster. With StoryBook, you don't even have to have to read the whole documentation. Just playing with the component in the playground is enough.

So, for the third, I decided to rewrite the whole documentation with StoryBook in MDX and that's the final version that you will see at rnds.netlify.com.

There were other complications/hurdles on using MDX with React Native but I won't go in that much detail.

Logo

After working so hard, all I wanted was it to be perfect and look at what I created at first 😂 👇

First thought, definitely not good 😣. So, after much thinking I created these, thanks to my photoshop skills:

Looks good but I can do better. So this is the final version after giving a hell lot of thoughts 👇.

This looks pretty satisfying and states my thoughts on why I created this too.

So these were a few of my failures while working on this. I learned a lot of things from webpack configs to compound components and a lot that I can't cover in this article. I know there are other great libraries available like NativeBase and React Native Element but I was just trying to solve my own problems and this is the result of going through a lot of iteration.

Sanket Sahu and Nader Debit have done a great job on the libraries mentioned above. The name React Native Design System was suggested by Nader himself and I'm thankful to him for helping me in building this.

Design Rules

This section is the core of this library and I have spent most of my time iterating this to make it better. It's not much but it's honest work.

It is based on the four key aspects that I considered while creating this.

Feel free to send a PR for corrections, these are personal opinion and I'm here to learn. 😅

1. Low surface area

Most of the props are common across all components or they are the same as their parent component imported from React Native. This makes sure that you do not have to learn a whole set of extra props or just use what you already know.

For example:

If it's a Button, it receives all the props of Touchable component of React Native.
If it's a Modal, it receives all the props of Modal.
Each component receives a size prop whose value can be one of these: xxsmall, xsmall, small, medium, large, xlarge & xxlarge. You just have to pass size prop with one of these value and you're done.
Another example could be color prop. You can pass one of the colors defined in brandColor of the theme to any component.
If it's a layout based component like Box, Stack, Inline or our best friend Card then it receives a space prop. This also takes one of the values between xxsmall and xxlarge (with the addition of space="none") and provide appropriate spacing between components.
Each component receives a style and a textStyle prop (if there is a text involved). This is for some rare cases when you have to override the default styling. It's preferable to tweak the theme instead to maintain consistency and avoid adding that style again and again.

These props are common to all the components. Other component-specific props are pretty straight forward too.

2. Speed

For most of the cases, default styles like size={medium} or space={medium} will be enough. In other cases, it's just two to three props max to achieve any desired result. This makes it faster to prototype. The layout components make it easier to achieve the desired screen layout with space props. See the playground in Stack documentation.

One of the key aspects of pixel-perfect design is the spacing between components. This design system proposes two things:

Every UI component has a margin of 0.
The spacing of any component will be determined by its parent Layout component.

The separation of concerns makes the job easier. Layout component should take care of space only and UI component should worry about UI only i.e., color or size.

3. Consistency

The correct balance of freedom and consistency is hard to achieve.

For freedom, you get straight forward props like color and size.
For consistency, you need to define these configurations inside theme file i.e Single source of truth.

It helps in maintaining uniformity across all the usage. It also allows you to have several choices and use them as needed. Check out the theme section of this guide for the default configuration.

4. Connection

Big problems are always more manageable when broken into smaller pieces. The design language of the system is broken down into color, typography, size, and space. These API is followed by each component.

Color

There are basically two types of colors:

brandColor: "primary", "secondary", "tertiary", "background", "disabled", "semitransparent".
textColor: "default", "heading", "grey", "subtle", "disabled", and "white"

Typography

To keep things simple and consistent. There are two choices for fonts to use:

heading
text

Size

The available sizes you can use is "xxsmall", "xsmall", "small", "medium", "large", "xlarge" and "xxlarge". The default is "medium" and it will be applied if are not passing anything.
Font size is also similar and it ranges from "xxsmall" to "xxlarge".

Space

Space also shares similar API as size but with one addition. You can also pass "none" with the range of "xxsmall" to "xxlarge". Space is a dedicated prop for layout components like Stack, Inline, Box and Card.

You can contribute to the theme. Please share what are the common color tokens you use, what are the common font sizes that you use in any app, etc. Let's make the theme config more generic together.

Getting Started

Install

Simply go to the command line and run this command.

yarn add react-native-design-system

You can use yarn or npm as per your choice.

npm install react-native-design-system

This library needs react-native-vector-icons so go on and install that too to get all the cool icons. Check out Install guide.

Usage

Step 1. Import `ThemeProvider` and `theme` then wrap your root component.

This step is important. We are passing theme as context value that each component will access.

//your root component
import { ThemeProvider, theme } from 'react-native-design-system';

function App(){
  return (
    <ThemeProvider value={theme}>
      <Root />
    </ThemeProvider>
  );
}

Step 2. Use component.

//inside any file
import { Button } from 'react-native-design-system';

function HomeScreen(){
  return (
    <Button>
      Press Me
    </Button>
  );
}

Visit this for more info.

Reference:

Thanks to each person who helped me feedbacks. Other than that, these were talks and article which helped:

If this feels interesting, please drop a star on the repo. Click on this link.

Contributions are most welcome, you can reach here to read contribution guidelines.

Learn React Native Animation by building Circular Progress Bar

Shad Mirza — Tue, 03 Dec 2019 13:31:24 +0000

Today, we are going to build a circular progress bar using Animated library of react native with the help of three semicircles. Let's understand the concept first then we will dive into coding.

Concept

We have a base outer circle that serves as a container for the other three semicircles. We will rotate these semicircles with transform property to achieve the desired result.

How do three circles work?

Their working depends on the value of progress. It can either be less than or greater than 50. Let's see the two possible cases:

Case 1. If progress percentage < 50

1. First Circle

The first circle (purple) is initialized with a rotation of 180 degrees and completely covers the right portion of the outer base circle (grey).

2. Second Circle

The second circle is rendered on top of the first circle (purple) with the same rotation and backgroundColor equal to the outer base circle (grey). It makes the first circle disappear as grey color completely overshadows the inner purple circle.

I have reduced the opacity of the upper (grey) circle to show what's happening.

When the user clicks to animate, we are rotating the upper (grey) circle which is slowly revealing the inner (purple) circle from behind.

Note: Inner circle (purple) is not moving at all. We are rotating the upper circle (semi-transparent here) to show the inner circle from behind.

3. Third Circle

The third semicircle is initialed with 0-degree rotation thus covers the left half of the base outer circle. Its background color is grey (same as the base circle).

Remember, the second circle (grey on right) is moving clockwise and taking some of the left halves of the outer circle. It looks something like this:

Hence, the third (left grey) circle has a higher elevation which enables it to overlap the extra portion of the second circle on the left side.

Case 2. If progress percentage > 50

Initially, all three semicircles are initialed with 0-degree rotation and cover the left half of the outer base circle (grey). The first circle is at the bottom then second on top it and third on top of second as it has the highest elevation. This leaves the right half of the base circle empty.

1. First Circle

Both first and second circles (both purple at left) will slowly rotate to cover the right half from 0 to 180 degrees together. This covers the animation to 50%.

Now first circle stops and second circle takes over to complete the remaining rotation.

2. Second circle

The first circle's job is to take up to 50% of progress and then the second circle will rotate some more to cover the remaining percentage.
I have made the second circle semi-transparent to show you how it's working. (the third circle is removed for simplicity). This is typically the case for percent={70}:

So 50% area covered by first circle and 20% area covered by the second circle adds up to complete the animation. But wait, what about the third circle? It is still on top of the second one and we can't see the second circle which is behind. Let's see what our third circle is doing.

3. Third circle.

We will rotate the third and second circle for the same degrees clockwise (extra 20% in the current example). It will leave space so that the second circle becomes visible. To show clearly, the third circle is yellow right now and first & second are removed.

Do you see the problem here? As our third circle rotates clockwise, it takes some portion of the right half and overlays the first circle (third has higher elevation, remember?).

The solution is simple and you might have guessed it already. Toggle the elevation value so the third circle goes inside the first circle.

First Circle is semi-transparent right now so you can see how the third (yellow) circle is going behind the first one (semitransparent). After toggling elevation:

I hope it is clear what's happening. Let's correct the colors and see our final animation!

Looks good, isn't it? Let's add a smaller inner circle so our view can start looking more like a progress bar.

Inner circle

A smaller inner circle goes on top of everything creating an appearance of a progress bar.

Let's code

There are 5 steps involved:

Render base circle
Initialize default animation values
Render three semicircles
Add animation to semicircles.
Render inner circle

Step 1: Render base circle

Render the base container circle with a grey color background. It is going to contain the other three semicircles.

<View
  style={[
    styles.outerCircle,
    {
      height: radius * 2,
      width: radius * 2,
      borderRadius: radius,
      backgroundColor: passiveColor, //grey color
    },
  ]}
/>

Step 2: Initialize default animation values

Initialize default values for all the three semicircles.

//for first and second circle
const initialValueHalfCircle = percent >= 50 ? 0 : 180;

//for third circle
const initialValueInnerCircle = 0;

//initialize animated values to interpolate over degree of rotation
const firstCircleAnimatedValue = new Animated.Value(initialValueHalfCircle);
const secondCircleAnimatedValue = new Animated.Value(initialValueHalfCircle);
const thirdCircleAnimatedValue = new Animated.Value(initialValueInnerCircle);

//initialize time for rotation
const timePerDegree = duration / 360;

//first circle is always purple
const firstCircleColor = activeColor;

//for first case: second circle was overlapping with grey background when progress < 50 
//for second case: it was completing the animation after 50% with active purple color
const secondCircleColor = percent >= 50 ? activeColor : passiveColor;

Step 3: Render three semicircles

We are going to render three semicircles, so let's write a helper function to make our job easier.

const renderHalf = (color, transforms = [], otherStyles = {}) => (
    <Animated.View
      style={[
        styles.half,
        { backgroundColor: color, borderColor: color },
        { width: radius, height: radius * 2, borderRadius: radius },
        {
          transform: [
            { translateX: radius / 2 },
            ...transforms,
            { translateX: -radius / 2 },
            { scale: 1.004 },
          ],
        },
        otherStyles,
      ]}
    >
    //children
    </Animated.View>
  );

It takes a color prop and a transform prop to rotate the semicircles clockwise. Let's not worry about the logic right now and call this function to render our first semicircle.

{renderHalf(firstCircleColor, [{ rotate: rotate1 }])}

Note: firstCircleColor is activeColor (purple) in both cases.

It's receiving rotate1 value which is interpolation of animated value we initialised in previous step. It simply maps 1 integer value to 1 degree:

const rotate1 = animatedValue1.interpolate({
    inputRange: [0, 1],
    outputRange: ['0deg', '1deg'],
  });

Similarly for second circle:

{renderHalf(secondCircleColor, [{ rotate: rotate2 }])}

Note: secondCircleColor is passiveColor (grey) in first case (<50) and activeColor (purple) in second case (>50).

Its rotation value can be interpolated with secondCircleAnimatedValue we initialized earlier.

const rotate2 = secondCircleAnimatedValue.interpolate({
    inputRange: [0, 1],
    outputRange: ['0deg', '1deg'],
  });

Our third color is grey (passiveColor) in both the cases and receives a rotation value. Also, in second case (>50), we are toggling elavation value as described earlier. renderHalf for this use case can be:

{renderHalf(passiveColor, [{ rotate: rotate3 }], {
  elevation: elevation3,
})}

rotate3 and elevation3 values can be interpolated as:

const rotate3 = thirdCircleAnimatedValue.interpolate({
    inputRange: [0, 1],
    outputRange: ['0deg', '1deg'],
  });

  const elevation3 = thirdCircleAnimatedValue.interpolate({
    inputRange: [0, 1],
    outputRange: [0, -1],
  });

Elevation toggle logic: the third circle is only rotating in the second case from left half to right half. As soon as it starts moving, it takes up some portion of the right half and that's exactly when we want to toggle elevation.

Step 4: Add animation to semicircles.

Now we will write animation function for both cases. We want to start animating whenever we receive a new percent value. We can use a simple useEffect hook for this purpose:

useEffect(() => {
  if (percent < 50) {
    firstAnimation();  //first case (<50)
  } else {
    secondAnimation(); //second case (>50)
  }
  });

Above function simply chooses the animation to execute based on value of percent. Let's write our animation function for first-case (<50):

const firstAnimation = () => {
  Animated.timing(secondCircleAnimatedValue, {
    toValue: 180 + (percent * 3.6),
    duration: (percent * 3.6) * timePerDegree,
    useNativeDriver: true,
    easing: Easing.linear,
  }).start();
};

percent * 3.6 is just to convert percentage to degrees. This function will animate second circle (grey) in clockwise direction to reveal first circle (purple) from behind. Now, let's see animation for our second-case (>50):

const secondAnimation = () => {
    //resetting first circle to 0 degrees
    firstCircleAnimatedValue.setValue(initialValueHalfCircle);

    Animated.parallel([
      //first circle will rotate upto 180 degrees for 50% of progress
      Animated.timing(firstCircleAnimatedValue, {
        toValue: 180,
        duration: 180 * timePerDegree,
        useNativeDriver: true,
        easing: Easing.linear,
      }),
      //second circle is rotating along with first and some more to extra progress after 50%
      Animated.timing(secondCircleAnimatedValue, {
        toValue: 180 + (percent - 50) * 3.6,
        duration: (180 + (percent - 50) * 3.6) * timePerDegree,
        useNativeDriver: true,
        easing: Easing.linear,
      }),
      //third circle is moving along with second in clockwise direction for that extra value after 50% progress
      Animated.timing(thirdCircleAnimatedValue, {
        toValue: (percent - 50) * 3.6,
        delay: 180 * timePerDegree,
        duration: timePerDegree * ((percent - 50) * 3.6),
        useNativeDriver: true,
        easing: Easing.linear,
      }),
    ]).start();
  };

That's it, we are done with our animation. Let's add one inner circle to make this look like a progress bar.

Step 5: Render inner circle

//styles for inner circle
const innerCircleStyle = {
  backgroundColor: baseColor,
  width: 2 * radius - width,
  height: 2 * radius - width,
  borderRadius: radius,
  elevation: 1000,
  display: 'flex',
  justifyContent: 'center',
  alignItems: 'center',
};

//Complete view after adding the inner circle
return (
  <View style={styles.container} key={percent}>
    <View
      style={[
        styles.outerCircle,
        {
          height: radius * 2,
          width: radius * 2,
          borderRadius: radius,
          backgroundColor: passiveColor,
        },
      ]}
    >
      {renderHalf(firstCircleColor, [{ rotate: rotate1 }])}
      {renderHalf(secondCircleColor, [{ rotate: rotate2 }])}
      {renderHalf(passiveColor, [{ rotate: rotate3 }], {
        elevation: elevation3,
      })}
      <View style={innerCircleStyle}>
        {children}
      </View>
    </View>
  </View>
  );

And we are done! Click here to view source code used in this tutorial.

I hope you had fun learning animation with react native. Happy coding!

This component was created by Ankeet Maini. For full repo with TypeScript, head over to: https://github.com/ankeetmaini/rn-animation-circular-progress.

Winning Hackathons feat. Aviral Aggarwal

Shad Mirza — Fri, 22 Nov 2019 11:23:48 +0000

Listen to Winning Hackathons feat. Aviral Aggarwal | Episode 5 from Podcast: teawithtanay.com

In episode 5, Aviral Aggarawal, iOS Developer at Microsoft joins Tanay to talk about how he got started with hackathons and why. Aviral calls himself a tech enthusiast who spends a lot of his time exploring tech, hackathons, and conferences. Tanay starts the conversation with his first question.

What's the story of your profile picture with Tim Cook?

Aviral tells us that he has always been curious about Mac and wanted to get his hands on a Macbook in his office. He decided to learn iOS development and got a Macbook from his boss. He got to know about the Apple Worldwide Developers Conference (WWDC) and applied for free scholarship. Aviral started enrolling for WWDC in 2015 but got rejected for two consecutive years. Finally, he got selected to fly to the US in 2017 and luckily got a chance to meet Tim Cook.

WWDC19 Scholarships reward talented students with the opportunity to attend Apple's annual Worldwide Developers Conference, and scholars also get a chance to meet Tim Cook.

Aviral talks about not getting selected three times out of his four attempts and how it helped him to grow in a person he is now. The takeaway is that failures are also a part of the journey, and it nurtures you to grow in a better self. It takes us to the next question of this podcast.

How do you deal with failures?

Aviral talks about various techniques that he uses to get himself motivated.
He shares his goals with other people, it makes him accountable and creates a little pressure on him that he has to do what he said.
The second thing he does is he involves his parents and close friends. They serve as a source of motivation when you start having self-doubts after failure. They know your worth more than you do and will always cheer you up when you're feeling down.
The third piece of advice is to try a lot of stuff. Your chances of success increase with the number of involvement in multiple activities. If you succeed even in one out of ten things then this one success will help you overcome all the other failures.
Aviral was applying for WWDC, Google Summer of Code, and few other events at the same time to improve his chances of getting selected which takes us to our next question.

How do you get to know about these events?

Aviral tells us that networking played an important role here. You should connect with like-minded people. They are usually active in sharing which events they went to or are going to attend.
Join groups like "Hackathon Hackers" where you can get information about ongoing events. Aviral spends a lot of time in these groups that help him find relevant information.

Can you tell us about your Alexa journey?

Aviral tells us about his mentor, who bought him an Alexa device and asked him if he can build a skill for his company. He emphasizes the importance of working on one technology instead of trying out many at once, He says as he has already spent a couple of years in iOS development, so it was a perfect time to try something new. Aviral started investing more time in Alexa and looked at it as one of his side projects, which he always loves to work.

After two months, he decided to go to a hackathon and build one skill onsite. It motivated him to build more skills and get a better understanding of how Alexa works.

He then went on to win goodies and prize money by building skills for Alexa.

What is your Hackathon winning recipe?

When Aviral started going to hackathons four years ago, his main intention was to be there and meet people. He wanted to understand where does he stands and what he needs to learn to get better. If you're a beginner, you should concentrate more on attending and understanding how hackathons work, Aviral says.
It usually serves as a booster for your projects where you work rapidly for two days and iterate over the project later.

Aviral says that it's crucial to understand the purpose of the theme and why this hackathon is happening. There are two types of hackathons in general:

If you are in a "Presentation Hackathon" then you should concentrate more on communicating your idea and your presentation skills.
If you are in a "Technology Hackathon" then what you've built matters more than how you present it.

You should apply to hackathons where you think your idea fits.
Go with an idea planned in your mind and build the project there.
Talk to people and get feedback on how you can make that idea better.

How to choose among the various student programs?

Apply in as many programs as you can and try to be in one. By applying, you will get an idea of how to submit applications to these programs and understand your weak points. It will enable you to compete on a global level.
Some of the programs are listed below:

Microsoft Student Partner
Google Developer Expert
Google Developer Student Group
Google Summer of Code
GirlScript Summer of Code
Facebook Developer Circle
Intel Software Ambassador Program
Linkedin Writer Program
Github Campus Ambassador Program

How did your freelance work start?

Networking played a great role here. When you connect will lots of like-minded people, your chances of getting a good opportunity increases. Aviral got his freelancing gig when someone in his network approached him for help in a project. Freelancing polishes your skills and expands your knowledge base.

What's more important to focus during the hackathon?

Aviral states some points to consider in this context:
Focus on the product and examine if the design or tech is going to help in that particular hackathon.

A working prototype with one core feature is better than adding lots of features. So focus building one complete feature rather lots of addons.

How should a standard team look like?

It depends on how many people you're comfortable with and you should team up with people who are also enthusiastic and interested in the event. A team is as good as the people in it.
The end goal is to build something and be proud of it.

Are hackathons right for average coders?

Aviral says that you should first understand the purpose of a hackathon. It is to bring like-minded people under one roof and encourage them to build something together. Attending these events and meeting people is more important than winning.

The people you network with may also be coming from the same position as you're in and sitting beside them will influence your life and motivate you to level up.

"Don't let the fear of losing be greater than the excitement of winning." --Robert Kiyosaki

Vue.js and Getting Started with Open Source ft. Rahul Kadyan

Shad Mirza — Thu, 14 Nov 2019 14:07:00 +0000

Guest of this episode is Rahul Kadyan, who is a senior software engineer at Myntra and a core contributor to Vue.js. He is also an organizer of VueBLR meetup and AwesomeConf in Bangalore.

Listen to Vue.js and Getting Started with Open Source ft. Rahul Kadyan | Episode 4 from Podcast: teawithtanay.com

Tanay starts the podcast with a little introduction of Vue

Vue is a progressive framework as it progresses with the scale of your application. It is adaptable, easy to pick up, integrate with other libraries or existing projects. It provides a view layer for building reactive applications. Vue’s gentle learning curve steals the hearts of beginners and advanced developers, making it more and more popular with time.

Why is Vue big in China?

Vue originated in China. Since, the creator of Vue.js is Evan You, from China, Chinese tend to give more priority to their product rather than other frameworks backed up by tech giants like Google and Facebook. This makes Vue.js trending in the Chinese Market.

Another reason could be the documentation in the Chinese language. It is written well and said to be the best among all the frameworks.

How did you start with Open Source?

Rahul tells that the Google Summer of Code program served as a stepping stone into the world of Open Source. It's a platform where students contribute to open-source projects and get paid.
During that time at the GSOC program, Rahul worked on several projects on different technology.

The strategy Rahul suggests is to check the error you are getting and try to debug around it. It enabled him to read code and learn from it.

Earlier Rahul used to raise the issue if he finds something broken, then he started fixing it himself and sending PRs. The essential takeaway is to fix the things which you are using.

Why you should contribute to Open Source?

Rahul sees open source as learning opportunities. You get to see different problems every day which could help you with your project as well. Reading code by other developers provides a different perspective to look at a problem. Their approach to solving an issue broadens your knowledge immensely.

How do you read code in a project?

Open Source projects can be too overwhelming with too much information and it gets confusing sometimes to find a starting point. Rahul talks about two basic strategies that he follows:
Search for the error string you are getting and try to understand the code around it. If you are working with a tool, it's best suited to start solving errors you are facing.
The second approach could be finding the entry point of the program. Think like an interpreter, go line by line as the program is likely to run. This approach is helpful if you are exploring any project.

Does one need in-depth knowledge to contribute to a project?

Rahul says that there is no limit to depth. The idea is to contribute to projects which you are learning currently. You should have a basic understanding of the syntax and you are good to go.

How to select an open-source project?

You can use the GitHub search tool to search for labels such as beginners, good first issue, hacktoberfest, etc.

Hacktoberfest is a month-long celebration where you can get goodies for contributing to open-source. During October month, hundreds of projects get tagged with "hacktoberfest" label as beginner-friendly issues, this can be a good entry point.

If you are stuck somewhere, you can discuss your problem with the comment thread GitHub provides on issues.

In open-source, we feel strongly that to really do something well, you have to get a lot of people involved. -Linus Torvalds

Originally published at https://teawithtanay.com on September 26, 2019.

Creating community and scaling it too ft Anubha Maneshwar

Shad Mirza — Wed, 13 Nov 2019 13:04:26 +0000

In episode 3, Anubha Maneshwar, founder of GirlScript project which helps beginners get started with coding, joins Tanay to share her journey of building a community and growing it. In the episode, she talks about how she got started and how she got people excited about her vision for GirlScript.

Listen to Creating a community and scaling it too ft. Anubha Maneshwar | Episode 3 from Podcast: teawithtanay.com

Anubha Maneshwar is the founder of GirlScript, Mozilla Web Group, Dev Rally in Hasura, and has won the Indian Women Leadership Award for Education. Anubha Maneshwar is the winner of 35 Under 35 Awards in Best Startup for Education Category and India’s Top 100 Young Leaders Award.

Anubha and GirlScript

GirlScript right now is in 52 cities of India, in Chicago, China, Africa, and it's about to come to the UK in two years.
GirlScript aims to help beginners learn and get suitable exposure.
Anubha's journey starts from a small college in Nagpur and goes all the way to Google Women Tech Makers in Hyderabad.

She got a chance to attend Google Tech Maker International women's day celebration which made her realize how far the community is lagging. It then led her to become a part of the Mozilla Web Community along with a few other communities as well. After being a part of more than 10 communities she realized that there is a gap she can fill and that's how GirlScript came into existence.

How did you come up with the name GirlScript ?

Anubha talks about an event when she with her classmates were interviewing for a company. When it came to the programming round, others started to step back. That's where she realized that women in tech are taking a set back themselves and they need support.

GirlScript is an organization that provides the needed support to both men and women promoting diversity, equality in tech and therefore the name. To promote equality, 50% of seats are reserved for women bringing an equal ratio of men and women under one roof. Anubha says that a community can't be built by excluding a group or do women-only events.

The idea of "Script" in GirlScript is to write something meaningful as it does by including both men and women in community events and empowering women as well.

The other moto of GirlScript is to support feminism. If a guy doesn't feel bothered working under a women leader and for the name "GirlScript" then that will be the true meaning of feminism and women empowerment, Anubha added.

How did you start this community?

Anubha says that she started with the Mozilla Web Community before starting GirlScript. She added few friends into the Mozilla community and kept building the network.

After two years she decided to start a community and shared her ideology with fellow mates at Mozilla who later joined to organize the first WordPress workshop by GirlScript in Nagpur.

Anubha talks about the importance of a good network and how it helped her at a place where social media and tools like meetup.com were not that popular. After a couple of events, people started contacting her themselves and the community grew as we see it now.

Why did you feel the need for a new community when communities like Mozilla Web Group and Google Tech Maker were already there?

Anubha talks about the gap that she wanted to fill after working with communities like Mozilla and Google.

She says that although these communities are doing well, the problem was less presence in small cities.

The second thing she mentions was the application process. Students are not confident enough to fill the forms and the eligibility criteria are very high. The application process itself is not beginner-friendly.

The third thing was regularity in tech education. A person should get a job if he/she is a part of GirlScript. For example, if you're starting with JavaScript then you study javascript for 6 weeks straight and finish it to the end.

Opportunities for everyone, making sure everyone gets a chance when it comes to getting a scholarship or giving a talk abroad.
There were basic things that were missing apart from programming like email writing, etc. GirlScript works in providing an all-round education.

GirlScript was the first organization to tackle these gaps and start a tech revolution in India which is why the community grew up so fast in so less amount of time.

How do you organize everything and tackle the problems at a scale so big ?

Anubha says that people from small cities don't use or know about apps like Discord or Slack but one thing commonly used by everyone is WhatsApp and that's our main way of communication.
GirlScript uses WhatsApp group for leaders which provides them the information for various chapters and to discuss the problems if they are facing any. These leaders are allowed to use any platform available as suited by the place and members of the event.

It also breaks the stereotype of coolness in the tech world who use slack, meetup.com or other tools that are less common for beginners. The idea is to utilize where most of the presence is.

GirlScript and Summer of Code Internships (GSSOC)

GirlScript includes individual projects as well as projects from NGOs. Anubha says that organizations like these usually struggle to get their website running in limited funds. By including them, students get to contribute to them as well. This helps in solving the tech problems of non-tech communities.

How the agenda of any event or topics to be taught are decided ?

Anubha tells us that the syllabus is not restricted to a particular tech. Chapter leaders usually take a survey to know what do the students in that region want to learn and this changes from time to time. It can be python sessions at one time and JavaScript at another. The curriculum is flexible to the requirements of students and their caliber.

What is your approach for sponsorship ?

The most important thing is transparency. If you manage to showcase that the money invested is being utilized in a good way then companies will be happy to sponsor your cause. Anubha tells us that the companies want to know the use and impact you are making if they are putting their money.

GirlScript also has only two fundraising events in which they charge. Apart from that, everything is free of cost.

What is your appeal to our listeners?

Anubha gives a nice message that "if you see a fellow mate lagging for some reason then you should always try to help." The second thing she mentions is that you can always ask for help if you feel like you're lagging. GirlScript is there to help you and you can reach out to Anubha or GirlScript in case you need any help.

Anubha advises the listener to go to events, interact with other people and learn new things. You should focus on learning mainly and not on materialistic swags, t-shirts, etc.

On ending note, one should always remember that Community means giving back.

Strategy around Hobby Projects ft. Rachit Gulati | Episode 2

Shad Mirza — Wed, 16 Oct 2019 11:07:55 +0000

Listen to Hobby Projects ft. Rachit Gulati | Episode 2 from Podcast: teawithtanay.com

In episode 2, Rachit Gulati from Microsoft joins Tanay to talk about how he got started with hobby projects and how they helped him in cracking interviews. Rachit goes on to explain how one can go about doing hobby projects and benefit from them.
Rachit says that he has a lot of problems that motivate him to work on side projects. He likes going on treks or hanging out with friends when he is not coding.

"Tanay starts the conversation by Rachit's interview experience at Microsoft and how doing hobby projects landed him a job"

Rachit tells us about the time when he was interviewing for Microsoft and one of the rounds didn't go well. But Microsoft decided to give him another chance because of the side projects he has made. This shows how hobby projects enhance the credibility of your profile and provide you a cutting edge in technical interviews.

"Can you tell about your project where you have around 3 lakh students using your product?"

Rachit tells us about his first hobby project, an android application which he made using Eclipse. People were wondering how one can make an app on a notebook with 2GB of RAM and an Intel Atom processor?

I guess things become possible when you're determined to do it.

Rachit's application helps in revising concepts before an interview by providing a list of questions categorized by topics such as database, algorithms or basic computer programming. "The UI of the app is not good but the idea here to complete the project and it should serve a purpose. When you have an idea and you build something, you learn a lot not just on the idea but around the idea too.", Rachit added.

"What would you advise to someone who does not have an idea and wants to build something?"

Rachit talks about multiple ways to get started on projects whether you know programming or not. These are as follows:

The first attempt can be going out and explore. Be vulnerable, get out of your comfort zone and explore the possibilities. Decide if you want to collaborate on something or build something yourself.
If you want to collaborate, you can go to GitHub and search for trending projects that have been launched recently. People are usually looking for active collaborators and that's an opportunity.
You can also search for flags like "myfirstissue" or "beginners" on GitHub for first-time comers.
If you don't know programming then you can contact people and tell them you are interested to work on that project. There are other ways to collaborate like writing documentation, designing the landing page, etc. >The key takeaway here is to Not plan too much and start executing from the very first day.

Everybody has problems that need solving.

Rachit wanted to highlight key points on web pages which enabled him to make a highlighter chrome extension. There were other tools but not exactly what Rachit wanted. The problem that Rachit had was common to many people and this made his product the trending product of the day on Product Hunt.

I have an idea, I know some programming but I can't make a full-stack app. What should be the approach here?

Draft down the basic version of that idea. Simplify it to its minimum and write about it in simple words.
Draw it on paper and examine how it will look.
Choose a tech stack that you either want to learn or you're familiar with then start building just the core functionality only.

Three things that any product need is:-

Feedback form: Know the pros and cons of your product.
Feature request: Know what the user really wants.
Analytics: Know your users better and try to optimize for better user experience.

Tanay adds not to dive into coding at day 1 but first do the research and bake your idea well then make it. And we got our first quote fro the talk- "Bake it then Make it".

What do you think about discovery? When and how to launch a product?

Rachit describes why the time and day of launching an idea is crucial. When you have invested hours on a product, it becomes really important that it reaches as many people as possible.
The key takeaways are: -

Launching a product on a day when there are chances of people being busy is not a good idea. Weekends are supposed to be spent with family or friend so should avoid launching on weekends. Monday is also not a good fit as people just came after a weekend and there is a lot to catch up. Anything between Tuesday to Thursday is a good choice.
Now, optimize the time based on your market and timezone. Try to reach a lot of people. Launch on multiple sites, reach out to people and ask for feedback.
The first version will be the basic features just to learn about the idea and the market. Then you can gather the feedback and start working on the next version to monetize the product and earn from it.

"The first version is to Learn, the second version is to Earn". This marks the second quote from this talk.

Originally published at https://teawithtanay.com on September 12, 2019.

How books shape our life ft. Priyadeep Sinha | Episode 1

Shad Mirza — Tue, 15 Oct 2019 09:15:26 +0000

Listen to How books shape our life ft. Priyadeep Sinha | Episode 1 from Podcast: teawithtanay.com

In episode 1 Priyadeep Sinha, Director at Global Alliance for Mass Entrepreneurship (GAME) joins Tanay to talk about how books can guide as well as provide transformative experiences.

The show begins with Tanay explaining why he has chosen Teacher’s day (5th September) as the day of the launch of his podcast as well as the topic of books for the first episode.

He follows by introducing Priyadeep Sinha as the most well-read person he knows and how Priyadeep has inspired a generation of entrepreneurs in Manipal.

Priyadeep introduces himself and what he is currently involved with. He then shares an exciting story of how he picked up the love for books. In the show, Priyadeep touches upon his favorite books and the main lessons he drew from each one of them.

"Tanay starts the conversation by asking Priyadeep's favorite book."

1. The GodFather by Mario Puzo

Priyadeep describes "The GodFather" as his favorite book of all time. The Godfather is a crime novel written by American author Mario Puzo, detailing the story of a fictional Mafia family based in New York City (and Long Beach, New York), headed by Vito Corleone. The epigraph for The Godfather is, "Behind every great fortune there is a crime. - Balzac." Priyadeep talks about how Vito Corleone, who is actually a mafia ended up doing more good for the society as he took a stand against someone who wanted to bring drugs into his city and denied to let him spoil the city. What really struck Priyadeep with this story is how someone even after being from a mafia background helped people and society. It serves as a purpose of motivation to "try and do more for people."

"What's your favorite books on Startup?", Tanay continues the conversation.

2. Delivering Happiness by Tony Hsieh

The central theme of the book is the business of literally delivering happiness while living a life of passion and purpose. Delivering Happiness (2013) tells the story of Tony Hsieh and his company Zappos, demonstrating how thinking long-term and following your passions can not only lead to profits but also a happy life for your employees, your customers, and yourself. The book describes an alternative approach to the corporate culture that focuses on the simple concept of making people around you happy, and by doing so increase your own happiness. "Delivering happiness describes how Zappos built a complete customer-centric organization and that stayed strongly with me" - Priyadeep said.

3. Hard things about Hard things by Ben Horowitz

The Hard Thing About Hard Things is an inside look at the tough decisions and lonely times all CEOs face, before showing you what it takes to build a great organization and become a world-class leader. Priyadeep tells us how as a startup founder, he went through a lot of hardships and this book stayed as a ray of motivation and confidence in all those times. This book talks about how Ben Horowitz survived through all the hard times. It states that the startup CEOs are "Wartime CEOs" and they have to be focused all the time. It also states how you can't put all the burden on your shoulders alone, and you have to learn to share the burden with more brains to successfully run a company. Few more important lesson that Priyadeep describes how the book describes that "What happens inside you when you're about to sell your company?" and "A good CEO always know when to layoff people and how to talk to them?" which PD himself have experienced in his life earlier.

"What books would you recommend to someone who wants to start a startup?"

4. Hooked by Nir Eyal

Hooked describes how to build a habit-forming product that people want to use. A habit-forming product is a winning product, and the ultimate goal of habit-forming products is to solve a customer's problem (pain) by creating an association, so the customer sees the product as relief or a solution. The book talks about how extrinsic motivation leads you to seek a reward from a product and then extends that reward further. This forms an intrinsic motivation and this spiral continues. "Every product that has scaled to extremely large numbers has been able to do that and create a rewarding experience,'' Priyadeep added.
"Not all entrepreneurs come with a large amount of Intrinsic Motivation, there is some of it but it needs an unlocking mechanism and you need and Extrinsic Motivation to do that." - Priyadeep said. These two books are great in these terms.

5. Steve Jobs by Walter Isaacson

Steve Jobs is the most detailed and accurate account of the life of the man who created Apple, the most valuable technology company in the world. The skill that allowed Steve Jobs to create this huge vision for Apple out of nothing was not his obsession for detail, nor his sense of design, simplicity, or aesthetics. Priyadeep talks about that Steve Jobs had a tendency to observe humans really well which enabled him to build an extremely human-friendly product like iPhone and iPad.

6. Elon Musk by Ashley Vance

Elon Musk is the first official biography of the creator of SolarCity, SpaceX, and Tesla, based on over 30 hours of conversation time between author Ashlee Vance and Musk himself, highlighting his complicated childhood, the way he makes decisions and navigates the world, and how he managed to disrupt multiple industries, all with the goal of saving humanity.

Elon Musk is a truly fascinating character. "Elon Musk got bullied as a child and he would take refuge in reading books" is one of the parts that I deeply relate to, Priyadeep said. An important advise Priyadeep gave is to "Take the good elements of the persona and not to romanticize everything". There is always an insight into the vision of the person which is worth observing.

7. The $100 Startup by Chris Guillebeau

The $100 Startup shows you how to break free from the shackles of 9 to 5 by combining your passion and skills into your own microbusiness, which you can start for $100 or less, yet still turn into a full-time income, thanks to the power of the internet. Chris pulled out a step-by-step framework you can use to find where your passion meets your skills and turn those into an income from your couch. Using nothing but a laptop and some wifi in most cases, you can build a thriving software, freelance or education business and scale it as far as you want. "It's short, quick and really good to read while you're starting up," Priyadeep said.

8. Factfulness by Hans Rosling

Factfulness explains how our worldview has been distorted with the rise of new media, in which ten human instincts cause erroneous thinking, and how we can learn to separate fact from fiction when forming our opinions. Priyadeep describes how this book enables you to see the reality overshadowed by the fiction which is created by the media advertising and modern internet era and "You should not romanticize the problem and think that you're a hero trying to save the world but you are working towards making incremental gains to make this world a better place."

"What books would you like to suggest which will help you with anyone who reads and improve as a person? Tanay continues the conversation with his next question"

9. Twenty Thousand Leagues Under the Sea by Jules Verne

Priyadeep says that storybooks contain a lot of really good messages that you can take. It focuses on a group of scientists embarking on a dangerous voyage in a submarine piloted by the eccentric Captain Nemo in search of a giant monster. As the journey wore on, the crew encounters dangerous life forms, but the biggest threat to their safety may be their increasingly mad captain. Considered one of the greatest science-fiction novels ever written, Twenty Thousand Leagues Under the Sea explores themes of culture, class, grief, and the preservation of the environment.

10. Journey to the center of the earth by Jules Verne

Journey to the Center of the Earth tells the story of three adventurers who undertake a perilous and ill-advised expedition to the center of the earth. On the way, the men encounter prehistoric "marine monsters" and brave the volatile conditions under the earth's surface. The theme of the book is perseverance, continuing on the journey despite hardships, despite doubt, despite even reason. Jules Verne has done a tremendous job of showing us what human beings are capable of which in turn serves as a source of motivation.

11. I, Robot by Isaac Asimov

In I, Robot, Asimov chronicles the development of the robot through a series of interlinked stories: from its primitive origins in the present to its ultimate perfection in the not-so-distant future--a future in which humanity itself may be rendered obsolete. Here are stories of robots gone mad, of mind-read robots, and robots with a sense of humor. Of robot politicians and robots who secretly run the world--all told with the dramatic blend of science fact and science fiction that has become Asimov's trademark.

12. Murder in Mesopotamia by Agartha Cristie

Murder in Mesopotamia is a work of detective fiction by British writer Agatha Christie. The story revolves around someone who is mysteriously murdered. There are several possible suspects. Hercule Poirot who is a great detective figure out who the murderer is. The best part about this book is that it is unpredictable, sparking the reader’s curiosity, and you can not guess who is actually guilty.

13. Lord of the Rings by J.R.R. Tolkien

The Lord of the Rings by J.R.R. Tolkien tells the story of the War of the Ring in the fictional world of Middle-earth. The long novel, commonly published as three volumes and mistakenly called a trilogy, centers around the magical One Ring, which was discovered by Bilbo Baggins in the earlier novel The Hobbit. Now, the free peoples of Middle-earth, such as Men, Elves, Dwarves, and Hobbits, must overcome the dark power of Sauron by destroying the Ring. As Priyadeep said, fiction stories teach us important life lessons. This book teaches the importance of “Unity, Persistence, Purposeful Life, Counting your Blessings, Watching before Saying, and Loyalty.”

So these were the books that will help you grow as a person, teach you about life, and aspire you towards success. Go on, grab one and start reading!!

“A great book should leave you with many experiences, and slightly exhausted at the end. You live several lives while reading.”
― William Styron

Priyadeep’s Recommended Books

The Godfather [Buy Paperback]
Delivering Happiness [Buy Paperback]
The Hard Thing about Hard Thing [Buy Paperback]
Hooked [Buy Paperback]
The $100 Startup [Buy Paperback]
Factfulness [Buy Paperback]
20,000 Leagues Under the Sea [Buy Paperback]
Journey to the Centre of the Earth [Buy Paperback]
I, Robot [Buy Paperback]
Murder in Mesopotamia [Buy Paperback]
The Firm [Buy Paperback]
The Pelican Brief [Buy Paperback]
The Hobbit and the Lord of the Rings [Buy Paperback]
The Count of Monte Cristo [Buy Paperback]

You can never read enough books so here are some more books for startup enthusiasts that you will help you in your journey.

Editor’s Picks

The Startup Owner’s Manual [Buy Paperback]
The Lean Startup [Buy Paperback]
Elon Musk [Buy Paperback]
Blue Ocean Strategy [Buy Paperback]
Business Model Generation [Buy Paperback]
Zero to One [Buy Paperback]
Start With Why [Buy Paperback]

Originally published at https://teawithtanay.com on September 5, 2019.

React Native Reward Referrals

Shad Mirza — Thu, 22 Aug 2019 02:13:05 +0000

This is the third article of series React Native Deep Linking Simplified and in the first two blogs, we learned how to add Deep Link in our app and how to handle it gracefully.

In this article, we will set up a referral system and get the most out of this amazing feature.

Offering in-app rewards for successful referrals to both the referrer and the recipient is an effective way to encourage users to use your app.

There are five simple steps that we will be going through. Let's get started.

Steps involved:

Setup Firebase Project and SDK
Create an invitation link
Send the invitation link
Retrieve the link
Grant reward

Step 1. Setup Firebase Project and SDK

We have already covered this section in Part 1 and Part 2 of this series. Please go through them first then continue from Step 2.

Step 2. Create invitation link

We already learned how to create Dynamic Link from Firebase Console. This time, we will be generating the invitation link at the sender's end and attach a payload along with it. This payload will specify the sender's user account ID at the receiving end. It will look something like this:

https://www.deeplinkdemo.com?invitedby=SENDER_UID

I will be using a random SENDER_UID just for this article. You can call getUid() on Firebase user or generate the ID as you like.

//import firebase
import firebase from 'react-native-firebase';
//Generate unique user ID here
const SENDER_UID = 'USER1234';
//build the link
const link = `https://www.deeplinkdemo.com?invitedBy=${SENDER_UID}`;
const dynamicLinkDomain = 'https://deeplinkblogdemo.page.link';
//call  DynamicLink constructor
const DynamicLink = new firebase.links.DynamicLink(link, dynamicLinkDomain);
//get the generatedLink
const generatedLink = await firebase.links().createDynamicLink(DynamicLink);
console.log('created link', generatedLink);
// console.log: https://deeplinkblogdemo.page.link?link=https%3A%2F%2Fwww.deeplinkdemo.com%3FinvitedBy%3DUSER1234

Step 3. Send the invitation link

Now that we have created the link, we can include it in an invitation. This invitation can be an email, SMS message, or any other medium, depending on what is most appropriate for your app and audience. Example:

const INVITATION = 'Shad has invited you to try this app. Use this referral link: ' + link;
//send this String as you link

Step 4. Retrieve the link

There are many use cases that can happen when the recipient opens the app with the invitation link:

If the app isn't already installed, they will be directed to Play Store or App Store to install the app.
If the app is installed, they will open our app for the first time and we can retrieve the referral information included in the Dynamic Link.

Remember when we added SENDER_UID as a payload in our invitation link? We are going to retrieve that info to specify the user and grant reward. We want to check that the app has been launched from a Dynamic Link or not.

    //add the code to the root file of your app
    async componentDidMount() {
        let url = await firebase.links().getInitialLink();
        console.log('incoming url', url); //incoming url https://www.deeplinkdemo.com?invitedby=USER1234
        if (url) {
        const ID = this.getParameterFromUrl(url, "invitedBy");
        console.log('ID', ID); //ID USER1234
        }
    }

    getParameterFromUrl(url, parm) {
        var re = new RegExp(".*[?&]" + parm + "=([^&]+)(&|$)");
        var match = url.match(re);
        return (match ? match[1] : "");
    }

getInitialLink() returns the Dynamic Link that the app has been launched from. If the app was not launched from a Dynamic Link the value will be null.

Step 5. Grant reward

Now that we have retrieved the payload data from the Dynamic Link, we can specify the user who shared the link and grant the referral rewards to the referrer and the recipient whenever the criteria we want to require have been met. And by this our Reward Referral System has been completed. Cheers!!

I hope you had fun learning about the Dynamic Links, Handling them and the Reward Referral systems in these three blog post series. Find it helpful? Please do share.

Shad

Handling Incoming Dynamic Links

Shad Mirza — Wed, 21 Aug 2019 03:31:27 +0000

This is Part 2 of the series React Native Deep Linking Simplified and in Part 1 we learned How to add Deep Links.

In this article, our goal is to learn how to handle incoming links like a pro.

We will also see how to route the user to a particular screen based on the incoming link.

The term Deep Link is used for the https scheme and Dynamic Link is used for the app scheme. We can use both to navigate our user so don't get confused between these two terms.

Let's get started.

Table of Content

This article is divided into two main sections. We will go through these as follows:

Project Setup
Test Dynamic Link on the device

Project Setup

We will use the react-native-firebase module to configure Dynamic Links in our React Native Project. It involves 4 simple steps:

Steps involved:-

Create a React Native project
Create an application on firebase console
Add react-native-firebase
Add Firebase Dynamic Link module

Step 1. Create a React Native Project

Follow the steps in Part 1 of this series and add Deep Link as described. We will be adding firebase-invites support via the same Dynamic/Deep Link we created earlier.

Step 2. Create an application on firebase console

Let's create an application on the firebase console to use the Firebase SDK. Follow this link and create an application.

Create a project by clicking on Add Project.
Follow the steps to add Android/iOS app. Make sure the project name in Register app section matches with your react-native project (com.deeplinkdemo in our case).
Download google-services.json and paste it inside /deeplinkdemo/android/app/. Make sure the location is correct.
Add libraries as instructed and Sync Project. It will look something like this:-
- Project-level build.gradle

 dependencies {
  classpath("com.android.tools.build:gradle:3.4.1")
  classpath 'com.google.gms:google-services:4.3.0' //Add this line
 }

App-level build.gradle

 dependendies {
  //...
  implementation 'com.google.firebase:firebase-core:17.0.1' // Add this line
 }
 //Add to the bottom of the file
 apply plugin: 'com.google.gms.google-services'

Please use the latest firebase dependency available.
You can add it from Android Studio also by going to:

File -> Project Structure -> Dependencies

Step 3. Add react-native-firebase

Go to your project root directory and run this command:

npm install react-native-firebase --save

(Optional) Link the module if your react-native version is less than 0.60.

react-native link react-native-firebase

React Native version (>0.60) supports autolinking

Follow the Manual Linking guide if you're having any issues with linking react-native-firebase or you're using an earlier version of React Native.

Manual Linking for React Native(<0.60)

Check out the official docs for updated method.

Android

Add react-native-firebase to App-level build.gradle

dependencies {
 //...
 implementation project(':react-native-firebase') //Add this line
}

Edit settings.gradle

//Add these lines
include ':react-native-firebase'
project(':react-native-firebase').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-firebase/android')

Edit MainApplication.java

 ...
 import io.invertase.firebase.RNFirebasePackage; // import this

 @Override
 protected List<ReactPackage> getPackages() {
 return Arrays.<ReactPackage>asList(
 new MainReactPackage(),
 new RNFirebasePackage(), // Add this line
 );
 }

Sync Project and we are good to go.

Step 4. Add Firebase Dynamic Links:

We have to include other modules as the RNFirebasePackage we imported earlier provides the core features only.

If you go to the Firebase Invites Docs, you will see a warning.

Firebase Invites is deprecated. You can create cross-platform invitation links that survive app installation using Firebase Dynamic Links. Please see the Migration Guide for more details.

It means we are eventually be using Firebase Dynamic Links module in our project.

Add the dependency to android/app/build.gradle file:

dependencies {
 // ...
 implementation "com.google.firebase:firebase-dynamic-links:19.0.0"
}

Edit MainApplication.java:

import ...
//import this package
import io.invertase.firebase.links.RNFirebaseLinksPackage;
@Override
protected List<ReactPackage> getPackages() {
 return Arrays.<ReactPackage>asList(
 new MainReactPackage(),
 new RNFirebasePackage(),
 new RNFirebaseLinksPackage() // Add this line
 );
}

Sync Project and we are done. Let's move on to section 2.

If you're running into some dependency issues then Migrate to AndroidX. Check How to solve dependency issues at the end of this article.

See official docs for updated method.

Test Dynamic Link on the device

There are two steps involved in this section: -

Create a Dynamic Link.
Handle the Incoming Link.

Step 1. Create a Dynamic Link

Let's generate a link on the Firebase Console and update our intent filter. This link must be unique and provided by firebase itself. Follow these simple steps:

Select your app on Firebase Console and click on Get Started
Add a Domain. It will probably take a couple of tries to find a unique domain. Note it down when you find one.
(example: https://deeplinkblogdemo.page.link in my case)
Edit AndroidManifest.xml and update the <data> tag in intent-filter with the Domain you just created:

 <data android:scheme="https"
 android:host="deeplinkblogdemo.page.link" />

Click on New Dynamic Link and follow the steps. Provide both Deep Link URL and Dynamic Link name under Setup your Dynamic Link section.

Now that we have created our Dynamic Link, we can move on to the next step.

Step 2. Handle the Incoming link

The root file of your project App.js is the perfect place to add handling logic. So let's start editing the root file.
Follow these three simple steps:-

Import firebase module.

import firebase from 'react-native-firebase';

Add the code to watch for incoming links when the root file is mounted.

async componentDidMount() {
 let url = await firebase.links().getInitialLink();
 console.log('incoming url', url);
}

Open the created Dynamic Link with any browser and check the log. Cheers if you can see the incoming url.

We can add conditions here to check for a certain match in url. On based of that we can write functions as per our need. For example:

async componentDidMount() {
 let url = await firebase.links().getInitialLink();
 if(url === 'some_condition_here'){
 //code to execute
 }
}

Add navigation path or anything as per your need and you're good to go.

We will build a referral system in our React Native App using this logic because that will a perfect use case to demonstrate Dynamic Links. So don't miss the third and final part of this series.

How to solve dependency issue

You might run into some dependency issues because of the recent changes that happened to the AndroidX library (because I did) and here is how I solved them:

Open your Project with Android Studio and select app folder.
Go to Refractor -> Migrate to AndroidX -> Do refractor.
Sync Project. If the issues persist follow steps 4 and 5.
You will probably see a list of build issues in Build Output below. Go through each one them and find the conflicting variable.
Press ALT + ENTER and import the dependency. Remove the old one already present and we are done.

I hope you're able to resolve the issues and successfully implement the Dynamic Links from firebase.

Share this article if you find it helpful.

See you in the next article. Shad

Forem: Shad Mirza

MongoDB Simplified Part 2: How to Setup?

Step 1: Download and install MongoDB locally

Step 2: Setup Environment variable

Step 3: Setup MongoDB "data" directory

MongoDB Simplified Part 1: What, Why and How?

What is MongoDB?

How does it work?

Understand NoSQL and SQL

SQL

Example

🧐 Few things to notice in this example:

NoSQL

Example

🧐 Few things to notice in this example:

Pros and Cons

Pros 🥳

Cons 😓

How I set up Notion for Productive Sanity

What do you want?

Overview

1. Home Page Setup

2. Ideas Section Setup

3. Productivity Section Setup

1. Daily Tasks

2. Habit tracker

4. Project Section Setup

5. Learning Path Setup

6. Using Relations in Databases

When this is useful?

Introducing React Native Design System (RNDS) 🎉🎉

What is RNDS 🧐?

Why bother?

Failures and Learnings

API

Customization and Consistency

Design Language

Design Rules

Documentation

Logo

Design Rules

1. Low surface area

2. Speed

3. Consistency

4. Connection

Color

Typography

Size

Space

Getting Started

Install

Usage

Step 1. Import ThemeProvider and theme then wrap your root component.

Step 2. Use component.

Reference:

Learn React Native Animation by building Circular Progress Bar

Concept

How do three circles work?

Case 1. If progress percentage < 50

1. First Circle

2. Second Circle

3. Third Circle

Case 2. If progress percentage > 50

1. First Circle

2. Second circle

3. Third circle.

Inner circle

Let's code

Step 1: Render base circle

Step 2: Initialize default animation values

Step 3: Render three semicircles

Step 4: Add animation to semicircles.

Step 5: Render inner circle

Winning Hackathons feat. Aviral Aggarwal

What's the story of your profile picture with Tim Cook?

How do you deal with failures?

How do you get to know about these events?

Can you tell us about your Alexa journey?

What is your Hackathon winning recipe?

How to choose among the various student programs?

Step 1. Import `ThemeProvider` and `theme` then wrap your root component.