In this article, you'll learn how to implement exit animations using the exit prop and the AnimatePresence component. We'll progressively build upon this foundation, demonstrating how to create more advanced exit animations with custom transitions and delayed effects. At the end of this, you'll build a simple pop-up modal using all you learn. I hope you have a lovely read.

Get Started

Prerequisites:

• Node.js and npm (or yarn) installed on your system.

• An existing React project.

• Basic knowledge of Framer Motion

1. Install Framer Motion:

In your project directory, install Framer Motion using either npm or yarn:

Using npm:

npm install framer-motion

Using yarn:

yarn add framer-motion

2. Create a basic component:

Let's create a simple component to play around with. Inside the src folder, create a new file named my-component.tsx. Here's a basic structure for our component:

import React from 'react';

const MyComponent = () => {
  return (
    <div className="w-20 h-20 bg-green-600 rounded-full cursor-pointer" />  
  );
};

export default MyComponent;

3. Import Framer Motion:

To make your component move with Framer Motion, you need to import the motion component. Update your my-component.tsx file to include this line at the top:

import { motion } from 'framer-motion';

The motion import from framer-motion lets you convert an ordinary HTML tag like div to a motion.div tag that allows you to animate your React elements.

There you have it! You now have a basic React project set up with Framer Motion and are ready to create awesome exit animations!

Can CSS Handle Exit Animations?

Sure, CSS transitions seem like a natural fit for exit animations in React at first glance. You can define styles for an element and smoothly transition them to disappear, creating a fade-out or slide-out effect.

However, here's the catch: When you try to hide a React component during an exit animation using CSS, you run into a roadblock. React, by design, removes components from the Document Object Model (DOM) entirely when they are hidden. This removal from the DOM makes them unavailable for animation by CSS. CSS transitions rely on manipulating elements within the DOM, so a removed element can't be smoothly animated.

This presents a challenge for basic exit animations with CSS in React. While CSS might seem viable, it can't handle the core functionality of animating a disappearing component due to React's behavior. This is where Framer Motion steps in, offering a solution specifically designed for handling animations alongside React's component lifecycle.

Using AnimatePresence

Remember, React entirely removes hidden components from the Document Object Model (DOM). This disrupts the animation process if you directly apply exit animations. AnimatePresence solves this challenge by acting as a wrapper around your components.

How to use AnimatePresence:

1. Define the Exit Animation:

   • We start by defining the exit animation itself using the exit prop within Framer Motion variants. This prop specifies the animation that plays when the component exits the scene.

Here's an example:

const exitAnimation = {
  opacity: 0, // Fade out to zero opacity
};

2. Wrap with AnimatePresence:

   Next, we wrap our components with AnimatePresence. This ensures that even when a component is hidden, it remains in the DOM momentarily, allowing Framer Motion to complete the exit animation before it's truly removed.

Here's how it looks in practice:

import { AnimatePresence } from 'framer-motion';

export function App() {
  const [visible, setVisible] = useState(true);

  const exitAnimation = {
    opacity: 0, // Fade out to zero opacity
  };

  return (
    <AnimatePresence>
      {visible && (
        <motion.div
          exit={exitAnimation}
          className="w-20 h-20 bg-green-600 rounded-full cursor-pointer"
          onClick={() => setVisible(false)}
        />
      )}
    </AnimatePresence>
  );
}

With AnimatePresence:

Without AnimatePresence:

In this example:

• We wrap the motion.div with AnimatePresence.

• The motion.div has the defined exitAnimation applied using the exit prop, which fades out the element.

• When the component is clicked (toggling visible to false), AnimatePresence ensures the exit animation plays before removing the element from the DOM.

This is just a basic example, of course. Framer Motion allows you to animate various properties like opacity, scale, translate (position), and more, giving you the freedom to create a wide variety of exit animations.

Advanced Exit Animations

We've explored the basics of defining exit animations with Framer Motion. Now, let's learn some advanced techniques to create better exit animations:

1. Fine-tune with Custom Transitions:

The transition property within the exitAnimation object offers even more control over your animation. You can define custom easing functions to control the speed and flow of the animation:

const exitAnimation = {
  opacity: 0,
  transition: { duration: 0.5, ease: "easeInOut" }, // Use "easeInOut" for smooth start and end
};

Here, we've added the ease: "easeInOut" property to the transition. This tells the animation to ease in and out smoothly, creating a more natural feel.

2. Combining Multiple Animation Properties:

Don't limit yourself to a single animation property! Framer Motion allows you to combine multiple properties within your exitAnimation object:

const exitAnimation = {
  opacity: 0,
  x: "-100vw", // Slide off-screen to the left
  rotate: 90, // Rotate 90 degrees
  transition: { duration: 0.7 },
};

In this example, we're fading out the component (opacity: 0), sliding it off-screen to the left (x: "-100vw"), and adding a 90-degree clockwise rotation (rotate: 90) for a more dramatic exit.

3. Delayed Exits for Multiple Elements:

An exit animation can become even more engaging when applied to multiple elements. Framer Motion offers two techniques to create a cascading or wave-like effect: individual delays and stagger.

export function MyComponent() {
  const [visible, setVisible] = useState(true);

  const exitAnimationParent = {
    opacity: 0,
    x: "-25vw",
    rotate: 90,
    transition: {
      duration: 0.5,
      ease: "easeInOut",
      delay: 0.5,
    },
  };

  const exitAnimationChild = {
    opacity: 0,
    x: "25vw",
    rotate: 90,
  };

  return (
    <AnimatePresence>
      {visible && (
        <motion.div
          exit={exitAnimationParent}
          className="w-20 h-20 bg-green-600 cursor-pointer rounded-2xl flex justify-evenly items-center"
          onClick={() => setVisible(false)}
        >
          <motion.div
            exit={exitAnimationChild}
            transition={{ duration: 0.5, ease: "easeInOut", delay: 0.2 }}
            className="w-7 h-7 bg-white  rounded cursor-pointer"
          />
          <motion.div
            exit={exitAnimationChild}
            transition={{ duration: 0.5, ease: "easeInOut" }}
            className="w-7 h-7 bg-white rounded cursor-pointer"
          />
        </motion.div>
      )}
    </AnimatePresence>
  );
}

The provided component demonstrates delayed exits for two child elements within a parent container. Here's a breakdown of what's going on:

1. Parent Container Animation:

   • The parent container (motion.div) uses the exitAnimationParent variant. The animation properties and configuration remain the same:

     • Fades the container out with opacity: 0.

     • Slides the container off-screen by 25 viewports to the left with x: "-25vw".

     • Rotate the container 90 degrees clockwise with rotate: 90.

     • The animation has a duration of 0.5 seconds, uses an "easeInOut" easing function, and has a delay of 0.5 seconds before starting.

2. Child Element Animations:

   • Each child element (motion.div) still uses the exitAnimationChild variant defining opacity and x-axis translation.

   • However, the key difference is the individual transition prop for each child.

     • The first child element now has a slight delay of 0.2 seconds within its transition.

     • The second child element retains the original transition properties (0.5 seconds duration and "easeInOut" easing).

These are just a few ways to create advanced exit animations with Framer Motion. While individual delays create a cascading effect, Framer Motion offers a more scalable approach for complex scenarios: staggerChildren and delayChildren. We won't cover those in this tutorial.

Building a Modal Component with Exit Animation

Modal components are a common UI element for displaying additional content or functionality within an overlay. With Framer Motion, we can add a touch of polish with a smooth exit animation when the modal is dismissed.

A modal component typically consists of two parts:

• Backdrop: A dimmed background element that creates a visual distinction between the modal and the rest of the application content.

• Modal Content: The main content area displayed within the modal, often containing information, forms, or interactive elements.

Creating the Modal Component:

Here's a basic structure for our modal component with Framer Motion:

import { motion } from "framer-motion";

interface ModalProps {
  setShowModal: (showModal: boolean) => void;
}

const Modal = ({ setShowModal }: ModalProps) => {
  return (
    <motion.div
      className="overflow-y-auto overflow-x-hidden fixed top-0 bottom-0 mx-auto my-auto right-0 left-0 z-50 justify-center items-center w-full bg-black/50 md:inset-0 flex"
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
    >
      <motion.div
        className="h-[270px] w-full relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl sm:my-8 sm:w-full sm:max-w-lg flex flex-col items-center justify-center px-4 pb-4 pt-5 sm:p-6 sm:pb-4 gap-5"
        initial={{ scale: 0.5 }}
        animate={{ scale: 1 }}
        exit={{ scale: 0 }}
      >
        <div className="bg-green-100 rounded-full p-3">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            stroke-width="1.5"
            stroke="currentColor"
            aria-hidden="true"
            className="text-green-700 w-6 h-6"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              d="M4.5 12.75l6 6 9-13.5"
            ></path>
          </svg>
        </div>
        <h4 className="font-semibold text-lg">Payment successful</h4>
        <p className="text-center w-[300px] -mt-2 leading-snug text-gray-600">
          Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sit esse
          dolorem officia.
        </p>
        <button
          type="button"
          className="inline-flex w-full justify-center rounded-md bg-[#4f46e5] px-3 py-2 text-white shadow-sm hover:bg-[#3f38b5] transition-colors text-md font-bold "
          onClick={() => setShowModal(false)}
        >
          Close modal
        </button>
      </motion.div>
    </motion.div>
  );
};

export default Modal;

Explanation:

• Initial State: The modal content starts with opacity: 0 (invisible) and a scale: 0.5 (scaled down to 50%).

• Animate State: When the modal opens, the content animates to opacity: 1 (fully visible) and scale: 1 (normal size).

• Exit State: When the modal closes, the content animates back to opacity: 0 (invisible) and scale: 0 (scaled down), creating a shrinking and fading-out effect.

Adding the Modal to Your Application:

Now you can integrate this Modal component into your application. Here's an example:

import { useState } from "react";
import { AnimatePresence } from "framer-motion";
import Modal from "./modal";

export default function App() {
  const [showModal, setShowModal] = useState(false);

  return (
    <div className="w-full h-[100vh] flex items-center justify-center relative">
      <button
        className="inline-flex w-full justify-center rounded-md bg-[#4f46e5] px-3 py-2 text-md font-bold text-white shadow-sm hover:bg-[#3f38b5] sm:w-auto"
        onClick={() => setOpen(!open)}
      >
        Open modal
      </button>

      <AnimatePresence>
        {open && <Modal setOpen={setOpen} />}
      </AnimatePresence>
    </div>
  );
}

In this example, clicking the "Open modal" button sets showModal to true, triggering the modal to open with its scale-up animation. Clicking the "Close modal" button sets showModal to false and initiates the modal's exit animation.

This is a basic example, of course. You can customize the variants and animation properties to create different exit effects.

Conclusion

If you made it all the way here, congrats!

Hopefully, you've learned how easy and intuitive implementing exit animations using Framer motion is. Let's recap what we covered:

• We learned why we couldn't use plain CSS transitions to create exit animations in React.

• We learned how AnimatePresence ensures the exit animation plays before the element is removed from the DOM.

• We explored how to implement more advanced exit animations using custom easing functions, multiple properties, and transition delays.

• Finally, we built a simple modal component using all we learned in this guide.

Framer Motion is a powerful library; this guide has just scratched the surface! You can explore state changes and gestures and even build complex animation sequences. Check out the documentation here.

Remember, though, that animations should always be intentional. They can be a fantastic tool to guide users, communicate app state, and enhance the overall experience. But avoid going overboard – animations shouldn't slow down your app or become distracting. Aim for a balance that doesn't impede on user experience.

I'd love to see what you build with your new knowledge. Have fun, and thanks for reading!

I would greatly appreciate any constructive feedback you may have. Feel free to share your thoughts! I'm happy to write if you found this helpful and are interested in more Framer Motion-related content. In the coming weeks, you can also expect more blog articles exploring exciting web technologies I come across. I hope you had a lovely read. 🤍

Weeks later, upon launch, the website bore little resemblance to the original mockups. The fonts were no longer bold, the layout was confusing, the buttons were unresponsive, and the overall experience was frustrating. This is a common pitfall when design happens in isolation.

Collaboration in Design

At its core, successful design achieves a set of goals. This could be creating a product that's easy to use, a website that sells more items, or a space that inspires creativity. It requires creativity, functionality, and a deep understanding of user needs. This can only be achieved by bringing together the expertise of various design disciplines through collaboration.

Having worn both hats – product designer and frontend developer – throughout my career, I've gained a unique perspective on the importance of collaboration in achieving successful design outcomes. From brainstorming initial concepts to iterating on prototypes, encouraging open communication and understanding between designers and developers is vital for creating user-centered experiences that are both visually appealing and technically sound.

But fear not, fellow designers and developers! This article isn't here to dwell on my frustrations. Instead, I want to share some practical tips and strategies to bridge this communication gap and promote a truly collaborative design process.

Benefits of Collaboration

I've always believed successful design isn't a one-man show. In my career, I've witnessed firsthand the magic that happens when designers, developers, and other stakeholders come together.

Collaboration brings together individuals with diverse backgrounds, creating a richer pool of ideas and fostering a deeper understanding of the entire design process. Here are ways collaboration unlocks the true potential of design:

• Improved Problem-Solving: Collaboration isn't just about sharing ideas; it encourages communication and brainstorming. When designers, developers, and other stakeholders come together, they can tackle design challenges from multiple angles, identifying potential issues and developing creative solutions that might not have emerged from individual efforts.

"None of us is as smart as all of us."

- Ken Blanchard

• Enhanced User Experience (UX): A website or app might look fantastic but fails if it's challenging to navigate or doesn't meet user needs. Collaboration, particularly between UI/UX designers and developers, ensures that the final product is not only visually appealing but also functional, user-friendly and addresses the core needs of the target audience.

• Feasibility and Efficiency: Early collaboration helps identify potential roadblocks early on. For instance, a developer might point out limitations in a design concept, allowing the team to adjust their approach before significant time is wasted. This proactive approach streamlines the design process and ensures the final product is feasible within the project's technical constraints and timelines.

• Reduced Errors and Revisions: Clear communication and collaboration minimize misunderstandings and rework later in the design process. By openly discussing ideas and ensuring everyone is on the same page, the team can avoid costly revisions and ensure a smoother design workflow.

Examples of Collaboration in Action

Let's see how collaboration brings design to life:

My personal experience:

Remember that frustrating website with unresponsive buttons and a confusing layout? The client, rightfully so, was unhappy with the final result, so they kindly requested a revision. I felt a deep sense of responsibility to fix the situation. I realized the problem was that I was unaware the developer would use WordPress to build the designs, so they couldn't implement them fully.

With this in mind, I made slight changes in the design to accommodate this challenge, and the developer pointed out potential snags early on. When the redevelopment began, I frequently shared feedback with the developer, ensuring they could translate the visual intent into a functional, user-friendly web experience. This time, the website launch was a breeze. The final product surpassed everyone's expectations, and the client was pleased.

A more general scenario:

Picture a team working on revamping an e-commerce website. The UI/UX designer proposes a visually attractive product page layout. They also suggest incorporating user reviews and clear filtering options to improve user experience. The developer chimes in, highlighting technical considerations for implementing these features while maintaining optimal website performance. This collaborative approach ensures the final product is aesthetically pleasing, user-friendly, and functionally sound.

Keys to Effective Collaboration

Collaboration is a powerful tool, but it thrives on a foundation of clear communication and organization. Here are some tips to ensure your design team collaborates effectively:

• Establish Clear Communication Channels: Define preferred methods for communication, be it email, instant messaging platforms, or project management tools. Encourage open communication and active listening to ensure everyone's voice is heard.

• Utilize Collaborative Tools: Design software with collaborative features like Figma or Mural allows team members to work on designs simultaneously, enabling real-time feedback and iteration.

• Set Up Regular Team Meetings: Schedule regular meetings (weekly or bi-weekly) to discuss project progress, address challenges, and brainstorm ideas. These meetings can be a mix of formal presentations and informal brainstorming sessions.

• Define Roles and Responsibilities: Clearly outline the roles and responsibilities of each team member. This helps avoid confusion and ensures everyone focuses on their area of expertise while understanding the bigger picture.

• Embrace Feedback: A successful design is rarely born from a single vision. Encourage team members to provide constructive feedback on each other's work. Focus on the design, not the individual, and continuously use feedback to improve the final product.

• Celebrate Successes: Take time to acknowledge and celebrate collective achievements. Recognizing teamwork motivates individuals and strengthens the collaborative spirit within the team.

Challenges of Design Collaboration

While collaboration offers many benefits, achieving a truly collaborative design environment is challenging. In my experience, some of the biggest roadblocks to consider are:

• Communication Gaps: Design teams often comprise individuals with diverse backgrounds and communication styles. UI/UX designers might use terminology unfamiliar to developers or vice versa. This can lead to misunderstandings and hinder effective communication.

• Differing Priorities: Natural tensions can arise when designers prioritize aesthetics and user experience (UX) while developers focus on technical feasibility and project timelines. Finding a healthy balance between these priorities requires clear communication and a shared understanding of the project goals.

• Lack of Trust or Respect: For true collaboration to flourish, team members must have a foundation of trust and mutual respect. Without it, individuals might hesitate to share ideas or offer constructive feedback, hindering the creative process.

• Confusing Ownership and Responsibility: In a collaborative environment, it's essential to clearly define roles and responsibilities for each team member. Ambiguity can lead to confusion about who owns specific tasks or design elements, potentially causing delays and rework.

• Information Silos: Without a central platform for sharing ideas and updates, information can get siloed within individual disciplines. This can lead to a disconnect between design decisions and their technical implementation.

Conclusion

Today, collaboration is no longer a luxury; it's a necessity. By bringing together the diverse perspectives of designers, developers, and other stakeholders, teams can create solutions that are not only aesthetically pleasing but also functional, user-friendly and achieve project goals.

The benefits of collaboration extend far beyond the design phase itself. Effective collaboration streamlines the design process, reduces errors, and promotes a more innovative and productive design environment. So, the next time you embark on a design project, remember: collaboration is key.

By implementing the tips I outlined here and encouraging a collaborative spirit within your team, you can unlock the true potential of design and create experiences that truly resonate with your users.

I would greatly appreciate any constructive feedback you may have. Feel free to share your thoughts! If you found this helpful and are interested in more design-related content, I'm happy to write. In the coming weeks, you can also expect more blog articles exploring exciting web technologies I come across. I hope you had a lovely read. 🤍

In this article, you’ll see a simple example of how to integrate Google Maps into a React project. However, we’ll start by discussing why you might want to do so and some advanced Google Maps features you can use. If you prefer, you can jump ahead to the tutorial — make sure to check out the demo project’s source code as well.

Using Google Maps in React

There are a number of reasons why you may choose to integrate Google Maps into your React app. We’ll be taking a look at one of the most popular ones. You can use them as a base for other, more complex cases if you desire.

• Enhanced User Experience (UX): Google Maps is a familiar and user-friendly platform for visualizing locations. Integrating it into your React app allows users to easily explore geographical data, navigate places of interest, and understand spatial relationships.

• Location-based Functionality: Google Maps unlocks a wide range of location-based functionalities for your React app. You can display user locations, track deliveries, visualize sales data on a map to identify trends, or even create real-time route planning and navigation features.

• Increased Engagement: Interactive maps are inherently engaging. Users can zoom in and out, explore different map views, and discover new information. This interactivity can keep users engaged with your application for longer periods.

• Data Visualization: Google Maps can be a powerful tool for data visualization. You can use markers, heatmaps, and polylines to represent various types of data on a map, allowing users to gain valuable insights from geographical patterns.

React Google Maps

For React developers, like myself, seeking a first-party solution for integrating Google Maps, the vis.gl/react-google-maps library stands out as a compelling choice. This official offering from the Google Maps Platform team simplifies the process of adding interactive maps to your React application.

It was first provisioned by the Google Maps Platform team, in order to provide solid integrations between React and the Maps JavaScript API. The design of vis.gl/react-google-maps draws inspiration from the successful integration between react-map-gl and the map renderers based on mapbox-gl-js.

It's important to note that vis.gl/react-google-maps requires a valid Google Maps Platform API key for functionality. Additionally, while the library offers a decent set of core components, developers may need to interact directly with the underlying Google Maps JavaScript API for more advanced use cases.

Although vis.gl/react-google-maps is a compelling choice for integrating Google Maps with React, it's important to acknowledge that other popular libraries exist. One such alternative is google-maps-react, offering a familiar approach for developers accustomed to working with Google Maps APIs.

Regardless of which library you select, make sure it aligns with your project's requirements and your development preferences. In this article, you'll focus on using vis.gl/react-google-maps for consistency.

Get Started

Prerequisites:

• Node.js and npm (or yarn) installed on your system.

Project Setup:

1. Create a React project with Vite:

    npm create vite@latest react-google-maps-demo -- --template react-ts
    cd react-google-maps-demo
   

   This command creates a new React project with TypeScript support using Vite, a modern build tool.

2. Install Dependencies:

    npm install @vis.gl/react-google-maps
   

   This installs the vis.gl/react-google-maps library, allowing you to integrate Google Maps into your React application. This module comes with full TypeScript-support out of the box, so no additional module is required for the typings.

3. (Optional) Install Tailwind CSS:

    npm install -D tailwindcss postcss autoprefixer
    npx tailwindcss init -p
   

   If you plan to use Tailwind CSS for styling, follow these steps to install and configure it. Remember to configure your Tailwind configuration file (tailwind.config.js) according to your project's needs.

4. Start the development server:

    npm run dev
   

   This command starts the development server and opens your application in the browser:

Obtaining Google Maps API key

To use Google Maps features within your React application, you'll need to obtain an API key from the Google Cloud Platform (GCP). They have several API’s to use with the Maps API but for now, you’ll need just the Maps Javascript API to get started for the map. So ensure that the Maps Javascript API is enabled in your console.

Steps to Acquire an API Key:

1. Create or Access a GCP Project: If you don't have an existing project, create one on the GCP Console.

2. Enable Required APIs: Navigate to the "APIs & Services" section in the Google Maps Platform and enable the following APIs for your project:

   • Maps JavaScript API

3. Create an API Key: In the "Credentials" section of the Google Maps Platform, create a new API key. Consider restricting this key to only allow usage for your specific project for better security.

Never commit your API key to a public repository like Github. Instead, create a .env.local file in your project's root directory and add the following line, replacing <your API key here> with your actual key:

VITE_REACT_GOOGLE_MAPS_API_KEY=<your API key here>

Displaying a Basic Map

In this section, I'll walk you through rendering a simple Google Map in your React application using vis.gl/react-google-maps.

1. Import Necessary Components:

    import { APIProvider, Map } from '@vis.gl/react-google-maps';
   

   You import the APIProvider and Map components from the library.

2. Set Up theAppComponent:

    const App = () => (
      <APIProvider apiKey={import.meta.env.VITE_REACT_GOOGLE_MAPS_API_KEY}>
        <Map
          style={{ width: '100vw', height: '100vh' }}
          defaultCenter={{ lat: 22.54992, lng: 0 }}
          defaultZoom={3}
          gestureHandling={'greedy'}
          disableDefaultUI={true}
        />
      </APIProvider>
    );
    export default App;
   

   • The APIProvider component wraps the Map component and provides the necessary context and functionality for using Google Maps within your React application. It requires your API key as a prop.

   • The Map component itself defines the map element. You configure its appearance and behavior using props:

     • style: Sets the width and height of the map container.

     • defaultCenter: Specifies the initial location of the map using latitude and longitude coordinates (here, centered near the equator).

     • defaultZoom: Defines the initial zoom level (a higher value represents a closer view).

     • gestureHandling: Controls how the map interacts with user gestures like touch or panning. Here, 'greedy' prioritizes map interactions over page scrolling.

     • disableDefaultUI: Removes the default user interface elements provided by Google Maps (zoom controls, map type options, etc.).

3. View the Map:

   With these components in place, our application should render a basic interactive map.

Adding InfoWindows and Markers

InfoWindows

The InfoWindow component is a part of the Google Maps API provided by the @vis.gl/react-google-maps package, which allows you to create information windows on the map. Information windows are pop-up windows that appear above the map at a specific location and provide additional information about a particular point of interest.

The InfoWindow component is used as a child component within the Map component. It takes several props, but the most important one is position, which specifies the geographic coordinates (latitude and longitude) where the info window should be displayed on the map.

The code snippet below demonstrates how to add an InfoWindow with the content "Hello World!" positioned at specific coordinates:

import { APIProvider, InfoWindow, Map } from "@vis.gl/react-google-maps";

const App = () => (
  <APIProvider apiKey={import.meta.env.VITE_REACT_GOOGLE_MAPS_API_KEY}>
    <Map
      style={{ width: "100vw", height: "100vh" }}
      defaultCenter={{ lat: 53.54992, lng: 10.00678 }}
      defaultZoom={13}
      gestureHandling={"greedy"}
      disableDefaultUI={true}
    >
      <InfoWindow position={{ lat: 53.54992, lng: 10.00678 }}>
        Hello World!
      </InfoWindow>
    </Map>
  </APIProvider>
);

export default App;

With these components in place, our application should render a map with an information window saying "Hello World!".

Marker

The Marker component is a part of the Google Maps API provided by the @vis.gl/react-google-maps package, enabling you to place markers on the map to indicate specific points of interest or locations.

While InfoWindows provide details, markers visually represent points of interest on the map. You can use the Marker component from vis.gl/react-google-maps to add markers. The usage is similar to InfoWindows, with a position prop and optional customization options like icons.

The code snippet below demonstrates adding a basic marker at specific coordinates:

import { APIProvider, Map, Marker } from "@vis.gl/react-google-maps";

const App = () => (
  <APIProvider apiKey={import.meta.env.VITE_REACT_GOOGLE_MAPS_API_KEY}>
    <Map
      style={{ width: "100vw", height: "100vh" }}
      defaultCenter={{ lat: 53.54992, lng: 10.00678 }}
      defaultZoom={12}
      gestureHandling={"greedy"}
      disableDefaultUI={true}
    >
      <Marker position={{ lat: 53.54992, lng: 10.00678 }} />
    </Map>
  </APIProvider>
);

export default App;

With our components in place, our application should render a map with a single marker. You can also render multiple markers if you need.

Advanced Markers

The AdvancedMarker component provides a more customizable alternative to the standard Marker component.

The AdvancedMarker component allows for extensive customization of the marker's appearance and behavior. You can apply custom styles, including complex layouts, backgrounds, borders, and shadows, to the marker using JSX/TSX, CSS classes or inline styles.

To use the AdvancedMarker component, it is necessary to add a custom mapId to the map options. The mapId prop in the Map component specifies the ID of the Google Map being rendered. This prop is particularly useful when working with styled maps or when multiple maps are present on the same page.

This example renders an AdvancedMarker with custom styles and an SVG element:

import { APIProvider, AdvancedMarker, Map } from "@vis.gl/react-google-maps";

const App = () => (
  <APIProvider apiKey={import.meta.env.VITE_REACT_GOOGLE_MAPS_API_KEY}>
    <Map
      style={{ width: "100vw", height: "100vh" }}
      defaultCenter={{ lat: 53.54992, lng: 10.00678 }}
      defaultZoom={12}
      gestureHandling={"greedy"}
      disableDefaultUI={true}
      mapId={import.meta.env.VITE_MAP_ID}
    >
      <AdvancedMarker
        position={{ lat: 53.54992, lng: 10.00678 }}
        className="w-[250px] bg-white flex flex-col items-center gap-1 py-3 px-3 rounded-xl shadow-xl"
      >
        <h2 className="text-[20px] font-medium">I am so customized</h2>
        <p>That is pretty awesome!</p>

        <svg
          className="absolute text-white h-10 w-full left-0 top-full"
          x="0px"
          y="0px"
          viewBox="0 0 255 255"
          xmlSpace="preserve"
        >
          <polygon
            className="fill-current shadow-lg"
            points="0,0 127.5,127.5 255,0"
          />
        </svg>
      </AdvancedMarker>
    </Map>
  </APIProvider>
);

export default App;

The result should look like this:

React Google Maps Hooks

The useMap() and useMapLibrary() hooks are part of the vis.gl/react-google-maps package, which provides React hooks for integrating Google Maps functionality into a React application.

useMap()

The useMap() hook allows you to access and interact with the Google Map instance within your React component. It provides a way to interact with the map programmatically, such as changing the map's center, zoom level, or adding markers dynamically.

Example Usage:

import { useMap, APIProvider, Map } from '@vis.gl/react-google-maps';

const MyComponent = () => {
  const map = useMap();

  // Access and manipulate the map instance
  useEffect(() => {
    // Set the map's center and zoom level
    map.setCenter({ lat: 53.54992, lng: 10.00678 });
    map.setZoom(12);
  }, [map]);

  return (
    <APIProvider apiKey={import.meta.env.VITE_REACT_GOOGLE_MAPS_API_KEY}>
     <Map
       style={{ width: '100vw', height: '100vh' }}
       gestureHandling={'greedy'}
       disableDefaultUI={true}
     />
   </APIProvider>
  );
};

useMapLibrary()

The useMapLibrary() hook allows you to access additional libraries provided by the Google Maps JavaScript API, such as the Places API, Geoloction API, e.t.c. It provides a way to load and use these libraries dynamically within your React component.

Example Usage:

import { useMap, APIProvider, Map } from '@vis.gl/react-google-maps';

const MyComponent = () => {
  // triggers loading the places library and returns true once complete (the
  // component calling the hook gets automatically re-rendered when this is
  // the case)
  const map = useMap();
  const placesLib = useMapsLibrary('places');
  const [placesService, setPlacesService] = useState(null);

  useEffect(() => {
    if (!placesLib || !map) return;

    setPlacesService(new placesLib.PlacesService(map));
  }, [placesLib, map]);

  useEffect(() => {
    if (!placesService) return;

    // ...use placesService...
  }, [placesService]);

  return (
    <APIProvider apiKey={import.meta.env.VITE_REACT_GOOGLE_MAPS_API_KEY}>
     <Map
       style={{ width: '100vw', height: '100vh' }}
       gestureHandling={'greedy'}
       disableDefaultUI={true}
     />
   </APIProvider>
  );
};

Conclusion

Hopefully, this article has equipped you with the foundation to integrate Google Maps into your React applications using vis.gl/react-google-maps. We've covered:

• Setting up a React project with the necessary dependencies.

• Obtaining a Google Maps API key for map interactions.

• Rendering a basic map with initial configuration options.

• Adding interactive elements like markers and info windows for points of interest.

• Using AdvancedMarker for better marker customization.

• Leveraging map hooks (useMap and useMapLibrary) for programmatic control and additional map libraries integration.

By effectively combining the power of Google Maps with the flexibility of React and the utilities provided by vis.gl/react-google-maps, you can create dynamic and informative map experiences within your React applications.

It's really important to consider error handling mechanisms in your React applications, especially when interacting with external APIs like Google Maps.

This is just the beginning! The Google Maps Platform offers a vast array of functionalities beyond what we've covered here. Explore the official Google Maps documentation to learn more about features like geocoding, directions, and more. Also, the vis.gl/react-google-maps library offers more components like MapControl and Pin, and other hooks like the useApiIsLoaded() and useApiLoadingStatus() hooks. You should refer to their documentation to learn how they work. Another resource I recommend you to check out is this Youtube Playlist from the Google Maps Platform team.

While vis.gl/react-google-maps is still in its early stages, I believe it has a lot of potential. Backed by a talented internal team and a growing community of open-source contributors, the library is definitely poised for significant development. I'm excited to see what new features and functionalities get included in upcoming releases!

This is my first technical article! 🥳

I would greatly appreciate any constructive feedback you may have. Feel free to share your thoughts! If you found this helpful and are interested in more Google Maps-related content, I'm happy to write on other features or components. In the coming weeks, you can also expect more blog articles exploring exciting web technologies I come across. I hope you had a lovely read. 🤍

But where do I start? Do I dive headfirst into the heart-pounding highs, or whisper about the quiet victories that warmed my soul? Maybe it's all about the faces, the laughter, the love – the threads that wove this year into a tapestry I never want to forget. Before the ink spills and the story unfolds, let me take a breath, dig through the attic of my mind, and piece together the puzzle of what has been. This won't be just a list of dates and events, but a story―a messy, beautiful, sometimes bittersweet ode to living life to the fullest.

Work/Career

Starting with my career feels fitting. It's the area of my life where I most believe I hold the reins, or at least, that's my usual refrain. Last year, I crafted a roadmap of goals for my professional journey. Can I honestly say I followed it? The answer, like most paths worth taking, has its twists and turns.

Crown

I couldn’t do a lot career-wise this year because of school. For half the year, I remained at Crown Branding Agency as a Product Designer but left in May. Leaving in May wasn't a dramatic exit, but it felt like closing a chapter. Crown, my first real "job," was a gift box of discovery. An amazing team, thrilling client projects―each one a stepping stone to carving my professional identity. The rest of the year? Unemployed. But I wouldn't call it empty. It was a forced pause, a space to sift through the dust of ambition and define what I truly craved career-wise.

Mono

One of the audacious goals I set for myself was to intern at a reputable tech company during my SIWES I IT. In May, I started applying to every tech company I knew. I sent out so many connection requests on LinkedIn, to as many as 5+ employees for every company I was interested in. In total, I reached out to over 20 tech startups, every thing was documented on a notion page I had created, but the replies? Crickets, mostly. Some of the employees I reached out to got back to me, most didn’t. Rejections, often disguised as "not hiring interns at the moment" or "we have no internship program to begin with," peppered my inbox, even when sprinkled with compliments on my work. It was a grueling process, even with the occasional pat on the back.

Then, fate (or a random Twitter tweet) intervened. Mono was launching an internship program! I was really excited when I saw this. I just dropped a comment and forgot about it totally.

The application process at Mono was a whirlwind. The first application link crashed under the weight of eager applicants, but I was determined not to miss this opportunity. I quickly jumped on the second link, fingers flying across the keyboard. The interviews were surprisingly engaging, even though I initially doubted my chances—there were so many talented candidates. But after a night of intense preparation, I faced the final round with newfound confidence. When the acceptance email finally landed in my inbox, it felt like the stars had aligned.

My heart pounded as I stared at the email subject line: "Congratulations! You've been accepted to the Mono Internship Program!" It was the culmination of months of relentless hustle, countless rejections, and one serendipitous tweet. Getting an internship at a top tech company had been my audacious goal, and against all odds, I'd actually done it.

My internship at Mono was really incredible. Mono's culture wasn't just about productivity—it was about fostering a sense of belonging and empowerment. I found myself surrounded by brilliant minds who were eager to share their knowledge and challenge each other to grow. I worked on really impactful projects with the other amazing interns and senior engineers. I learnt a lot from my time there, and I’d definitely do it again if I could.

FAANG? BIG 4? PHCN?

For the past 2 years, I’ve had my mind set one goal—to land an internship offer at an international company. The time for this finally came, but for some reason, I wasn’t ready. I had been occupied all through the year with school and my internship, that I wasn’t able to prepare for something that mattered a lot to me.

But this didn’t stop me. In October, I had started applying to internships. I applied to over 30 different roles in the span of 2 months. The entire process was even more stressful compared to that of my SIWES. Rejections piled up―some swift and impersonal, others lingering after online assessments and Hirevues.

Lies I told myself wouldn't stick. After ten "no's," the sting deepened. Top performances in OA stages? Nope, still rejections. It stung, oh it stung.

There were some roles where I performed really well in the OAs but I still got rejected, and it hurt bad. There are only 4 companies that haven’t rejected me yet, but I haven’t heard back from any of them in so long. Each morning, the inbox refresh ritual yields the same result: an empty void.

Forgetting is difficult, but I'm trying. Hope, faint yet stubborn, clings on. Because here's the truth: I tried. I poured my heart into it, and honestly, I think that matters.

Volunteering

“Sometimes you have to create the thing you want to be part of” ― Howard Schultz

That quote echoes deep within me, especially when it comes to volunteering in tech communities at Covenant University. It's not just about checking boxes; it's about building the future I dream of, a future where my university sparks innovation across Nigeria.

Currently, I actively co-lead three vibrant communities: Google Developer Student Clubs (GDSC), Microsoft Learn Student Ambassadors (MLSA), and Hebron Startup Lab (HSL) Creators Community. This year, we didn't just exist, we thrived! My fellow Student Ambassadors and I organized over 5 technical workshops, igniting the minds of 300+ fellow students. We even launched MLSA CU's first-ever Welcome Event, and let me tell you, it was electric! Witnessing the community blossom from 60 members to a 400-strong force fills me with immense pride. And guess what? I had the privilege of guiding two students into the MLSA program – their success fuels my own fire.

Speaking of fire, GDSC CU is on fire! In May, I became the Co-lead, and throughtout the year, we hosted over 5 events/workshops and even an ideathon! The energy there is contagious, and the people I work with? They're the secret sauce!

But there's more brewing. At HSL, the creators community has sharpened its vision, and we're cooking up some game-changing projects. Watch this space – you won't be disappointed!

Why do I pour my heart into these communities? Because I believe, with unwavering conviction, that Covenant University can be Nigeria's innovation hub. Imagine a place where every student is equipped with the digital skills to tackle our local challenges, head-on and hand-in-hand. That's the future I'm building, brick by brick, workshop by workshop, community by community.

Health

Physical Health

My physical health in 2023, well, let's be honest, it wasn't a victory lap. I fell sick quite a lot of times. I often had allergies that were tiggered by dust or cold. If any thing improved, I’d say its how often I abstained from carbonated drinks. I think I’ve gotten used to staying long periods without having to consume some form of soda. But once I slip back, it’s a disaster, I might end up taking enough soda to cover up all the times I abstained. My 2024 goal? Gym, here I come! It’s crazy how I’ve never been to the gym to workout before.

Mental Health

Omoo x100

Oh boy, my mental health this year was a wild ride. At the start of the year, I felt like I was looking through a kaleidoscope, everything seemed so fragmented and distorted. I was really struggling with finding clarity in my life. It really took time for me to find structure around me. School was one thing that took such a toll on my emotions. I was constantly judging my sanity for choosing to study this course.

But to say it was all doom and gloom would be a flat-out lie. Because in 2023, I laughed. A lot. I spent time with friends who always made me laugh. I made so many happy and hilarious memories with my friends and roommates, and anytime I look back at the time I spent with them, I can’t just help but smile.

So, yes, my mental health still has chapters left to write. But I'm no longer stuck in the first draft. I'm taking intentional steps, embracing wellness strategies like a warm blanket on a chilly day. And who knows, maybe by next year, the kaleidoscope will finally focus.

Finance

Earning

My finances were significantly better than last year. I earned more money this year than I ever have, and I’m proud of that. Sure, I aimed for Everest and landed on Kilimanjaro, but hey, closer to the clouds, right? Sacrificing some hustle for school may have slowed down the climb, but I'm definitely getting there. Next year, I'm going to make a lot more money, and I think I have a plan.

Investing

Now, investments? I think I did quite okay. Earning more money meant that I had more to invest. Currently I have a plan with Money Africa, so I get to speak with a financial advisor every once in a while. I’m really proud of how far I’ve come with my investments, I crossed triple digits in dollars this year. 🎉

Budgeting

This one was really tough for me because it was so hard. I honestly try to budget, but there are times you just find yourself overspending. I realized later on that this mostly a problem of how disciplined I was, and not how much money I had. I’ve been putting in more effort into keeping a budget, but mine is more flexible than strict. Flexible in the sense that I always have a strict amount of money that goes into savings and investment, and any other “important” thing at the time, and then the rest of money goes into surviving.😭

Saving

When it comes to savings, I want to say that I did well. But omo, the last couple months of the year, the only thing I was saving was myself. 💀

Relationships

Family

I spend most of the year in school, honestly this has been the case since secondary school because I attended a boarding school. But I did put in effort to communicate with my parents and siblings as often as I could. I am really fortunate to have my family members who tirelessly support me in everything that I do. Honestly there were a lot of times this year that I needed encouragement and my parents were always there for me. My brother is also one of the biggest reasons I have achieved quite a number of things career-wise, I’m really grateful for all the resources and guidance he’s provided me with. I’m also grateful that I spent this Christmas with every single member of my family in the same house in good health. I hope to be able to give back and contribute to my family’s well being next year.

Friends

I spent so much of my time alone this past year. Why? Because it’s how I’ve always lived my life. I’m not saying I don’t have friends or that I don’t like spending time with them, but I really enjoy my personal space. Although this was okay for the most time, other times, the silence stung. This year, the loneliness crept in a lot, a reminder that solitude, while cherished, shouldn't morph into isolation. I think things got better generally. I’m really grateful for the roommates I had in my 300 level Omega semester, my friends, including those from HSL, GDSC, and MLSA. I never get to tell them, but I really appreciate the time we spent, the memories we made and the jokes we laughed to. One of the things I’d love to do this year is to make more meaningful friendships and be a better friend to those already here.

Romance

"Omo guy, there's this babe I started talking to..." Yeah, that phrase got a fair workout this year. I think I’ve painfully gained more clarity as to the kind of things I’d want from a romantic relationship. I’d say it was all worth it, those pointless talking stages that never really went anywhere kind of mattered, and along the way I kind of realised why things haven’t been working out. This year, I’m focusing more on quality than quantity. I hope to meet attractive women with substance, character, and personality, and until that time comes, I’m learning how to be a better man.

Academics

From having my worst ever GPA at the start of the year to having my best ever GPA the next semester, I really saw things this year. My relationship with my academics is really weird. There are times when I’ve just felt like completely giving up on school, and times where I kind of enjoy the concepts I’m learning (rarely). Overall I’ve just realised that if I really want to do well academically, I’d have to sacrifice a lot of things. And the question I keep asking myself is—Is the juice worth the squeeze?

I’ve decided that I’m going to give my possible best to graduate with a first class CGPA, and if ever my best isn’t enough, then I know that I tried.

Learnings

Tech

I didn’t learn that many new technologies this year. My major goal was to get better at the ones I already use to the point that I could build anything I wanted. And build I did! I built a couple of projects this year, the most important was my portfolio website. I had lots of fun working on it, it was my first time using Framer Motion and GSAP. I also learnt Typescript this year, and I haven’t looked back ever since. I got better at React and Tailwind CSS too. But the real game-changer was my internship at Mono. Software engineering and product building went from blurry concepts to tangible experiences. I wasn’t able to get into backend development as I initially planned to, but trust me, it's on my radar for 2024. And oh, I started learning Three.js and Blender at the end of 2023, and it’s been exciting.

Personal life

Personal growth? This year, I made it my middle name (well, not officially, but you get the picture). I took some really important steps to ensure that all major aspects of my life were being developed and I was becoming more of a well-rounded person. Books, well, they deserve their own chapter (a chapter I wish I'd been reading more diligently in 2023!).

This year, I discovered the power of simply showing up. It wasn't about pushing through exhaustion or ignoring all other needs, but about being present and making a genuine effort, even when I felt uninspired. Sometimes, showing up meant forcing myself to focus in class, even when the lecturer's monotone lulled me to sleep. Other times, it meant opening a book, even if I struggled to focus. But each time, showing up, in whatever form it took, chipped away at resistance and paved the way for unexpected progress. It taught me that consistency, not intensity, is the key to growth. Showing up isn't always easy, but it's become my anchor, reminding me that progress often lies just beyond the edge of my comfort zone. As James Clear said―if you can get 1 percent better each day for one year, you’ll end up thirty-seven times better by the time you’re done.

A friend of mine once told me something that hasn’t left me ever since―Every action you take or don’t take has a consequence, whether good or bad, that you must accept. I realise that for every decision I make, I have to think to myself―would I be able to live with the consequence that comes from this? If I don’t read today, would I be fine with the queue of C’s in my result? Would indulging in this second bottle of La Casera be worth the self-reproach? The answer wasn't always easy, but the awareness sharpened my focus, guiding me towards the choices that aligned with my long-term goals.

What's next?

Don't you ever stop running, and don't you ever look behind you. All that exists is what's ahead. ― Secretariat

No resolutions, just daily revolutions. I'm ditching goals for systems, chasing sunsets instead of summits. This year's anthem is whispered words, not blaring pronouncements. I'll wander maps and minds, write stories on screens and faces, learn from books and laughter. Kindness will be my ripple, love my wildfire. Forget conquering, I'm savoring. Forget existing, I'm living. Welcome, 2024, let's dance.

I poured my heart into this, and I hope you had a good read! If you did, a like and comment would make my day! Thank you and have an amazing year. ❤️

This year has been pretty amazing, and I'm grateful for all the great experiences I've had. This is my first time doing an end-of-year review, and it's been cool to see how much more intentional I've become about my growth. There have been a lot of ups and downs this year, and while I'd love to focus just on the ups, that wouldn't give the full picture.

I officially became an adult this year when I turned 18 in April, but I still have a long way to go before I feel like one. There are still lots of areas where I have room to grow, like my finances, health, relationships, and career, so I feel like I'm just getting started on this whole adult thing.

What went well — The Good, Wins, and Successes

Here are some of my biggest wins this year:

• I started learning UI/UX design at the start of the year (actually back in December 2021, but I started taking it more seriously this year).

• I got my first actual job ever as a Product designer at an early-stage branding agency called Crown Branding Agency.

• At Crown, I worked on 3 real-life projects for clients. These projects have gone on to be built and deployed.👑

• I took time to work on my resume and started applying for internships at international companies and I got OAs (Online Assessments) at Google, JPMorgan, and Optiver.

• I started taking LeetCoding seriously, and I solved about 55 easy questions and 4 medium questions. I was also able to maintain a 25-day streak.

• I got accepted into the Microsoft Learn Student Ambassador program.🤩

• I came 3rd at the Microsoft Cloud Skills Challenge that was held in September.

• I was able to advance from a New milestone to Alpha and then to Beta Milestone after holding my first workshop.🚀

• I started the first Microsoft Student Community at Covenant University and we're now at about 60 members.

• I hosted 3 technical workshops for members of the community.

• I was appointed as the lead for the vanilla Javascript team in my 200-level omega semester at our university's Google developer Student Club. Our team was able to build a seafood restaurant website by the end of the semester which was pretty cool.✨

• I later got appointed as a member of the core team for the 2022/2023 session. I also offered to serve as the cohort lead for Reactjs. I got to work with these amazing people: James, Israel, Busola, Tobi, Awe, and Jesse.

• I started earning corporate money this year. I also learned a lot about investing and personal finance. I started investing and saving more money too.

• I got serious about coding again and started learning Javascript from scratch.

• I actually built a couple of cool things this year. I built :

  • A website that helps you shorten long URLs 🔗

  • An image generator website that allows users to generate, combine, and download images of an Alpaca 🦙

  • A web app that lets you check the current weather and forecast for the next 2 days in any city 🌦️

• I spent Christmas with my family all safe and sound.💕

• I ended the year with a First Class CGPA.

• I started getting a bit more serious with schoolwork.

• I attended DevFest Lagos.

• I learned a couple of new technologies like React, Next.js, and MaterialUI.

• I started learning more about myself and started reading more personal growth books.

What didn't go well — The Bad, Losses, and Imperfections

Here are some of my biggest losses this year:

• I lost my scholarship due to the carelessness of a lecturer. By the time I revalidated my result and got it remarked, it was already too late.

• I got rejected by all the companies I applied to. Most companies didn't even send OAs because my graduation date was too far (2025), and some because they weren't offering sponsorships to international students. I also failed my OAs with Google, JPMorgan, and Optiver, majorly due to my incompetence.

• Felt like a failure at some point for not getting invited to interviews.🫠

• I tried to read many "non-school" books this year but I never had the time to finish most of them. It's either I get distracted by work or something else while trying to read.

• I didn't get accepted into the GitHub Campus Expert program, even after putting so much effort into my application.

• I maintained a lot of my bad eating and posture habits for most of the year.

• After almost 2 months of grinding LeetCode, I started getting burnt out because I couldn't balance it with everything I was doing. I decided to "pause", but I found it hard to get back ever since.

• I didn't reach my savings goals because of my poor spending habits.

• The stock market showed me crazy shege.😭

• I didn't invest enough energy into my social life, and I kept on beating myself up so much about it.

• My CGPA dropped so badly, mainly because I fell ill during exams.

• I started lapsing a lot in school work because I was focusing most of my energy on my career and extracurriculars.

• Spent way too much time on social media, and it really affected my mental well-being.

• There were quite a couple of things I wanted to be and achieve this year, but I didn't.🫠

What did I learn — Moving Forward, Plans for 2023

Here are some things I learned:

I feel the most important thing I learned this year was that I always have to be intentional about my personal growth. The sad reality of life is that nobody is ever going to be able to do these things for you, most especially as an adult. The choices I make every day are always going to impact the person I become. I also learned that one of the most important skills I need to learn as an individual is self-discipline and the courage to do the things I have set to do.

Something I also realized this year is that there's more to me as a person than just "Tech and Programming". I've always been passionate about Fashion and Music and I want to put more effort into exploring my creative side.

Here are some of my plans for next year:

My utmost goal for 2023 is to be better than 2022

• Get beastly at UI design🧑🏿‍🎨

• Read at least 1 book every month (non-school books)

• Do my IT at a reputable tech company in Nigeria

• Bag an internship at an International company for my 400-level IT

• Grind more LeetCode and get pretty good at medium questions

• Invest in building more meaningful and genuine relationships

• Learn Typescript, NodeJS, TailwindCSS, Express.js, MongoDB, Framer motion, WebGL, and three.js.

• Build something cool with AI or Blockchain

• Recruit more people into the Ambassadors program

• Earn my first million💸💸

• Improve my social life, maybe even commit👀

• Increase my network and get to know more people

• Continue to impact the entire developers' community at Covenant University🦅

• Get into technical writing and release at least 10 articles before the end of the year

• Earn in dollars🤑

• Become a GitHub Campus Expert

• Receive an academic scholarship

• End the year with a First Class CGPA

• Take my health more seriously

• Save up to a million naira

• Start therapy🫂

• Spend more time with family and friends🧑🏿‍🧑🏿‍🧒🏿💕

  ---

I'm honestly grateful for all that was, and I can't wait for the amazing things that are to be.

Thanks for reading💕