Forem: Manan Joshi

Revolutionize Your Visuals: Adflare.ai's New Era of Advertising Awesomeness!

Manan Joshi — Thu, 11 Jan 2024 06:08:46 +0000

Hey DEV community! 👋

Ever wondered how AI could take your product visuals to the next level? Enter adflare.ai, the powerhouse that's set to redefine the way we showcase products.

✨ The Power of AI Unleashed

At adflare.ai, we're not just generating images; we're crafting impact. Our cutting-edge AI model is designed to elevate your product visuals into a league of their own.

👁️ Preview on the Fly

Say goodbye to the guessing game. With adflare.ai, preview your generated images instantly without the download hassle. It's all about providing a seamless and effortless experience while keeping you in control.

👍👎 Your Feedback Shapes the Future

Your opinion matters! Like or dislike the generated images to steer the direction of our AI model. Your input directly contributes to the evolution of our platform.

🌐 Dive into Possibilities

Ready to explore the future of AI-driven product visuals? Visit adflare.ai and see the possibilities. When you're ready to turn possibility into reality, sign up at app.adflare.ai.

🚀 Elevate Your Visual Storytelling

adflare.ai isn't just a tool; it's a catalyst for change in how we showcase products. Join us in transforming the landscape. Sign up now and let's make every visual count.

Cheers,

Manan Joshi
Creator of Adflare.ai

I made this Covid-19 tracker. Please leave your thoughts

Manan Joshi — Sun, 29 Mar 2020 01:55:31 +0000

Trying to make the best use of my lockdown time and being tired of answering all the numerous questions that my friends and family asked me about the pandemic, I made this covid19 tracker to track cases all around the world. It's open-source so feel free to check out the Github repo. You can also check out the live version here. Here's a short gif that shows the tracker in action

// Detect dark theme var iframe = document.getElementById('tweet-1242664113681117185-412'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1242664113681117185&theme=dark" }

manan30 / covid19-tracker

Application to track Covid 19 around the world.

Covid-19 Tracker

A global tracker to track to the Covid-19 pandemic. Made this during the lockdown time making the best use of it.

Thanks to the NovelCovid API for making the data readily accessible.

Check out the live demo here

To run the app locally

Clone the repo: git git@github.com:manan30/covid19-tracker.git
Install dependencies: npm install
Run the app: npm start

View on GitHub

Feel free to leave your comments and thoughts in the discussion section below.

You can also find me on Twitter and Instagram.

An ode to the brilliant minds who are working on taking humanity to new heights

Manan Joshi — Sat, 21 Dec 2019 02:23:44 +0000

India sent a lander this September to the lunar south pole. One of the most difficult places to land on the lunar surface. Many countries have tried to achieve this feat and failed honorably. India also showed valiant effort in achieving this feat but the lander was just 1.5 mi / 2.7 km from the lunar surface and lost ground communications. I have been an ardent space exploration nerd and was very much disheartened when this happened. So, I decided to pay homage to the brilliant minds at the Indian Space Research Organization (ISRO) who worked on the Chandrayaan-2 mission. Though the mission lost contact it won many many hearts.

Space is HARD !!!!

I made this short animation completely using React, Three JS and react-three-fiber as my form of tribute to all the people working on such kind of missions.

// Detect dark theme var iframe = document.getElementById('tweet-1207054446448054272-714'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1207054446448054272&theme=dark" }

manan30 / chandrayaan-2

Chandrayaan-2 animation developed using three-js and React

Feel free to leave your comments and thoughts in the discussion section below.

You can also find me on Twitter and Instagram.

I created a Quiz app using Svelte and now I cannot go back to any other framework.

Manan Joshi — Sun, 24 Nov 2019 05:28:03 +0000

Update: I have updated this project with animations and corrected the logic behind the app. You can find the most up to date version here and the live demo.

I was hearing about Svelte a lot and after listening to this talk I wanted to give it a try too. So I did and it turns out that Svelte is super amazing. I am used to programming with React a lot and some clear differences made me fall in love with Svelte.

What is Svelte

Svelte is a compiler that converts our declarative component-based code into JavaScript that can manipulate the DOM directly. You might have heard that Svelte is blazing fast, faster than any other framework out there and that is true. The reason behind this is because of the very fact that Svelte is more of a compiler than a framework or a library. Svelte does not use a Shadow DOM or a Virtual DOM to perform DOM updates, naturally making it orders of magnitude faster than frameworks or libraries that ship with a virtual DOM implementation. It tries to eliminate a lot of boilerplate code and is truly reactive. If you are coming from a React ecosystem like me, Svelte challenges the way you think in a lot of ways.

In this article, we will create a small trivia app and see how Svelte compares to React.

Let's start by creating a Svelte project first. Svelte just like create-react-app provides a way to bootstrap a Svelte app. Just run the code below to get up and running.

npx degit sveltejs/template my-svelte-project
cd my-svelte-project

npm install
npm run dev

Our project directory should look something like this.

Now, if you open up package.json you'll see something amazing.

It does not have any dependencies listed. All the dependencies are devDependencies. This is because Svelte is a compiler and all the dependencies are computed beforehand while generating the build and hence our final code doesn't ship with any of those dependencies making our build size much much smaller.

The main.js file is our main entry point into the application. It is like the App.js file in a React project.
We also see the App.svelte file. Let's open the file and understand the different parts of it.
If you are familiar with React we know that we usually end our React specific files with a .jsx extension. Similarly in Svelte, all our Svelte specific files end with a .svelte extension.
Each Svelte file contains either just markup (HTML tags) or markup with styles enclosed in the <style></style> tag or JavaScript enclosed in <script></script> tag or all three of them.
The best part about the Svelte component is that the styles inside of them are scoped to that component only and hence you won't run into an issue where the styles would leak into some other component.
If you are used to writing HTML in JS with JSX, Svelte is the exact opposite of that and you write everything in a svelte file which is just syntactic sugar for writing HTML files.

Note: If you are coming from a React background you might not be used to thinking this way but believe me this is going to help you expand your boundaries.

With that being said let's start.

First, we are going to look at the App.svelte file. This is our main file/component which serves as the entry point for the app. You can use the code below for your reference.

<script>
  // import QuizArea from './QuizArea.svelte';
</script>

<style>
  main {
    text-align: center;
    padding: 1em;
    max-width: 240px;
    margin: 0 auto;
  }

  h1 {
    text-transform: uppercase;
    font-size: 4em;
    font-weight: 100;
  }

  @media (min-width: 640px) {
    main {
      max-width: none;
    }
  }
</style>

<main>
  <!-- <QuizArea></QuizArea> -->
</main>

As you can see in the code, we have the script, style and markup for the component. At this point, the code does nothing fancy other than just applying some styles to the app.
But soon we'll uncomment the QuizArea component.

I hope that you have gotten a basic idea of the different parts in a Svelte file/component.

I have not added all the files from the project in this post but if you would like to reference the code at any moment it is available here.

Now, let's create a new QuizArea component. For that create a file called QuizArea.svelte in the src directory.

We'll look at each of the three parts separately.

First up we have the <styles></styles> tag. You can add any styles that you want for that component in between the <style> tag.
Instead of writing CSS in a separate file, in Svelte we write the styles within the component itself.
I have defined styles for the QuizArea component in the code below, but you can style it the way you want it.

<style>
  #main {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    height: calc(100vh - 40%);
    width: calc(100vw - 40%);
    padding: 15px;

    background-color: white;
    border-radius: 6px;
    box-shadow: 0 0 5px white;

    text-align: left;
  }

  span {
    display: block;
    margin-top: 20px;
  }

  button {
    margin-top: 15px;
    margin-right: 15px;
    padding: 10px;
    float: right;

    color: white;
    background-color: #ff3e00;
    border: none;
    border-radius: 10px;
    cursor: pointer;
  }

  button:hover {
    box-shadow: 0 0 5px #ff3e00;
  }

  #heading {
    font-size: 24px;
    font-weight: bolder;
  }

  #difficulty {
    position: absolute;
    right: 16px;
    top: 16px;
    height: 25px;
    width: 80px;
    padding: 5px;

    background: rgb(97, 225, 230);
    color: white;
    text-align: center;
    border-radius: 16px;
  }

  #category {
    font-size: 12px;
    font-weight: normal;
  }

  #button-bar {
    position: absolute;
    bottom: 16px;
    right: 0;
  }

  #choice {
    margin-top: 16px;
    padding: 8px;

    border: 1px solid #4e5656;
    border-radius: 8px;
  }

  #choice:hover {
    cursor: pointer;
    background: green;
    border: 1px solid green;
    color: white;
  }

  #snackbar {
    position: absolute;
    left: 16px;
    bottom: 16px;
  }
</style>

This was easy, nothing fancy or Svelte specific. The only thing is we write styles in the same file as the other component code.

Next up we are going to talk about the <script></script> tag. We'll be writing all our JavaScript inside of this tag and here is where we'll be looking at how Svelte does things.
So, in Svelte we'll be using let or const to declare variables. All the variables that we declare are essential state variables. And all the rules of JavaScript apply to these variables, so const variables cannot be reassigned while let variables can be reassigned.
They are the same as the variables that we declare using useState() in React.
The best part about Svelte is that the component automatically re-renders whenever the value of state variable changes. But there is no need to call any set function.

// In Svelte
let name = 'Manan';

// Same thing in React
const [name, setName] = React.useState('Manan');

// causes component to re-render
name = 'Maitry';

// Same thing in React
setName('Maitry');

We have talked about state so it's natural that we talk about props. In Svelte, you can declare a prop by just adding the export keyword behind the variable declaration.

// props in Svelte
export let name;

The name prop can now be used in other components. We can declare any number of props as we do it in React.
We can even declare functions that can act as our event handlers or can serve any other purpose like fetching data, providing utility operations, etc.

// on click handler
function handleClick(change) {
  snackbarVisibility = false;

  if (change === 'f') questionNo += 1;
  else questionNo -= 1;

  question = htmlDecode(data[questionNo].question);
  answerChoices = shuffle(
    [
      ...data[questionNo].incorrect_answers,
      data[questionNo].correct_answer
    ].map(a => htmlDecode(a))
  );
  answer = htmlDecode(data[questionNo].correct_answer);
  category = htmlDecode(data[questionNo].category);
  difficulty = data[questionNo].difficulty;
}

We can import other modules or packages or components by using the import keyword. This is similar to what we do in React.

// imports the Snackbar component
import Snackbar from './Snackbar.svelte';

The main takeaway from this part is that we can write whatever JavaScipt we want with a few twists and the compiler will do the rest for us.

Now the question is how can we use our JavaScript variables in the HTML markup. So for the final part of the app, we will look into that.

It is pretty simple to render any variable. We just wrap the variable in curly braces like this {variableName}.

<!-- see how simple it is :smiley:-->
<p>Hello {name}!</p>

<!-- outputs -->
Hello Manan

Remember the markup inside a Svelte file is Html-ish and hence we can use built-in Svelte expressions to perform things like rendering something conditionally or looping over given values.
To render something conditionally we use {#if expression}<div></div> {/if}. Here the expression can be any valid variable or expression that is in scope (i.e declared inside the <script> tag)

{#if name}
<div id="snackbar">
  <Snackbar message="{correct}"></Snackbar>
</div>
{/if}

To loop over an array we use the {#each expression as exp}<div></div>{/each}. Here the expression is an iterable value while exp is each entry of that iterable value.

{#each answerChoices as choice}
<div id="choice" on:click="{(e) => handleAnswerChoice(e)}">
  <i>{choice}</i>
</div>
{/each}

This is just the tip of the iceberg and you can learn more about everything that Svelte can do over here.

With this, we can now stitch our component together. Copy and paste the code given below in your QuizArea.svelte file

<script>
  import { onMount } from 'svelte';
  import { htmlDecode, shuffle } from './utils.js';
  import Snackbar from './Snackbar.svelte';

  let data;

  let questionNo = 0;
  let question = 'loading...';
  let answerChoices;
  let answer;
  let category = 'loading...';
  let difficulty = 'loading...';

  let correct = false;
  let snackbarVisibility = false;
  $: score = 0;

  // function for fetching data
  function fetchData() {
    fetch('https://opentdb.com/api.php?amount=10')
      .then(resp => resp.json())
      .then(res => {
        data = res.results;
        question = htmlDecode(data[questionNo].question);
        answerChoices = shuffle(
          [
            ...data[questionNo].incorrect_answers,
            data[questionNo].correct_answer
          ].map(a => htmlDecode(a))
        );
        answer = htmlDecode(data[questionNo].correct_answer);
        category = htmlDecode(data[questionNo].category);
        difficulty = data[questionNo].difficulty;
      })
      .catch(e => console.error(e));
  }

  onMount(fetchData);

  // function for moving onto next/prev question
  function handleClick(change) {
    snackbarVisibility = false;

    if (change === 'f') questionNo += 1;
    else questionNo -= 1;

    question = htmlDecode(data[questionNo].question);
    answerChoices = shuffle(
      [
        ...data[questionNo].incorrect_answers,
        data[questionNo].correct_answer
      ].map(a => htmlDecode(a))
    );
    answer = htmlDecode(data[questionNo].correct_answer);
    category = htmlDecode(data[questionNo].category);
    difficulty = data[questionNo].difficulty;
  }

  // function to check the correctness of an answer
  function handleAnswerChoice(e) {
    if (e.target.innerText === answer && !correct) {
      correct = true;
      score += 1;
    } else if (correct) correct = false;
    snackbarVisibility = true;
  }
</script>

<style>
  #main {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    height: calc(100vh - 40%);
    width: calc(100vw - 40%);
    padding: 15px;

    background-color: white;
    border-radius: 6px;
    box-shadow: 0 0 5px white;

    text-align: left;
  }

  span {
    display: block;
    margin-top: 20px;
  }

  button {
    margin-top: 15px;
    margin-right: 15px;
    padding: 10px;
    float: right;

    color: white;
    background-color: #ff3e00;
    border: none;
    border-radius: 10px;
    cursor: pointer;
  }

  button:hover {
    box-shadow: 0 0 5px #ff3e00;
  }

  #heading {
    font-size: 24px;
    font-weight: bolder;
  }

  #difficulty {
    position: absolute;
    right: 16px;
    top: 16px;
    height: 25px;
    width: 80px;
    padding: 5px;

    background: rgb(97, 225, 230);
    color: white;
    text-align: center;
    border-radius: 16px;
  }

  #category {
    font-size: 12px;
    font-weight: normal;
  }

  #button-bar {
    position: absolute;
    bottom: 16px;
    right: 0;
  }

  #choice {
    margin-top: 16px;
    padding: 8px;

    border: 1px solid #4e5656;
    border-radius: 8px;
  }

  #choice:hover {
    cursor: pointer;
    background: green;
    border: 1px solid green;
    color: white;
  }

  #snackbar {
    position: absolute;
    left: 16px;
    bottom: 16px;
  }

  @media screen and (max-width: 960px) {
    #main {
      width: calc(100vw - 15%);
    }
    #difficulty {
      top: -16px;
    }
  }
</style>

<div id="main">
  <span id="heading"
    >Question {questionNo + 1}
    <i id="category">(Category - {category})</i></span
  >
  <span>{question}</span>
  <div id="difficulty">{difficulty}</div>

  {#if answerChoices} {#each answerChoices as choice}
  <div id="choice" on:click="{(e) => handleAnswerChoice(e)}">
    <i>{choice}</i>
  </div>
  {/each} {/if}

  <div id="button-bar">
    {#if !(questionNo > 10)}
    <button value="Next" on:click="{() => handleClick('f')}">Next</button>
    {/if} {#if questionNo > 0}
    <button value="Back" on:click="{() => handleClick('b')}">
      Previous
    </button>
    {/if}
  </div>

  {#if snackbarVisibility}
  <div id="snackbar">
    <Snackbar message="{correct}"></Snackbar>
  </div>
  {/if}
</div>

And there we have it an app written completely in Svelte. Go ahead and use npm run dev to see your app in action. This is a really small app that demonstrates what we can do with Svelte and for me, this might revolutionize the way we design for the web and I am very much excited about what's ahead in store for us.

The main goal of this article was to give you an overview of Svelte and how awesome it is. I hope you feel a little bit more comfortable about using Svelte now.

Thoughts 💭

Please let me know your thoughts about Svelte in the discussion section below. Also, don't hesitate to ask any questions if you are stuck somewhere in the app or would like to learn more about it or are confused about any part.

Thank you for reading!

As always, connect with me on Twitter and Instagram.

Until next time, peace out and happy coding !!!

Cheers.

Creating a searchable movie app using React, styled-components and react hooks

Manan Joshi — Thu, 14 Nov 2019 21:11:47 +0000

With React Hooks becoming the new normal, they have certainly got me more hooked on to React. The other day I was commenting on a post here and figured I should write this article. In this article, we will be creating a small searchable movie database using the TMDb API completely using React hooks. We will also see how we can create 100% reusable components. So without any further delay, let's get started.

Project Setup

Let's create a new react app. The best way to do this is by using npx create-react-app movie-database. Next, we want to install styled-components for styling our app and axios to make network requests. Install them by using npm i axios styled-components or yarn add axios styled-components.

With our project dependencies installed, let's generate a key here to access the TMDb API. Since the link at the top has detailed steps I am not going to go through the steps here. But, if you feel stuck at any of the steps, feel free to drop a comment below.

I hope you were successfully able to generate a key! Please copy the key and paste it somewhere we will need that key in some time.

Overview

Now with our project all set up. Let's understand how things are going to work and what kind of hooks we will use. First up, some basic intro to hooks. Traditionally we have thought of functional components to be dumb components that don't have their state and life-cycle methods. Hence, this did not allow us to make efficient reusable components and class components, on the other hand, had a lot of boiler-plate associated with them even to perform a simple operation. But, hooks change our way of thinking completely. With hooks, we can make any functional component stateful and even perform life-cycle operations inside it. In this article we will be looking at two React hooks namely useState and useEffect. The useState hook allows us to add state variables to our functional components while useEffect helps in achieving the tasks that we normally do in life-cycle methods. React also allows us to define our custom hooks but more on this later. Read more about React hooks here.

Also, we will be using styled-components for styling the app but you can use CSS or any other preprocessor.

So, let's start creating a few components. First up we are going to create a grid component that is going to display all the movies. Create a directory called Grid and add in the index.js and styled.js files.

Grid Component

Grid/index.js

import React from 'react';
import PropTypes from 'prop-types';

import GridItem from '../Item';

import GridContainer from './styled';

import Constants from '../../utils/Constants';

function Grid({ items }) {
  return (
    <GridContainer>
      {items.map((item, i) => {
        const idx = i;
        return (
          <GridItem
            key={idx}
            title={item.title}
            image={`${Constants.IMAGE_URL}/${item.poster_path}`}
            overview={item.overview}
            ratings={item.vote_average}
          />
        );
      })}
    </GridContainer>
  );
}

Grid.propTypes = {
  items: PropTypes.arrayOf(PropTypes.any)
};

Grid.defaultProps = {
  items: []
};

export default Grid;

Grid/styled.js

import styled from 'styled-components';

const GridContainer = styled.div`
  display: flex;
  width: 100%;
  flex-direction: row;
  flex-wrap: wrap;
`;

export default GridContainer;

Let's see how this component works. The Grid component will create an N X N grid based on the width of its children. The only thing you need to pass in is an array of items. And here it is your first reusable component. You can use this Grid in any project. You can pass in props or use any other component as its children.
In this example, I have created a GridItem component as the child for the Grid. The code for the GridITem component is below. Create a directory called GridItem and add in the index.js and styled.js files.

GridItem component

GridItem/index.js

import React from 'react';
import PropTypes from 'prop-types';

import {
  Container,
  Content,
  Image,
  Text,
  FAB,
  Separator,
  Button
} from './styled';

function Item({ image, title, overview, ratings }) {
  return (
    <Container>
      <Image image={image} />
      <Content>
        <Text weight='bolder' relative>
          {title}
        </Text>
        <Text color='#BFC0CE' height>
          {overview}
        </Text>
        <FAB>{ratings}</FAB>
        <Separator />
        <Button>Details</Button>
      </Content>
    </Container>
  );
}

Item.propTypes = {
  image: PropTypes.string,
  title: "PropTypes.string,"
  overview: PropTypes.string,
  ratings: PropTypes.string
};

Item.defaultProps = {
  image: '',
  title: "'',"
  overview: '',
  ratings: ''
};

export default Item;

GridItem/styled.js

import styled from 'styled-components';

const Container = styled.div`
  display: inline-flex;
  height: 150px;
  width: calc(50% - 45px);
  margin-top: 16px;
  margin-bottom: 20px;
  margin-right: 15px;
  padding: 15px;
  background: white;
  box-shadow: 10px 5px 15px #e0e5ec;
`;

const Image = styled.div`
  height: 128px;
  width: 90px;
  margin-top: -32px;
  background-color: white;
  background-image: url(${props => props.image && props.image});
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  box-shadow: 3px 2px 4px #dbdee3;
`;

const Content = styled.div`
  height: 100%;
  width: 100%;
  margin-left: 20px;
  margin-top: 5px;
  margin-bottom: 15px;
`;

const Text = styled.div`
  position: relative;
  margin-bottom: 15px;
  height: ${props => props.height && '3.6em'};
  font-size: ${props => (props.size && props.size) || '16px'};
  font-weight: ${props => (props.weight && props.weight) || ''};
  color: ${props => (props.color && props.color) || '#9D9FB0'};
  overflow: hidden;
  ::after {
    content: '';
    text-align: right;
    position: absolute;
    bottom: 0;
    right: 0;
    width: ${props => (props.relative && '0') || '40%'};
    height: 1.2em;
    background: linear-gradient(
      to right,
      rgba(255, 255, 255, 0),
      rgba(255, 255, 255, 1) 50%
    );
  }
`;

const FAB = styled.div`
  display: flex;
  height: 48px;
  width: 48px;
  margin-top: -150px;
  border-radius: 50%;
  float: right;
  color: white;
  box-shadow: 4px 4px 10px #c9d8db;
  background-color: #2879ff;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: bold;
`;

const Separator = styled.hr`
  position: relative;
  height: 2px;
  margin: 10px 0;
  background: #f2f4f8;
  border: none;
`;

const Button = styled.div`
  display: flex;
  width: 64px;
  padding: 5px;
  margin-right: 5px;
  float: right;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  border-radius: 10px;
  border: 2px solid #2879ff;
  color: #2879ff;
  cursor: pointer;
  :hover {
    background: #2879ff;
    color: white;
    box-shadow: 2px 0 7px #c9d8db;
  }
`;

export { Container, Content, Image, Text, FAB, Separator, Button };

With our Grid component in place, let's fetch some data to display. We'll be using axios to fetch data from the TMDb API. Time to bring out the API key that we had created earlier.

Let's create a file called API.jsand use the code below.

API.js

import axios from 'axios';

const movies = type => {
  return axios.get(
    `${Constants.REQUEST_URL}/movie/${type}?api_key=${Constants.API_KEY}`
  );
};

export default { movies };

Replace Constants.REQUEST_URL with https://api.themoviedb.org/3, type with now_playing and Constants.API_KEY with <the_api_key_you_created_earlier>.

Let's now tie everything together in our view and see hooks in action. Create a directory called Main and add the two files shown below. This is our main view and our movie grid will be shown here.

Main View

Main/styled.js

import styled from 'styled-components';

const RootContainer = styled.div`
  height: 100vh;
  width: 100vw;
  display: inline-flex;
`;
const SideBarSection = styled.section`
  width: 20%;
  background-color: white;
  box-shadow: 3px 0 15px #e5e9f0;
`;

const ContentSection = styled.div`
  height: 100%;
  width: 100%;
`;

const SearchBarSection = styled.section`
  height: 38px;
  width: 256px;
  margin: 10px 0;
  padding: 0 20px;
`;

const MoviesGridSection = styled.section`
  height: calc(100% - 88px);
  width: calc(100% - 28px);
  padding: 20px;
  overflow-y: scroll;
`;

export {
  RootContainer,
  SideBarSection,
  ContentSection,
  SearchBarSection,
  MoviesGridSection
};

Main/index.js

import React, { useState, useEffect } from 'react';

import Search from '../../components/Search';
import MoviesGrid from '../../components/Grid';

import Get from '../../api/Get';
import Constants from '../../utils/Constants';
import useSearch from '../../hooks/useSearch';

import {
  RootContainer,
  ContentSection,
  MoviesGridSection,
  SearchBarSection
} from './styled';

Constants.FuseOptions.keys = ['title'];

function Main() {
  const [movies, setMovies] = useState({});
  const [movieType, setMovieType] = useState('');

  useEffect(() => {
    try {
      (async () => {
        const popularMovies = await Get.movies('now_playing');
        setMovies(state => {
          const newState = { ...state };
          newState.now_playing = popularMovies.data.results;
          return newState;
        });
        setMovieType('now_playing');
      })();
    } catch (e) {
      console.log({ e });
    }
  }, []);

  return (
    <RootContainer>
      <ContentSection>
        <MoviesGridSection>
          <MoviesGrid items={results} />
        </MoviesGridSection>
      </ContentSection>
    </RootContainer>
  );
}

export default Main;

In the index.js file we are using useState and useEffect. Let's see what they do.
First useState. We are all familiar with defining a state object in the constructor of a class component. Synonymous to that in a functional component we can define stateful variables using the useState hook.
useState is nothing but a JavaScript function that takes in an initial value as an argument and returns us an array. eg. const [A, setA] = useState(0). Here we are passing the useState hook an initial value of 0 and it returns to us an array with two entries. The first is the current value of that variable and the second one is a function to set that value.
As a comparison, the state variable in the above code in a class component would look like this

this.state = {
  movies: {},
  movieType: ''
};

We know that whenever we do this.setState() in a class component it is rerendered. Similarly when we call the set function that was returned by useState the component is rerendered. eg. calling setA() in the above point would rerender the component.
And this is useState in a nutshell. At the end of the day, it allows you to declare state variables.

Moving on to useEffect. useEffect allows us to do the tasks that we used to do in the life-cycle methods.
useEffect is much more involved than useState. It takes in as arguments a callback function and an optional dependency array. It looks like this useEffect(callback, <dependencies>).
The callback function specifies what the effect should do while the dependencies array tells when the effect needs to be run.
If useEffect does not have a dependency array it will run on every render, if it is an empty array it will run only on the first render and if the dependency array has contents, it will run whenever those dependencies change.
Specifying an empty array can be used to do tasks that we usually do in the componentDidMount() life-cycle method. Since we want to fetch the data only once we have used an empty array in the useEffect hook in the code.

Go ahead and run the app using npm start and you'll be able to see a list of movies.

Next, we want to add a search to our app.

In this app, we will be using Fuse.js to perform a fuzzy search in our app.
Go ahead and install the fuse.js module using npm install fuse.js.

First, let's add a Search component to the app. Create a directory called Search and add in the index.js and styled.js files.

Search component

Search/index.js

import React from 'react';
import { MdSearch } from 'react-icons/md';
import PropTypes from 'prop-types';

import { SearchBarContainer, SearchIcon, SearchInput } from './styled';

function Search({ handler, value }) {
  return (
    <SearchBarContainer>
      <SearchIcon>
        <MdSearch />
      </SearchIcon>
      <SearchInput
        onChange={handler}
        value={value}
        placeholder='Search Movies'
      />
    </SearchBarContainer>
  );
}

Search.propTypes = {
  handler: PropTypes.func,
  value: PropTypes.string
};

Search.defaultProps = {
  handler: () => {},
  value: ''
};

export default Search;

Search/styled.js

import styled from 'styled-components';

const SearchBarContainer = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  border-bottom: 2px solid #dfe5ef;
`;

const SearchIcon = styled.div`
  display: inline-flex;
  height: 24px;
  width: 24px;
  color: #9d9fb0;
  font-size: 14px;
  font-weight: bolder;
  svg {
    height: 100%;
    width: 100%;
  }
`;

const SearchInput = styled.input`
  height: 24px;
  width: 100%;
  margin-left: 10px;
  border: none;
  background-color: transparent;
  color: #9d9fb0;
  font-size: 14px;
  font-weight: bolder;
`;

export { SearchBarContainer, SearchIcon, SearchInput };

We are going to add this component to our Main view. Replace the contents of the return with the code below.

return (
    <RootContainer>
      <ContentSection>
        <SearchBarSection>
          <Search handler={e => search(e.target.value)} value={searchTerm} />
        </SearchBarSection>
        <MoviesGridSection>
          <MoviesGrid items={results} />
        </MoviesGridSection>
      </ContentSection>
    </RootContainer>
  );

Now we will be writing a custom hook that can perform the search for us.
Create a new file called useSearch.js and add the code given below.

import { useState } from 'react';
import Fuse from 'fuse.js';

function search({ fuse, data, term }) {
  const results = fuse.search(term);
  return term ? results : data;
}

function useSearch({ data = [], options }) {
  const [searchTerm, setSearchTerm] = useState('');
  const fuse = new Fuse(data, options);
  const results = search({ fuse, data, term: searchTerm });
  const reset = () => setSearchTerm('');
  return { results, search: setSearchTerm, searchTerm, reset };
}

export default useSearch;

As you can see we are using the useState React hook to create a custom hook. This hook takes in the array that we want to search through and options to pass into fuse.js. For our app, we will be searching the movies list based on their names.
Let's use this hook in our Main view.
Copy the code below and paste it below useEffect in the Main view render function.

const { results, search, searchTerm } = useSearch({
  data: movies[movieType],
  options: Constants.FuseOptions
});

And there it is, we just added search to our app. You'll be able to search through the movies based on their titles.

As you can see React hooks make things so much cleaner and easier to understand. I love hooks and hope after this article you look hooks too.

As always feel free to drop a comment if you are stuck somewhere or would like to discuss something or give me some feedback.

Checkout the demo and complete code.

Find me on Twitter and Instagram

What is the best .zshrc config you have seen?

Manan Joshi — Tue, 12 Nov 2019 16:45:30 +0000

I was editing my .zshrc the other day and wondered what cool things people are doing with it.

Here's my config

# Created by manan for 4.4.2

#Customise the Powerlevel9k prompts
POWERLEVEL9K_LEFT_PROMPT_ELEMENTS=(
ssh
dir
vcs
newline
status
)
POWERLEVEL9K_RIGHT_PROMPT_ELEMENTS=()
POWERLEVEL9K_PROMPT_ADD_NEWLINE=true
# POWERLEVEL9K_RPROMPT_ON_NEWLINE=true
# POWERLEVEL9K_BATTERY_DISCONNECTED_FOREGROUND='red'
# POWERLEVEL9K_BATTERY_DISCONNECTED_BACKGROUND='blue'

# Options for setting colors to directories.

# POWERLEVEL9K_DIR_HOME_BACKGROUND=red
# POWERLEVEL9K_DIR_HOME_FOREGROUND=white
# POWERLEVEL9K_DIR_HOME_SUBFOLDER_BACKGROUND=red
# POWERLEVEL9K_DIR_HOME_SUBFOLDER_FOREGROUND=white
POWERLEVEL9K_DIR_WRITABLE_FORBIDDEN_BACKGROUND=yellow
POWERLEVEL9K_DIR_WRITABLE_FORBIDDEN_FOREGROUND=black
# POWERLEVEL9K_DIR_DEFAULT_BACKGROUND=red
# POWERLEVEL9K_DIR_DEFAULT_FOREGROUND=white

# Load Nerd Fonts with Powerlevel9k theme for Zsh
POWERLEVEL9K_MODE='nerdfont-complete'
source  ~/Spaces/Editor-Settings/powerlevel9k/powerlevel9k.zsh-theme

HOMEBREW_FOLDER="/usr/local/share"
source "$HOMEBREW_FOLDER/zsh-syntax-highlighting/zsh-syntax-highlighting.zsh"
source "$HOMEBREW_FOLDER/zsh-autosuggestions/zsh-autosuggestions.zsh"
source "$HOMEBREW_FOLDER/zsh-history-substring-search/zsh-history-substring-search.zsh"

autoload -Uz compinit;
typeset -i updated_at=$(date +'%j' -r ~/.zcompdump 2>/dev/null || stat -f '%Sm' -t '%j' ~/.zcompdump 2>/dev/null)
if [ $(date +'%j') != $updated_at ]; then
  compinit -i
else
  compinit -C -i
fi

zmodload -i zsh/complist

#History setup
HISTFILE=$HOME/.zsh_history
HISTSIZE=100000
SAVEHIST=$HISTSIZ

setopt hist_ignore_all_dups # remove older duplicate entries from history
setopt hist_reduce_blanks # remove superfluous blanks from history items
setopt inc_append_history # save history entries as soon as they are entered
setopt share_history # share history between different instances of the shell
setopt auto_cd # cd by typing directory name if it's not a command
setopt correct_all # autocorrect commands
setopt auto_list # automatically list choices on ambiguous completion
setopt auto_menu # automatically use menu completion
setopt always_to_end # move cursor to end if word had one match

zstyle ':completion:*' menu select # select completions with arrow keys
zstyle ':completion:*' group-name '' # group results by category
zstyle ':completion:::::' completer _expand _complete _ignored _approximate #enable approximate matches for completion

#Plugins setup
source <(antibody init)
antibody bundle zdharma/fast-syntax-highlighting > ~/.zshrc.log
antibody bundle zsh-users/zsh-autosuggestions > ~/.zshrc.log
antibody bundle zsh-users/zsh-history-substring-search > ~/.zshrc.log
antibody bundle zsh-users/zsh-completions > ~/.zshrc.log
antibody bundle /Users/manan/Spaces/Editor-Settings/ZSH-Plugins/oh-my-zsh-master/plugins/osx > ~/.zshrc.log
# antibody bundle robbyrussell/oh-my-zsh path:plugins/heroku > ~/.zshrc.log
antibody bundle robbyrussell/oh-my-zsh path:plugins/node > ~/.zshrc.log
antibody bundle robbyrussell/oh-my-zsh path:plugins/web-search > ~/.zshrc.log
antibody bundle robbyrussell/oh-my-zsh path:plugins/sudo > ~/.zshrc.log
antibody bundle robbyrussell/oh-my-zsh path:plugins/react-native > ~/.zshrc.log
# antibody bundle robbyrussell/oh-my-zsh path:plugins/kubectl > ~/.zshrc.log
# antibody bundle robbyrussell/oh-my-zsh path:plugins/npm > ~/.zshrc.log
antibody bundle JamesKovacs/zsh_completions_mongodb > ~/.zshrc.log
source /usr/local/aws/bin/aws_zsh_completer.sh

autoload -Uz compinit;compinit -i

# Aliases

alias grep=ack
alias digitalocean="ssh digitalocean"
alias ls="colorls"
alias python="python3"
alias pip="pip3"
alias easy-install="easy_install-3.7"
alias config="vi $HOME/.zshrc"
alias projects="cd $HOME/Spaces/Projects"
alias reload="source $HOME/.zshrc"

# Git aliases
alias gi="git init"
alias gs="git status -sbu"
alias gco="git checkout"
alias gcob="git checkout -b"
alias gp="git push"
alias gm="git merge"
alias ga="git add ."
alias gcm="git commit -m"
alias gpl="git pull"
alias gst="git stash"
alias gstl="git stash list"
alias glg='git log --graph --oneline --decorate --all'

# Exports
export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-toolsz

export GOPATH=/Users/manan/.golib
export PATH=$GOPATH/src:$PATH
export GOPATH=$GOPATH:/Users/manan/Spaces/Projects/Go

export PATH="/usr/local/opt/libpcap/bin:$PATH"

fpath=(/usr/local/share/zsh-completions $fpath)
export PATH="/usr/local/opt/icu4c/bin:$PATH"
export PATH="/usr/local/opt/icu4c/sbin:$PATH"

export PYTHON3PATH=/Library/Frameworks/Python.framework/Versions/3.7
export PATH=$PYTHON3PATH/bin:$PATH

export PATH=/usr/local/aws/bin:$PATH

export PATH=$PATH:$HOME/sdk/flutter/bin

# added by travis gem
[ -f /Users/manan/.travis/travis.sh ] && source /Users/manan/.travis/travis.sh

# Misc
test -e "${HOME}/.iterm2_shell_integration.zsh" && source "${HOME}/.iterm2_shell_integration.zsh"

# Tab title
precmd() {
  # sets the tab title to current dir
  echo -ne "\e]1;${PWD##*/}\a"
}

# Create a new react app

react-app() {
  npx create-react-app $1
  cd $1
  npm i -D eslint
  npm i -D eslint-config-prettier eslint-plugin-prettier
  npm i -D eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks
  cp "${HOME}/.eslintrc.json" .
  cp "${HOME}/.prettierrc" .
  echo $1 > README.md
  rm -rf yarn.lock
  cd src
  rm -f App.css App.test.js index.css logo.svg serviceWorker.js
  mkdir components views 
  git add -A
  git commit -m "Initial commit."
  cd ..
  clear
  code .
}

Feel free to show your .bashrc or any other configs that you have. You can find my collection here.

Find me on Twitter and Instagram

Creating a rudimentary pool table game using React, Three JS and react-three-fiber: Part 2

Manan Joshi — Thu, 31 Oct 2019 21:29:25 +0000

Welcome to part 2 of a three-part series of articles where we will see how we can use React, three.js, and react-three-fiber to create a game of pool table.

I highly recommend going through part 1 before starting with part 2 as it explains the basics of how things works and gives a primer on setting up a React, three.js and react-three-fiber project.

BTW, I forgot to add this in the previous article but a working copy of the project can be found here and the source code over here

Part 1: Getting started with React, three.js, and react-three-fiber.
Part 2: Setting up the basic scene.
Part 3: Adding physics and finishing up(coming soon).

In this part, we will be setting up the scene for our game. We will be looking at many things along the way and understand the subtleties of how things will work.

Recap

In Part 1 we created a scene with a cube in it that didn't do anything but gave us an overview of the project.

At the end of the article, we were able to render something like this image.

I hope that now you are a little less intimidated by the libraries that we have used. On this note, let's jump right back into creating the scene. We want to start by adding lights to the scene.

Creating a Light component

Let us create a new file called Lights.js and copy and paste the code below.

import React from 'react';
import PropTypes from 'prop-types';

function Lights(props) {
  const { type } = props;
  const Light = type;

  return <Light {...props} />;
}

Lights.propTypes = {
  type: PropTypes.string
};

Lights.defaultProps = {
  type: ''
};

export default Lights;

What we did here is, created a common component for all types of lights provided by three js.
Now let us make use of this light component in our scene.
First, let's start by adding an AmbientLight to the scene.
Open Scene.js and replace the code with the one below.

import React from 'react';
import { useThree } from 'react-three-fiber';
import Lights from '../components/Lights';

function Scene() {
  const { camera } = useThree();

  camera.fov = 45;
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.near = 0.1;
  camera.far = 1000;

  camera.up.set(0, 0, 1);
  camera.position.set(-5, 7, 5);

  return (
    <>
      <Lights
        type='AmbientLight'
        color={0xffffff}
        intensity={0.2}
        position={[0, 0, 0]}
      />
    </>
  );
}

export default Scene;

As you can see we added a Lights component to the render function. The type prop says what kind of light we want with a bunch of other properties.
The next step is adding a bunch of PointLights to the scene.
Replace the contents of the return with the code given below in the render function.

return (
    <>
      <Lights
        type='AmbientLight'
        color={0xffffff}
        intensity={0.2}
        position={[0, 0, 0]}
      />
      {[[-5, -12, 20], [5, -12, 20], [-5, 12, 20], [5, 12, 20]].map(pos => (
        <Lights
        type='PointLight'
        color={0xffffff}
        intensity={0.4}
        distance={100}
        position={pos}
        castShadow
        />
      ))}
  </>
);

This is going to create four point lights for us at the positions specified in the array. A full catalog of point light properties can be found here.

With this, we conclude our lighting section for the scene. Feel free to change positions of the lights, play around with colors, etc.

Next, we will be looking into adding a pool table mesh to the scene.

Adding a pool table mesh to the scene

Let's create a new file called PoolTable.js and add the code given below.

import React from 'react';
import { useLoader } from 'react-three-fiber';

import {
  TextureLoader,
  RepeatWrapping,
  Shape,
  ExtrudeGeometry,
  BoxGeometry,
  MeshStandardMaterial,
  CylinderGeometry,
  MeshBasicMaterial
} from 'three';

import ClothTextureURL from '../assets/cloth.jpg';
import WoodTextureURL from '../assets/hardwood_floor.jpg';

// shape for the cushion
const shape = new Shape();
shape.moveTo(0, 0);
shape.lineTo(0, 22);
shape.lineTo(0.5, 21.2);
shape.lineTo(0.5, 0.8);
shape.lineTo(0, 0);

// settings for the extrude geometry
const extrudeSettings = { steps: 1, depth: 1, bevelEnabled: false };

// geometry for the cushion
const cushionGeometry = new ExtrudeGeometry(shape, extrudeSettings);

// material for the play area
const clothMaterial = new MeshStandardMaterial({
  color: 0x42a8ff,
  roughness: 0.4,
  metalness: 0,
  bumpScale: 1
});

// geometry for the side edge
const edgeSideGeometry = new BoxGeometry(1, 22, 1);

// geometry for the top edge
const edgeTopGeometry = new BoxGeometry(22, 1, 1);

// geometry for pockets
const pocketGeometry = new CylinderGeometry(1, 1, 1.4, 20);

// material for pockets
const pocketMaterial = new MeshBasicMaterial({ color: 0x000000 });

function PoolTable() {
  // loading texture for the play area
  const clothTexture = useLoader(TextureLoader, ClothTextureURL);
  clothTexture.wrapS = RepeatWrapping;
  clothTexture.wrapT = RepeatWrapping;
  clothTexture.offset.set(0, 0);
  clothTexture.repeat.set(3, 6);

  // loading texture for the sides
  const woodTexture = useLoader(TextureLoader, WoodTextureURL);

  // applying texture to the sides material
  const edgeMaterial = new MeshStandardMaterial({ map: woodTexture });

  // applying texture to the play area material
  clothMaterial.map = clothTexture;

  return (
    <object3D position={[0, 0, -1]}>
      {/* mesh for the playing area */}
      <mesh receiveShadow>
        <boxGeometry attach='geometry' args={[24, 48, 1]} />
        <meshStandardMaterial
          attach='material'
          color={0x42a8ff}
          roughness={0.4}
          metalness={0}
          bumpScale={1}
          map={clothTexture}
        />
      </mesh>

      {/* mesh for the side edges */}
      {[
        [-12.5, 12, 0.7],
        [12.5, 12, 0.7],
        [-12.5, -12, 0.7],
        [12.5, -12, 0.7]
      ].map((pos, i) => {
        const idx = i;
        return (
          <mesh
            key={idx}
            args={[edgeSideGeometry, edgeMaterial]}
            position={pos}
          />
        );
      })}

      {/* mesh for the top edges */}
      {[[0, 24.5, 0.7], [0, -24.5, 0.7]].map((pos, i) => {
        const idx = i;
        return (
          <mesh
            key={idx}
            args={[edgeTopGeometry, edgeMaterial]}
            position={pos}
          />
        );
      })}

      {/* mesh for the side cushions */}
      {[[-12, 1, 0.2], [12, 1, 1.2], [-12, -23, 0.2], [12, -23, 1.2]].map(
        (pos, i) => {
          const idx = i;
          return (
            <mesh
              key={idx}
              args={[cushionGeometry, clothMaterial]}
              position={pos}
              rotation={
                idx === 1 || idx === 3
                  ? [0, (180 * Math.PI) / 180, 0]
                  : [0, 0, 0]
              }
            />
          );
        }
      )}

      {/* mesh for the top cushions */}
      {[[-11, 24, 0.2], [11, -24, 0.2]].map((pos, i) => {
        const idx = i;
        return (
          <mesh
            key={idx}
            args={[cushionGeometry, clothMaterial]}
            position={pos}
            rotation={
              idx === 0
                ? [0, 0, (-90 * Math.PI) / 180, 0]
                : [0, 0, (90 * Math.PI) / 180, 0]
            }
          />
        );
      })}

      {/* mesh for the pockets */}
      {[
        [-12, 24, 0],
        [12, 24, 0],
        [-12.5, 0, 0],
        [12.5, 0, 0],
        [-12, -24, 0],
        [12, -24, 0]
      ].map((pos, i) => {
        const idx = i;
        return (
          <mesh
            key={idx}
            args={[pocketGeometry, pocketMaterial]}
            position={pos}
            rotation={[1.5708, 0, 0]}
          />
        );
      })}
    </object3D>
  );
}

export default PoolTable;

This will create a mesh for the pool table for us.
As you can see this file is a lot more involved than any of the other components that we have written till now.
So let's see what the code is doing here.
First of all, we will need textures for the play area and the sides. You can download those here and here, but feel free to use any image.
Next up we define geometry for the side and top cushions.
It uses Shape from three.js along with extrudeGeometry which create an extruded geometry from a given path shape.
After that, as seen earlier we use different materials and other geometries to create sides and pockets.
Now we want to load out texture for the play area. We use the useLoader hook provided by react-three-fiber that takes as argument the type of loader we want to use as well as path url and an optional callback function.
There are lots and lots of loaders provided by three.js and all of them can be used with the useLoader hook.
For our purposes, since we want to load a texture we will be using the TextureLoader.
There is also another way to use loaders in your app if for some reason you don't want to use the useLoader hook by using the useMemo react hook. The code looks something like the one below.

const texture = useMemo(() => new TextureLoader().load(textureURL), [textureURL]);

The idea here is to wrap the loading inside useMemo so that it is computationally efficient.
We would do the same process to load our texture for the sides as well.
Now since our textures are loaded the last thing we want to do is apply our textures to their respective materials. This can be done by using the map key of the material where the texture is needed to be applied.
With this, we can go ahead and start putting up our pool table mesh together.
We start with the play area first and then start adding the sides, cushions, and pockets on top of it.
Now, it's time to add this component to our Scene.

return (
  <>
      <Lights
        type='AmbientLight'
        color={0xffffff}
        intensity={0.2}
        position={[0, 0, 0]}
      />
      {[[-5, -12, 20], [5, -12, 20], [-5, 12, 20], [5, 12, 20]].map(pos => (
        <Lights
          type='PointLight'
          color={0xffffff}
          intensity={0.4}
          distance={100}
          position={pos}
          castShadow
        />
      ))}
      <React.Suspense fallback={<mesh />}>
        <PoolTable />
      </React.Suspense>
    </>
)

We wrap the PoolTable component using Suspense so that all the textures can be loaded correctly before the pool table is rendered.
useLoader hook that we had used in our pool table component suspends the rendering while it's loading the texture and hence if you don't use Suspense React will complain to you about adding a fallback.
Go ahead and start the app and the output should look something like the image.

You'll also be able to use the zoom-in, zoom-out, rotate controls that we had created earlier. Go ahead and try that.
I hope you are happy with everything that we did here. The last part for this article will be to add balls on to the pool table

Adding Pool Table balls

Let's create a new file called PoolBall.js and add the code given below.

import React, { useMemo } from 'react';
import PropTypes from 'prop-types';
import { TextureLoader, Vector2 } from 'three';

function PoolBall({ setRef, position, textureURL }) {
  const ballTexture = useMemo(() => new TextureLoader().load(textureURL), [
    textureURL
  ]);

  return (
    <mesh ref={setRef} position={position} speed={new Vector2()} castShadow>
      <sphereGeometry attach='geometry' args={[0.5, 128, 128]} />
      <meshStandardMaterial
        attach='material'
        color={0xffffff}
        roughness={0.25}
        metalness={0}
        map={ballTexture}
      />
    </mesh>
  );
}

PoolBall.propTypes = {
  setRef: PropTypes.objectOf(PropTypes.any),
  position: PropTypes.arrayOf(PropTypes.number),
  textureURL: PropTypes.string
};

PoolBall.defaultProps = {
  setRef: {},
  position: [],
  textureURL: ''
};

export default PoolBall;

This will create a pool ball for us.
As you can see in the code we have used the useMemo way of loading the texture for the ball.
The render function is pretty straight-forward here and this is a short exercise for you to see what it does base on everything that we have seen so far.
If you have any questions, please post it in the comments below and I'll get back to you.
Just one additional thing to note here is that the speed prop is not an actual property on the mesh but we will need it to compute the speed of the ball when we do physics calculations. But, now you can see that we can pass in custom props as well.
Let's add the balls to our pool table now.
Open Scene.js and update the return of the render function as follow.

return (
    <>
      <Lights
        type='AmbientLight'
        color={0xffffff}
        intensity={0.2}
        position={[0, 0, 0]}
      />
      {[[-5, -12, 20], [5, -12, 20], [-5, 12, 20], [5, 12, 20]].map(pos => (
        <Lights
          type='PointLight'
          color={0xffffff}
          intensity={0.4}
          distance={100}
          position={pos}
          castShadow
        />
      ))}
      <React.Suspense fallback={<mesh />}>
        <PoolTable />
      </React.Suspense>
      <object3D>
        <PoolBall position={[0, -16, 0]} textureURL={zero} />
        <PoolBall position={[-1.01, 15, 0]} textureURL={one} />
        <PoolBall position={[1.01, 17, 0]} textureURL={two} />
        <PoolBall position={[-0.51, 16, 0]} textureURL={three} />
        <PoolBall position={[-1.01, 17, 0]} textureURL={four} />
        <PoolBall position={[-2.02, 17, 0]} textureURL={five} />
        <PoolBall position={[1.53, 16, 0]} textureURL={six} />
        <PoolBall position={[0.51, 14, 0]} textureURL={seven} />
        <PoolBall position={[0, 15, 0]} textureURL={eight} />
        <PoolBall position={[0, 13, 0]} textureURL={nine} />
        <PoolBall position={[0.51, 16, 0]} textureURL={ten} />
        <PoolBall position={[2.02, 17, 0]} textureURL={eleven} />
        <PoolBall position={[-0.51, 14, 0]} textureURL={twelve} />
        <PoolBall position={[0, 17, 0]} textureURL={thirteen} />
        <PoolBall position={[-1.53, 16, 0]} textureURL={fourteen} />
        <PoolBall position={[1.01, 15, 0]} textureURL={fifteen} />
      </object3D>
    </>
  );

Here, as you can see we are grouping all the balls as a single object. This is not always necessary but is useful while debugging.
Also, I have used all the 16 balls here, but you can work with any number of balls. It can be 5, 8, 12 any number that you like, however, you will have to give correct positions to make everything look in order.
I have used different textures for all the balls but you can use only one texture if you want or no texture will work as well.
Textures need to imported like the code below into the scene. For all the textures that I have used in this example, you can find them here.

import zero from '../assets/textures/0.png';

At this point, we are done just restart your app and you'll be able to see the balls on the table. It should look something like the image below.

With this, we conclude part-2. In the next part, we will be seeing how we can write a small physics engine that can detect collisions and hit the balls and see how they behave when they collide.

As always, please post your questions, comments or any feedback in the comments section below and I'll be happy to answer them for you. Find me on Twitter and Instagram.

Peace out and happy coding!!!

Creating a rudimentary pool table game using React, Three JS and react-three-fiber: Part 1

Manan Joshi — Mon, 28 Oct 2019 20:43:28 +0000

For a long time, I wanted to learn and get started with WebGL. Having done some work with OpenGL I thought WebGL would be a great addition to know and learn. This is when I came across three.js.

Three.js is an awesome 3D library for working with graphics on the web. It is written in JavaScript but does not have native support for React. Having worked with React a lot I wanted to use the expressiveness of React combined with the power of three js. This is when I found react-three-fiber. It is a lightweight React renderer for three.js and works well.

This is a three-part series of articles where we will see how we can use React, three.js, and react-three-fiber to create a game of pool table.

Part 1: Getting started with React, three.js, and react-three-fiber.
Part 2: Setting up the basic scene (Coming soon).
Part 3: Adding physics and finishing up(Coming soon).

First things first

Create a React project. The best way to do this is by using create-react-app
The next step is to install the three.js and react-three-fiber modules. Depending on the package manager of your choice go ahead and install them. npm i three react-three-fiber or yarn add three react-three-fiber

Now that our project is set up let's do the fun part and jump into coding.

Organizing the project

This is a project structure that I like to follow and by no means, you've to do this. This is how I like to organize but feel free to move things around.

Inside the src directory let's create different directories for components, views, utils, and assets. Your directory structure should look something like this

project
│   README.md
└───src
│   │   index.js
│   │   App.js
│   │
│   └───assets
│   └───components
│   └───utils
│   └───views

Creating a basic scene

Go ahead and create a file called Scene.js inside the views directory.
Just copy and paste the code below in the Scene.js file.

import React from 'react';

function Scene() {
  return (
    <mesh>
      <boxBufferGeometry attach='geometry' args={[1, 1, 1]} />
      <meshNormalMaterial attach='material' />
    </mesh>
  );
}

export default Scene;

This will create a cube mesh for us.

Let's go and see what each line does.

All the jsx tags that you see are react-three-fiber wrappers around three.js objects

The mesh component is the Mesh object from the three js library. The same is true for boxBufferGeometry and meshNormalMaterial.
If you check out the docs for the components on the three js website you'll see BoxBufferGeometry has a constructor with a bunch of parameters.
The way you can create a new instance in React with react-three-fiber is by using the args prop for that component and passing in the parameters as an array.
So in the above example, <boxBufferGeometry attach='geometry' args={[1, 1, 1]} /> will create a new BoxBufferGeometry (aka cube) with params 1, 1, and 1 for width, height and depth respectively. The attach prop tells the renderer what kind of object the given component is. You can use all the properties for this given object and from its superclass as props to the component. You can find all the properties in the docs for three js.
Similarly, the meshNormalMaterial can be used to color the geometry among many other uses which we will see later.

Congratulations you just created a cube and added it to the scene. The next step is to render the scene inside of a canvas element. You all know how to do this, so bye-bye and happy coding.

I was just kidding. So now, let's create a canvas.

Creating the Canvas

Open up the App.js file and copy and paste the code given below.

import React from 'react';
import { Canvas } from 'react-three-fiber';

import Scene from './views/Scene';

function App() {
  return (
    <Canvas>
      <Scene />
    </Canvas>
  );
}

export default App;

Here the Canvas component will add a canvas element to the dom and render the scene as part of the HTML canvas element.

We are done at this point. Just go and run npm start and you'll be able to see your beautiful cube in the browser.

Your output should look something like this

Just one last thing to do here is the canvas doesn't take the entire height of the screen.
So in your index.css just add the following lines

body {
  margin: 0;
  height: 100vh;
  width: 100vw;
  background-color: black;
}

#root {
  height: 100%;
}

And finally, you'll see a cube that is in the center of your screen.

I hope you're happy with the effort you just put in but as you can see the cube looks more like a square. Don't panic, believe me, it is a cube. To see it as a 3D object let's add mouse/track-pad controls so that we can perform pan, rotate and zoom(aka orbit controls).

Adding Orbit Controls

Let's go ahead and create a file called Controls.js and copy and paste in the code given below.

import React, { useRef } from 'react';
import { extend, useThree, useFrame } from 'react-three-fiber';
import OrbitControls from 'three/examples/jsm/controls/OrbitControls';

extend({ OrbitControls });

function Controls() {
  const controlsRef = useRef();
  const { camera, gl } = useThree();

  useFrame(() => controlsRef.current && controlsRef.current.update());

  return (
    <orbitControls
      ref={controlsRef}
      args={[camera, gl.domElement]}
      enableRotate
      enablePan={false}
      maxDistance={100}
      minDistance={5}
      minPolarAngle={Math.PI / 6}
      maxPolarAngle={Math.PI / 2}
    />
  );
}

export default Controls;

The first thing to understand here is, OrbitControls is not part of the main three module, hence you cannot use it directly as we saw in the previous mesh and geometry code for the cube.
To deal with this react-three-fiber provides an extend function which can be used for modules outside of the main three js codebase. Remember to call the extend function in the beginning before the component function and after that, you'll be able to use the extended module like any other three js module.
So, now as we saw earlier while using mesh and geometry we can use orbit controls in the same way along with all its properties.
Let's talk about the hooks used above as well useRef, useThree, and useFrame.
useRef among other things is Reacts' way of giving us access to the underlying dom node. You can read more about it here
useThree is a react-three-fiber hook that essentially gives us access to everything that is added to the scene. This is going to be super helpful to us later on.
useFrame also a react-three-fiber hook is called for every frame that is drawn. If you have used RequestAnimationFrame API provided by the browser, this hook is similar to that. It will be formulating the basics of our physics calculation later on in the example.
And the final step is adding the newly created controls to the canvas. To do this open the App.js file and replace the current code with the code below.

import React from 'react';
import { Canvas } from 'react-three-fiber';

import Scene from './views/Scene';
import Controls from './components/Controls';

function App() {
  return (
    <>
      <Canvas>
        <Scene />
        <Controls />
      </Canvas>
    </>
  );
}

export default App;

Start the app and nothing will have changed but now you'll be able to use your mouse-wheel/track-pad to zoom in and out while holding on to the left click will allow you to rotate and inspect the cube from all sides as well as allow you to pan. You should be able to do something like this shown below.

Before we jump into modeling out our pool table there is just one last thing that we want to do. Let us just adjust our camera a little bit so that we can see how to change the default settings on the camera.

Editing the camera settings

Go ahead and open your Scene.js file and replace the contents with the code below.

import React from 'react';
import { useThree } from 'react-three-fiber';

function Scene() {
  const { camera } = useThree();

  camera.fov = 45;
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.near = 0.1;
  camera.far = 1000;

  camera.up.set(0, 0, 1);
  camera.position.set(-5, 7, 5);

  return (
    <mesh>
      <boxBufferGeometry attach='geometry' args={[1, 1, 1]} />
      <meshNormalMaterial attach='material' />
    </mesh>
  );
}

export default Scene;

As we had seen earlier, useThree gives up access to the default camera. We are just tweaking some settings on that so that we can see the scene better.
You will be able to find all the properties and functions the camera object has here.

This concludes part 1 of the three-part series. I'll be posting the upcoming parts in the following days.

Also, this is my first blog post ever. It will be great if you could leave some feedback in the comments so that I can understand and improve my content delivery. You can follow me on Twitter and Instagram.

Peace out and happy coding!!!