TweetSage is a recent project I built using Twitter API and OpenAI together to generate answers to your questions based on your recent tweets.

you can check it out live right here: TweetSage

Our website analyzes your Twitter activity to provide you with accurate and relevant responses to your queries

How does it work?

It is built on a very simple idea. Let me explain it to you based on the 2 steps that our website uses.

First Step

• We ask for a Twitter Username, you can provide any Twitter user's username, It doesn't have to be yours only

After you provide us with a username, we use that username to fetch that user's recent tweets using Twitter's official API.

Second Step

• We ask you to type a question that you would like to be answered

As you provide us with a question, we provide all the tweets along with your question to the chatGPT API and chatGPT simply answers your question based on those tweets provided along with the question and renders the generated answer on the screen

Now that you have an idea about how the website works, Let's hop on to how to code it

Tech stack used:

• NextJS13

• Typescript

• TailwindCSS

• MaterialUI

• Twitter API SDK client

• OpenAI library

Let's start with setting up your nextJS app (I'm using the nextJS 13 experimental beta version here)

1. Create a nextJS app

npx create-next-app@latest --experimental-app <your project name>

create-next-app now ships with TypeScript by default so we'll be working with typescript in this project

2. cd into the app and let's install all the dependencies we're gonna use

Twitter SDK client:
npm install twitter-api-sdk

OpenAI :
npm install openai

I'm not gonna cover the UI part so we can skip installing tailwindCSS and materialUI

3. Let's start with setting up our Twitter and OpenAI clients

We will also be setting up API endpoints to fetch data from the clients using nextJS API routes to create those API endpoints

Create two files in your /pages/api directory named tweets.ts and ai.ts

In /tweets.ts

import { Client } from "twitter-api-sdk";

and create a client like this:

export default async (req: NextApiRequest, res: NextApiResponse) => {
    const client = new Client(process.env.BearerToken!);
}

BearerToken is a token that Twitter API provides you when you set up for Twitter developer account

you can get your API here

Now let's fetch the user's tweets using the client

try {
    const data = await client.tweets.tweetsRecentSearch({
      query: `(from:${req.body.user}) -is:retweet -is:reply -is:quote`,
      max_results: 10,
      expansions: ["author_id"],
      "user.fields": [
        "name",
        "profile_image_url",
      ],
    });
    res.status(200).json({ data });
  } catch (err) {
    console.log(err);
  }

req.body.user here represents the username that we'll put in our form input field This is a boilerplate code that Twitter API provides to fetch different results, in this request we're fetching the user's Twitter username, profile picture and their recent tweets.

Let's setup openAI now, in /api/ai.ts let's import two things from openAI and create openAI client

const configuration = new Configuration({
  apiKey: process.env.OPEN_API_KEY,
});
const openai = new OpenAIApi(configuration);

You can get your OPEN_API_KEY in here

Let's fetch our answer now

export default async (req: NextApiRequest, res: NextApiResponse) => {
  const completion = await openai.createCompletion({
    model: "text-davinci-003",
    prompt: req.body.prompt,
    temperature: 1,
    top_p: 1,
    frequency_penalty: 0,
    presence_penalty: 0,
    max_tokens: 256,
  });

  res.status(200).json({ result: completion.data });
};

Now here 'req.body.prompt` is not our question here, it's our question along with all the tweets we fetched in the previous point using the Twitter API

Okay so let's see how we will create our prompt in the next step

4. Creating a Prompt for OpenAI

You can create a basic form with an input field along with a submit button with a handleClick function which we will use to fetch tweets and use a state to store those tweets

type TweetData = {
  text: string | null | undefined;
};

const [tweets, setTweets] = useState<TweetData[]>([]);

const handleClick = async (e: MouseEvent<HTMLButtonElement>) => {
    e.preventDefault();

    if (user === "") {
      return;
    }
    setLoadingTweets(true);

    const results = await fetch("/api/user/tweets", {
      method: "POST",
      body: JSON.stringify({
        user,
      }),
      headers: {
        "Content-Type": "application/json",
      },
    }).then((res) => res.json());

    setTweets(results.data.data);
  };

Now that we have our tweets, let's create our next input field for a question and a submit button with another handleClick function to fetch our answer

const [answer, setAnswer] = useState<string>("");

const handleGetData= async (e: MouseEvent<HTMLButtonElement>) => {
    e.preventDefault();

    if (question === "") {
      return;
    }
    setLoadingData(true);

    const prompt = `you are given some tweets below, read these tweets : \n
      ${tweets.map((tweet) => tweet.text + "\n")}
      and about the person who wrote those Tweets ${question}
      `;

    // fetch data function
  };

Before we look into the fetch data function, let's look at how the prompt is created here We have set up a simple string as you can see above that says :

"you are given some tweets below, read these tweets" then we map over all the tweets we fetched and provide those tweets in the string and then we add "and about the person who wrote those Tweets ${question}" question here refers to the question we are asking the user to fill in the question input form

How it looks all combined: "you are given some tweets below, read these tweets

<tweet no. 1> <tweet no. 2> . . . <tweet no. 10> and about the person who wrote those Tweets " write 5 points "

Now let's fetch data using this prompt

const results = await fetch("/api/user/ai", {
      method: "POST",
      body: JSON.stringify({
        prompt,
      }),
      headers: {
        "Content-Type": "application/json",
      },
    }).then((res) => res.json());

    setAnswer(results.result.choices[0].text);

5. Now all that remains is rendering the data onto the user's screen

We can simply take our answer state with the generated answer and display it into a div element, you can even make a typing effect to write the answer to look cooler, like how I used it in TweetSage

Final Notes

If you wanna look into the code on how to add the typing effect or any other code you can simply go to the project's GitHub repository, all the code is open source and is public for you to use.

The project is also open for contributions, you can open and add a new feature or you can also submit a bug that you found using the project.

I think that's it for this blog, hope you find this blog helpful and that you build something awesome too using the awesome chatGPT API

If you have any questions, reach out to me on my Twitter

Thanks for reading till the last, would love it if you go to the live website and try TweetSage yourself, and would love it even more if you could go and star our TweetSage repo on Github.

Well, why do we even need runtime checks after typescript compile time checks, well the first use could be validating data on the server side, which typescript has no idea of at compile time.

we can't always be sure about what type of variables we'll get from external sources like APIs or form inputs.

For example, when we have some form to be filled, Typescript can't guarantee the user-filled inputs to be 100% type correct as we want on our database.

What is Zod and why do we need it?

Zod is a tool that solves this problem. It fills this TypeScript blindspot and helps with type safety during runtime by having an additional runtime check.

Zod is a TypeScript-first schema declaration and validation library. It provides safety checks at runtime working in conjunction with Typescript!

Installation

Zod can be installed into your react application using npm or yarn

npm install zod

yarn add zod

Requirements

• TypeScript 4.5+!
• strict mode must be enabled in your tsconfig.json file

  // tsconfig.json
  {
    "compilerOptions": {
      "strict": true
    }
  }
  

Usage

Let's string by creating a very simple string schema using zod

import { z } from "zod";

const stringSchema = z.string().min(10).max(15);

stringSchema.parse("example string")

This will be safely parsed as it follows the zod schema we used to parse it.

But if we try something that outflows the schema parsing instructions, such as

stringSchema.parse("string of much greater length")

This will throw an error

{
      code: 'too_big',
      maximum: 15,
      type: 'string',
      inclusive: true,
      message: 'String must contain at most 15 characters,
      path: []
    }

Zod also provides various other methods such as

z.string();
z.number();
z.bigint();
z.boolean();
z.date();
z.symbol();

// empty types
z.undefined();
z.null();
z.void(); // accepts undefined

// catch-all types
// allows any value
z.any();
z.unknown();

// never type
// allows no values
z.never();

Objects in zod

Objects can be used extensively whether they be validating a user form or fetching data from an API

Let's take an example for validating a user form data

const userData = z.object({
  firstName: z.string().min(1).max(10),
  lastName: z.string().min(1).max(10),
  email: z.string().email(),
})

zod to parse API data

In this example let's fetch data from the random user API and validate it using zod

const randomUsers = async () => {
  const data = await fetch("https://swapi.dev/api/people/")
    .then((res) => res.json(),
  );
};

Now this would return an array of users, we can parse the result using the z.array() method

  const randomUsers = z.object({
  results: z.array(z.object()),
});

  const parsedData = randomUsers.parse(data);

  return parsedData.results;

Here we are declaring that the results array could be of any object type, we can further specify the data inside the result array to be of the user type like this

  const randomUser = z.object({
      name: z.object({
        first: z.string(),
        last: z.string()
      })
  })

// declare the type of results array to be randomUser

  const randomUsers = z.object({
  results: z.array(randomUser),
});

  const parsedData = randomUsers.parse(data);

  return parsedData.results;

Make schema values optional

What if we want our email input to be optional here, we can do it as such by adding .optional() to the end of our email schema:

const userData = z.object({
  firstName: z.string().min(1).max(10),
  lastName: z.string().min(1).max(10),
  email: z.string().email().optional(),
})

Default value in the schema

What if we want email to be optional but don't want it to be undefined in our database, we can do so by passing a default value in its place by adding .default() to the end of our email schema:

const userData = z.object({
  firstName: z.string().min(1).max(10),
  lastName: z.string().min(1).max(10),
  email: z.string().email().default("default@gmail.com"),
})

Reducing Duplicate values by composing schemas

Suppose we have this schema with User, Post, Comment

const User = z.object({
  id: z.string().uuid(),
  name: z.string(),
});

const Post = z.object({
  id: z.string().uuid(),
  title: z.string(),
});

const Comment = z.object({
  id: z.string().uuid(),
  comment: z.string(),
});

Notice that id is repeated in every schema

A very basic solution could be placing id in its own type and other schemas can use that reference.

const Id = z.string().uuid();

const User = z.object({
  id: Id,
  name: z.string(),
});

const Post = z.object({
  id: Id,
  title: z.string(),
  body: z.string(),
});

const Comment = z.object({
  id: Id,
  text: z.string(),
});

But this is still quite repetitive, Another solution can be by using the extend method.

We can create a base object schema with id and then extend all other schema and add to the base schema as such:

const schemaWithId = z.object({
  id: z.string().uuid()
});

const User = ObjectWithId.extend({
  name: z.string(),
});

const Post = ObjectWithId.extend({
  title: z.string(),
});

const Comment = ObjectWithId.extend({
  comment: z.string(),
});

now we can add multiple values directly to share between all the objects

const schemaWithId = z.object({
  id: z.string().uuid(),
  createdAt: z.datetime()
});

Both id and createdAt values will be shared between all the objects.

Transform Data within the schema

Let's take back the random user but with a slight change that we are receiving fullName instead of separate firstName and lastName but and we want to split the fullName value into firstName and lastName

This can be done by transforming the fullName value by splitting it at the " " blank space within the schema by using the transform method

const userData = z.object({
  fullName: z.string()
})
  .transform(user => ({
      ...user,
      nameAsArray: user.name.split( " " ),  
  }));

the transform method can be used in various ways to transform that data within the schema.

Type Inference

Suppose we already have defined our schema somewhere and want to use the same schema definition somewhere else without rewriting the schema again, we can do such by extracting its typescript type.

We can extract the TypeScript type of any schema with z.infer<typeof schema>

const user = z.object({
  name: z.string(),
  age: z.number(),
});

type userType = z.infer<typeof user>;

zod is a very easy library to implement and having both compile time and runtime checks will even boost your application's performance.

I hope these help you to get a basic understanding of how zod works. zod is much more than just this, to learn and understand much more about zod, use these official docs

Thanks for reading till the last

Reach me on Twitter

TypeScript is a free, open-source programming language developed and maintained by Microsoft. It comes with static type checking which helps you to learn about potential bugs as you're typing the code other than heading to the browser and figuring it out at runtime.

Typescript is an initial investment that pays off in the long run. The benefits of learning typescript outweigh the time you spend on learning it.

Typescript with react

TypeScript can be helpful to React developers in many ways. I'm listing all the basic typescript types you should know to work with typescript in your react project.

Installation

Setup react project with typescript support using create-react-app

npx create-react-app name-of-app --template typescript

Props types

Checking the type of props helps a lot so that you cannot pass any undesirable values in your props.

1. string prop type

Example:

function MyComponent(props){
  return <h1>Welcome, {props.name}</h1>
}

In the above code snippet we can setup a strict typescript type to the name props so that nothing other that string can be passed onto the name prop. This is how we do it :

// Declaring type of name prop
type MyPropType = {
  name: string
}

const MyComponent = (props: MyPropType) => {
  return <h1> Welcome, {props.name}</h1>
}

This will make sure that the name prop only receives a string type value, if you try to pass any other type it will through an error and won't compile.

Extra benefit: You get an autocomplete feature with props as typescript now know that props can only receive the declared values in propType.

2. object props type

// an object name with first and last keys
type ObjectPropType = {
  name: {  
     first: string  
     last: string
  }
}

const MyComponent = (props: ObjectPropType) => {
  return <h1>Welcome, {props.name.first} {props.name.last}</h1>
}

3. Array prop type

// an array of object names
type ArrayPropType = {
  name: {
    first: string
    last: string
  }[]   // by adding '[]' it is declared as an array type of objects
}

Add more strict values to props

if we want our props to receive a particular set of strings instead of any strings we can do as:

type StrictProps = {
  status: 'Loading' | 'Success' | 'Error' 
}

with this implicit declaring of values for the status prop, no other string other than 'loading', 'success', or 'error' will be accepted by typescript.

4. Children props type

We can even type check for children inside our component

// passing props as children
function App() {
  return (
    <MyComponent>Aadarsh</MyComponent>
  )
}

type ChildrenPropsType = {
  children: string
}

function MyComponent(props: ChildrenPropsType) {
  return <h1>{props.children}</h1>
}

5. React component as children prop type

function App() {
  return (
    <MyComponent>
      <AnotherComponent />
   </MyComponent>
  )    
}

type ComponentAsChildrenProps = {
  children: React.ReactNode
}
// ReactNode type is the type of react components

function MyComponent(props: ComponentAsChildrenProps) {
  return <h1>{props.children}</h1>
}

6. Optional Props

Typescript makes you pass every prop declared in the prop type by default, we can make some props optional using the '?' operator

// an object name with first and last keys
type OptionalPropType = {
  name: {  
     first: string  
     last?: string // last name might not be provided by the upper component
  }
}

const MyComponent = (props: OptionalPropType) => {
  return <h1>Welcome, {props.name.first} {props.name?.last}</h1> 
  // here we will need to use name.last as name?.last because last variable is optional as     
  //might be undefined
}

7. function as props

type functionPropType = {
  handleClick : () => void  // return type can be declared as void or string or any other type
}

8. Event props type

onClick event:

type EventPropType = {
  handleClick : (event: React.MouseEvent<HTMLButtonElement>) => void  
  // further strict check that event is from a button HTML element
}

const MyComponent = (props: EventPropType) => {
  return <button onClick={props.handleClick}>Click me</button>
}

onChange event:

type EventPropType = {
  value: string
  handleChange : (event: React.ChangeEvent<HTMLInputElement>) => void  
  // further strict check that event is from a input HTML element
}

const MyComponent = (props: EventPropType) => {
  return <input value={props.value} onClick={props.handleChange} />
}

9. Style props

type StyleProps = {
  styles: React.CSSProperties
}

Hooks

1. useState hook

type inference for use state assigns type itself to a state provided a given initial value.

const [state, setState] = useState(false)
// `state` is inferred to be a boolean
// `setState` only takes booleans

However, for states being assigned null value initially will need type declared for future assignable value

type UserType = {
  name: {
    first: string
    last: string
  }
  email: string
}
const [user, setUser] = useState<UserType | null>(null) 
// declaring that user can be of userType in future with null value in present

For future state which will be initialized soon after setup and will never have null assigned you can write such condition as such:

const [user, setUser] = useState<userType>({} as userType)

This is kind of lying to the compiler that '{}' also is of type userType

2. useReducer hook

we can setup types of useReducer actions and state.

a simple counter using useReducer hook for example:

type StateType = {
  count: number
}

type ActionType = {
  type : string
  payload: number
}

const initialState = { 
  count: 0 
};

function reducer(state: StateType, action: ActionType) {
  switch (action.type) {
    case "increment":
      return { count: state.count + action.payload };
    case "decrement":
      return { count: state.count - action.payload };
    default:
      return state
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({ type: "decrement", payload: 1 })}>
        decrement by 1
      </button>
      <button onClick={() => dispatch({ type: "increment", payload: 1 })}>
        increment by 1
      </button>
    </>
  );
}

we can further strict action type to not be just any string but only increment and decrement

type ActionType = {
  type: 'increment' | 'decrement'
  payload: number
}

what if you now have a third button for reset

<button onClick={() => dispatch({ type: "reset"})}>
        reset to 0
</button>

as you can see this dispatch function doesn't have a payload property in it, typescript will throw error here saying 'payload not initialized'

there's two ways to deal with this either so make payload as an optional variable

type ActionType = {
  type: 'increment' | 'decrement'
  payload?: number // now payload is optional
}

or another better way, you set up different types for update and reset functions like this

type UpdateCountActionType = {
  type: 'increment' | 'decrement'
  payload: number
}

type ResetCountActionType = {
  type: 'reset'
  // without payload
}

// now you can set your action type as
type actionType = UpdateCountActionType | ResetCountActionType 

function reducer(state: StateType, action: ActionType) {
  switch (action.type) {
    case "increment":
      return { count: state.count + action.payload };
    case "decrement":
      return { count: state.count - action.payload };
    case "reset" :
      return initialState;
    default:
      return state
  }
}

3. useRef hook

while using useRef hook typescript expects us to write the type of the element being assigned to that ref

const inputRef = useRef<HTMLInputElement>(null!);
 // the '!' with null is used to indicate that the element is not going to be null

return (
      <input type="text" ref={inputRef} />
);

4. useContext hook

Example: Defining a context passing down a user as value

type UserType = {
  name: string
  email: string
}

type ContextType = {
  user: UserType | null
  setUser: React.Dispatch<React.SetStateAction<UserType | null>>
}

type ChildrenType = {
  children: React.ReactNode
}

const StateContext = createContext<ContextType | null>(null)

export const StateProvider = ({children} : ChildrenType) => {
  const [user, setUser] = useState<UserType | null>(null)

return <StateContext.Provider value={{user, setUser}}>{children}</StateContext.Provider>
}

you can get the type of setUser function by hovering over it

Alright, that's a wrap, we covered all the basic react typescript types, there's still a lot to typescript than this. If you wanna learn further ahead head to the typescript official docs.

I hope these help you to get a basic understanding of how typescript types are used in react.

Thanks for reading till the last

Reach me on Twitter

Introduction to MaterialUI

MaterialUI is a free and open-source react library based on Google's material design which is maintained by MUI. MaterialUI provides predefined and customizable react UI components to make UI development much easier, speeding up the web design process.

MaterialUI provides different varieties of predefined components such as a navbar, text fields, layout components such as Grid, etc. I'm gonna list the 6 MUI components that I find the coolest which you can use in your next project along with a short description of how to use them.

Installation

First, you need to have the mui library installed in your react app. You can install it using npm or yarn

npm : npm install @mui/material @emotion/react @emotion/styled

yarn: yarn add @mui/material @emotion/react @emotion/styled

Now that you have materialUI installed let's start with our first mui component

1. MUI Grid

MaterialUI provides an amazing grid system for responsive web designs. Mui's responsive grid system is based on a 12-column grid layout. It allows visual consistency across multiple screen sizes and inputs.

• The grid container is implemented using the component with the 'container' variant and items are declared using
• Items' widths are set in percentage by default so they are adaptive to the grid container.
• We can create spacing between grid items using spacing

• The grid container has five breakpoints and these breakpoints can be assigned to a value that represents how many of the 12 columns will be occupied by that item on that particular screen size.

  Example: Implementing a simple responsive mui grid layout

   <Grid container spacing={2}>
        <Grid item xs={6} md={8}>
          <div>xs=6 md=8</div>
        </Grid>
        <Grid item xs={6} md={4}>
          <div>xs=6 md=4</div>
        </Grid>
        <Grid item xs={6} md={4}>
          <div>xs=6 md=4</div>
        </Grid>
        <Grid item xs={6} md={8}>
          <div>xs=6 md=8</div>
        </Grid>
   </Grid>

Output:

for example here on the first item xs={6} md={8} sizes that grid item to occupy 8 columns when the viewport width is 900 or more pixels. For smaller viewports, the component fills half of the viewport width (6 columns).

Auto Layout grid container

we can also create items to take space dynamically according to the screen size, we can set the width of one item and the others will automatically resize around it.

  <Grid container spacing={3}>
        <Grid item xs>
          <div>xs</div>
        </Grid>
        <Grid item xs={6}>
          <div>xs=6</div>
        </Grid>
        <Grid item xs>
          <div>xs</div>
        </Grid>
  </Grid>

Output :

2. Textfield

The textfield component is a complete form control HTML input including a label, input, and helper text which can further be customized with wrapped icons inside too. It comes with three variants outlined(default), standard, and filled.

<TextField id="outlined-basic" label="Outlined" variant="outlined" />
<TextField id="filled-basic" label="Filled" variant="filled" />
<TextField id="standard-basic" label="Standard" variant="standard" />

Output:

It supports form props such as required, disabled, type, etc. as well as helper text to display conditionally under the input label.

The error prop toggles the error state.

We can further customize it using select prop and make it a downtown input too along with icons display.

Input adornments

Input adornment can be used to add prefixes, suffixes, or on action icons or functionality to an input such as a button to hide or reveal passwords.

  const [showPassword, setShowPassword] = useState(false)

  const handleClickShowPassword = () => setShowPassword(!showPassword)

  <OutlinedInput
        id="outlined-adornment-password"
        type={showPassword ? 'text' : 'password'}
        endAdornment={
          <InputAdornment position="end">
            <IconButton
              onClick={handleClickShowPassword}
              edge="end"
            >
              {showPassword ? <VisibilityOff /> : <Visibility />}
            </IconButton>
          </InputAdornment>
        }
        label="Password"
  />

Output:

3. Image List

The image list component can be used when we wish to display a collection of images in an organized manner. Mui provides different variants with the image list component to display images differently such as standard, quilted, woven, and masonry. Mui also provides ImageListItemBar to add an overlay to each item. The overlay can accommodate a title, subtitle, and secondary action.

Masonry image list example :

  <ImageList cols={3} gap={8} variant="masonry">
          {itemData2.map((item) => (
            <ImageListItem key={item.title}>
              <img
                src={`${item.img}?w=248&fit=crop&auto=format&dpr=2`}
                alt={item.title}
                loading="lazy"
              />
            <ImageListItemBar title={item.title} />
            </ImageListItem>
          ))}
  </ImageList>

output:

4. Pagination

One of the most important things about making your website more user-friendly is reducing the response time. Rendering a huge data on page build will slow down the webpage a lot, therefore when you have a lot of elements on a page you can render them accordingly by separating them into pages and for that mui provides an amazing pagination component.

Material-UI provides a Pagination component that enables the user to select a specific page from a range of pages

<Stack spacing={2}>
  <Pagination count={10} />
  <Pagination count={10} color="primary" />
  <Pagination count={10} variant="outlined" />
  <Pagination count={10} variant="outlined" color="primary" />
  <Pagination count={10} shape="rounded" />
  <Pagination count={10} variant="outlined" shape="rounded" />
</Stack>

There are multiple variants available for the pagination component which can also be further customized as per your need.

5. Skeleton

A skeleton screen is a version of the UI that doesn’t contain actual content; instead, it mimics the page’s layout by showing its elements in a shape similar to the actual content as it is loading, this also helps the UI to not be disturbed by the absence of elements and their sudden load.

Material UI provides the skeleton component to create such a skeleton screen. It provides these variants along with the component. text (default): represents a single line of text (you can adjust the height via font size). circular, rectangular, and rounded: come with different border-radius to let you take control of the size.

const [loading, setLoading] = useState(true);

  useEffect(() => {
    setTimeout(() => {
        setLoading(false)
    }, 3000)
  }, [])

<Box sx={{ width: "250px" }}>
  {loading ? (
    <Skeleton variant="text" sx={{ fontSize: '1rem' }} />
    <Skeleton variant="circular" width={40} height={40} />
    <Skeleton variant="rectangular" width={210} height={60} />
    <Skeleton variant="rounded" width={210} height={60} />
    ) : (
          <img
            src="https://source.unsplash.com/random/256x144"
            alt="skeleton"
            width={256}
            height={144}
          />
 )}

Output: (stays for 3 seconds and then displays the image)

6. Timeline

The timeline component can be used to display a list of events in chronological order. There are different ways in which a Timeline can be placed, and customized.

<Timeline position='alternate'>
        <TimelineItem>
            <TimelineOppositeContent color='text.secondary'>09:30 AM</TimelineOppositeContent>
            <TimelineSeparator>
                <TimelineDot color='info' variant='outlined'/>
                <TimelineConnector/>
            </TimelineSeparator>

            <TimelineContent>City A</TimelineContent>
        </TimelineItem>
        <TimelineItem>
        <TimelineOppositeContent color='text.secondary'>10:00
AM</TimelineOppositeContent>
            <TimelineSeparator>
                <TimelineDot color='info' variant='filled'/>
                <TimelineConnector/>
            </TimelineSeparator>

            <TimelineContent>City B</TimelineContent>
        </TimelineItem>
        <TimelineItem>
        <TimelineOppositeContent color='text.secondary'>10:30 AM</TimelineOppositeContent>
            <TimelineSeparator>
                <TimelineDot color='info' variant='outlined'/>
            </TimelineSeparator>

            <TimelineContent>City C</TimelineContent>
        </TimelineItem>
    </Timeline>

Output:

Other honorable mui components

• Breadcrumbs

• Tabs

• App bar

• Speed Dial

• LoadingButton

That's all for now, more about these components is available on the official mui website

Thank you for reading till the last.

Reach me on Twitter

If you have worked with react, you must have the idea of how data is passed in react. React context helps to pass data without prop drilling. Let's first see what prop drilling is.

Prop Drilling

Passing data in react is straightforward. It is top to down, from parent to child component. Prop drilling is accessing data from high-level components to the child components. Why is this a problem?

Suppose you are working on a pretty large project having a quite big component tree and you want to pass down an authenticated user to a component down at the bottom of the tree. In such a situation you'll have to pass that user or props from all the components in between which might not even need access to that data or props. In such cases we can use react context api. Now let's see how React context solves this problem.

How does context solve the problem of prop drilling?

In easy language, Context API is a way to make global variables or props. It is basically used when some data needs to be accessible by many components at different nesting levels.

How does context work?

For using this we have to create an object using React.createContext() globally.

const MyContext = React.createContext(defaultValue);

the object comes with a provider component that assigns the value to the object.

export const App = () => {
  const [user, setUser] = useState("Aadarsh");

  return (
    <MyContext.Provider value={user}>
      <h1>{`Hello ${user}`}</h1>
      <ChildComponent user={user} />
    </MyContext.Provider>
  );
}

Now all the components in the component tree will have direct access to the user.

To access this data to the final component we use useContext()

const user = useContext(MyContext)

Where to Use context?

Wherever some data needs to be passed deep down in the component tree, it's better to use context

• Passing user data from login form to cart checkout

• Building a theme-toggler component that toggles between light and dark mode and every component needs access to it to be styled accordingly.

That's all for now, read more about React context here reactjs.org/docs/context.html

Thank you for reading till the last.

Reach me on Twitter

Before getting started with any development field, one must have basic CS fundamentals knowledge, and there is no other better course than Harvard's CS50 course

2. Learn Data Structures and Algorithms (DSA)

DSA is the building block of the software development process. It is not limited to a single programming language. It is said DSA is a must to crack any computer science job interview and it's changing nowadays a little but still being good at DSA has a lot of advantages practicing and solving DSA questions help you build logic faster. DSA actually trains you to think in different ways. And there are many many advantages of doing DSA. There are a bunch of free awesome courses on DSA on Udemy and YouTube and a bunch of websites like Leetcode etc. to practice DSA questions.

3. Learn HTML and CSS

HTML is the building block of a webpage and CSS is also as much as important as HTML on a webpage. CSS is used to style and rearrange your HTML file as per desired and also used to make web pages responsive.

4. Learn Javascript

For adding user interactivity to your web page, javascript is used. Learning JS in 2022 is the best investment you can do on yourself. It is highly used programming language in different fields.

5. Learn Git and Github

Git is a free and open source version control system. It is used for tracking changes in any set of files, usually used for coordinating work among programmers collaboratively. GitHub is a provider of Internet hosting for software development and version control using Git. It offers the distributed version control and source code management functionality of Git. Git and GitHub are a must-have tech skill.

6. Develop a portfolio website to list all your projects

Now that you have come this far, you should have good enough skill to create your own portfolio website, where you can showcase your skills and projects and every information about you.

7. Learn React

React is a open source Javascript library developed by Facebook. React helps create faster and flexible webpages using webpacks and is one of most propular JS library.

That's all for now.# Follow me on Twitter: https://twitter.com/Aadarsh805 Linkedin: https://www.linkedin.com/in/aadarsh-thakur-090a31227/