How To Trigger Email Notifications On A Contact Form With Supabase

How to send emails with Edge Functions on Supabase

How to create a contact form with Supabase & Next JS

How to generate a dynamic sitemap for your Next JS website

How to create a Custom Route Blocking Modal in React

Twin.macro Tutorial for Beginners: Styling with Tailwind CSS and Emotion in React

How to create an Image Uploader using React and Cloudinary

Creating A Simple Collapsible Sidebar with JavaScript (No Framework Required)

How to Create a Simple Cookie Consent Pop-up for your Website

Over the past 2 months, I’ve had conversations about my Global Talent Visa application and felt an article would be the best approach (I love writing articles already) to share my story. Considering how little information is out there, I hope this helps someone with theirs.

My testimony was getting a Tech Nation endorsement in __2 days__. This article outlines my experience getting the Global Talent Visa, under __Exceptional Promise__, in October 2023 (applying from Lagos, Nigeria) and tips to send in a great application.

## Global Talent Visa
According to the Tech Nation website, “The Global Talent Visa enables the best tech talent from around the world to work in the UK’s digital technology sector, contributing their cutting edge expertise and creative skills”. This is a Tier 1 UK visa that lets you work and live in the UK.

Benefits include:
- The ability to change your job or start up on your own without needing to update your immigration status.
- Your spouse and any children under 18 can come with you.
- The total cost of application is only £716 per person (+ UK healthcare surcharge).
- Join a network of over 2000 visa alumni members, to share your skills, knowledge and opportunities.

To read more about eligibility for either Exceptional Promise or Exceptional Talent, visit the [official website](https://stagetechn.wpengine.com/visa-tech-nation-visa-guide/#eligibility-criteria).

## Background
Before going ahead, I am a Senior Frontend Engineer with over 5 years of experience at the time of writing this article, based in Lagos Nigeria. My evidence documents are tailored to __Frontend Development__.

I got to learn about the Global Talent Visa in 2021 when an announcement was made on Twitter, and decided to read about it. At the time, the requirements felt a bit overwhelming and I wasn’t enthusiastic about relocating to the UK yet. I remember watching a Youtube video by [Peace Itimi](https://youtu.be/P_QmVVzJz9U) explaining her experience and kept this opportunity at the back of my mind.

‍Preparing my application took about 5 weeks. Thankfully I had the support of 3 friends that had gotten the visa to help with reviews and conversations.

## Application
The Global Talent Visa application is divided into 2 stages.

### Stage 1
The first stage involves applying for __endorsement__ - this costs __£524__. As a tech professional, I applied under the [digital technology](https://www.gov.uk/global-talent-digital-technology) route to [Tech Nation](https://technation.io/). There are other routes available -  [Arts & Culture](https://www.gov.uk/global-talent-arts-culture) and [Academia or Research](https://www.gov.uk/global-talent-researcher-academic)

This stage involves filling the [online application form](https://www.gov.uk/global-talent/apply-from-outside-the-uk). The main documents you need in this state is your International Passport and a valid national identity card (optional). You’ll be required to fill in personal information and information about your parents in this step.

Then you’ll be asked to pay the application fee (£524) which is non-refundable, and asked to submit your documents to [Tech Nation](https://technation.io/global-talent-visa/) within a few days.

This is the list of the documents I submitted:

#### 1. CV
This was my regular CV which highlighted my technical skills, work history and volunteer experience

#### 2. Personal Statement
This was more like an essay to address my intentions. This is an outline of what I wrote:
- How my love for solving problems started at an early age
- My academic achievements from Primary school to Secondary school (Best WAEC result in Lagos State), and the University (BGS, Faculty of Engineering, UNILAG)
- My journey into Frontend Engineering and a brief summary of achievements both at work and contributions to the community (articles, mentorship etc.)
- What attracted me to the UK
- Why I wanted the Global Talent Visa specifically and what I planned to achieve with the opportunity
- Finally, where I’d love to work and live in the UK

Note that this essay must not exceed 1,000 words. Mine was about 996 words (cutting it close). I wrote this when I was done collating all my evidence, it just felt easier to write this last.

#### 3. Recommendation Letters
Thankfully, I had worked at 3 product-led companies. So I got recommendation letters from the CEOs of each company.

My letters were written ‍according to the guide and followed a similar outline to this:
- A brief introduction by the author
- How the author and I met and have worked together
- Some achievements the author noticed and comments about my character and work ethic
- Why the author considers me exceptional; and
- What the author thinks about my prospects in the UK and possible contributions to the UK digital economy.

A few things to note:
- You might need to jog the memory of whoever is writing the letter to ensure that some key details are not missed. 
- Feel free to share information about the visa guide. I shared the recommendation letter section of the [document checklist](https://stagetechn.wpengine.com/visa-tech-nation-visa-guide/#document-checklist) and [this guide](https://www.immigram.io/blog/how-to-write-the-perfect-recommendation-letter) to help each person write their letter too.
- To prove that each document didn’t originate from you, it needs to be signed digitally. In my case, I requested for each letter to be signed with [Docusign](https://www.docusign.com/)

Each recommendation letter had a page length of between 5-8 pages. This consisted of the letter’s body (less than 3 pages), the certificate from Docusign proving that I didn’t write it, and the PDF document of their LinkedIn page (instead of a CV). I merged these documents using [iLovePDF](https://www.ilovepdf.com/).

#### 4. Evidence Documents
I submitted a total of 10 evidence documents. 

I submitted the following documents to fulfill the __Mandatory Criteria__:
1. __High remuneration for services rendered__: In this document, I highlighted my salary at the time and show how this compared to the average Senior Frontend Engineer salary in Lagos. I added my offer letter and invoices of payment received for 4 different months as proof too.
2. __Publications__: Over my career, I had been writing articles to share knowledge and they came in handy in this application and they had garnered over 100,000 views in total. I had 8 technical articles, all on __Medium__, but the last 2 were also republished on __HackerNoon__ for a wider reach. In this document, I showed side by side the articles and their corresponding views (dates included). Thankfully, my last 2 articles were about Supabase, and the official account had posted about it on Twitter, so I included this to show the impact.
3. __Significant technical contribution (#1 Company)__: In this document, I wrote about my work at my most recent company as a Founding Engineer at Talentdrop (product-led organization) . The focus was majorly on innovation rather than impact because it was a startup. I included a few code snippets showing my Github history, Asana screenshots showing tasks assigned to me over time, progression of the product based on multiple iterations, and finally positive comments and compliments from the CEO and CTO in Slack conversations (with dates included).
4. __Reference Letter (#1 Company)__: To support my significant technical contribution, I requested a reference letter from the CTO of Talentdrop and she obliged. This was in the same format as the recommendation letters explained above.

I submitted the following documents to fulfill the __Optional Criteria 2 - Recognition outside work__:
1. __Mentorship__: In this document, I wrote about my track record as a mentor on ADPList from December 2022 because of the structured mentorship requirement. I had written some articles (in 2021 published in my online notes) about my experience as a Frontend Engineer, one of which serves as some sort of guide and included this. Finally, I had been mentoring informally since 2019 and included this to show track record - WhatsApp conversations (dates included) with 3 different mentees where we discussed concerns, shared wins and so on.
2. __Volunteering and Talks__: In 2019, I had built the website for Nielle’s Cookout (a Millenial/Gen Z event) whose theme was “How to rule your finances”. The website helped with ticket registration, vendor registration and information dissemination. I wrote about my experience as a volunteer - Software Engineer and also helped with sponsorship conversations with Flutterwave and PiggyVest. Fortunately, there were email threads, the website source code was live on Github, and there was a public directory of pictures from the event too with 500 attendees. I was also invited to speak virtually to a digital community group in 2021, where I gave a presentation about how to build an online portfolio. In 2022, I was invited to a Career day event at a secondary school (my alma mater). I shared the invitation letters, banners and media from both events

I submitted the following documents to fulfill the __Optional Criteria 3 - Impact__:
1. __Significant technical contribution (#2 Company)__: In this document, I wrote about my work at my first place of work, Formplus (product-led organization), as a Frontend Engineer. The focus was majorly on impact and how my work was instrumental to the business. I broke down my impact into about 5 different pieces of work, screenshots of the product’s progression over time and media mention of the company, and finally product announcements and positive comments from teammates and the CEO in Slack conversations (dates included).
2. __Reference Letter (#2 Company)__: To support my significant technical contribution above, I requested a reference letter from the Engineering Lead at Formplus (he had also moved on to another company) and he obliged. This was in the same format as the recommendation letters explained above.
3. __Significant technical contribution (#3 Company)__: In this document, I wrote about my work at Kora (product-led organization) as a Senior Frontend Engineer. The focus was majorly on impact also. I included media announcements of the work I had done that got launched after I had left and showed evidence to prove I made a significant impact. I included screenshots of certain product screens I worked on, iterations, and finally positive comments and compliments from teammates and the CTO in Slack conversations (dates included).
4. __Reference Letter (#3 Company)__: To support my significant technical contribution, I requested a reference letter from the CTO of Kora and he obliged. This was in the same format as the recommendation letters explained above.

A few things to note about these documents:
- Create an evidence list when you start, this will help guide you while updating the documents. I created a folder on google drive with subfolders to arrange my documents.
- It’s advised not to forge evidence because it’s wrong and can harm your chances.
- Don’t be ashamed to reach out to former colleagues to help get evidence of work you have done.
- Lean more towards storytelling, but be direct without unnecessary stories.
- Try to include as much as you can in the 3 pages limit and favor clear images (screenshots). I had to reduce margins in my document to fit copy and images. 
- Include links to external resources as a secondary option. For example, if you need to share a folder of additional videos/photos, publications, github repositories etc. They might not check these, but it’s good to have them.
- Try to format your document to look presentable and to emphasize certain information.
- I created a sample folder for some samples to have an idea of how mine was structured and formatted: [Global Talent Samples](https://drive.google.com/drive/folders/15caq-Y07P8lyf9F5x-GxFjRPTnbS1D4Q?usp=drive_link)

These are all the documents I submitted in my application. I submitted in the evening on October 4th and got endorsed on October 6th (2 days later) in the evening. The endorsement came in the form of an email.

Then I moved to the next stage.

#### Stage 2
This stage involves filling another [online application form](https://www.gov.uk/global-talent/apply-from-outside-the-uk). You might be required to fill in similar information as the application form in Stage 1. Ensure that you select ‘Initial application’ too if it’s your first time.

You’ll be required to pay the __visa fee__ - this costs __£192__. You’ll also have to pay the [healthcare surcharge](https://www.gov.uk/healthcare-immigration-application/pay) as part of your application - this is usually __£624 per year__ for each person applying (but it’s set to increase to £1,035 in early 2024). For a 5 years visa, you have to pay - £624 * 5 = £3,120. Note that you do not need to pay for the 5 years at once. I was advised to pay for 5 years at once by everyone that had gotten the visa though.

Afterwards, you’ll need to book an appointment for biometrics. I selected the Ikeja center in Isaac John, Lagos. I selected the “Self Upload” option instead of Assisted service and didn’t upgrade my selection when selecting a time slot. So this process was completely free.

I uploaded my __Passport data page__, __Endorsement letter__ (print the endorsement email) and my __Tuberculosis test certificate__. To upload my documents, I ensured that the documents were clearly visible and I named them appropriately. E.g “Adeola Adeyemo - Passport”. 

I took my Tuberculosis test at St. Nicolas hospital and it cost ₦60,000. It was one of the [recommended hospitals by UK Immigration](https://www.gov.uk/government/publications/tuberculosis-test-for-a-uk-visa-clinics-in-nigeria/tuberculosis-testing-in-nigeria). You can book an appointment [here](https://intranet.saintnicholashospital.com/uk-tb-screening).

My experience at the Visa center was seamless. I got there 1 hour before the appointed time of 9:15am, and left by 9:30am. I didn’t need to take anything other than my International Passport, its photocopy, and a printout of the appointment email. I had to pay about ₦9,800 (now ₦12,250) for home delivery of my International Passport. I got my Passport after 6 days.

Here are a few more things to note:
- All payments were made with a USD Card
- If you are applying for a dependent, you need to pay the application fee (endorsement), visa fee and healthcare surcharge for each person.
- Pick early appointment slots for the Tuberculosis test and Visa biometrics

## Final Thoughts
If you feel like you don’t have enough evidence, please give yourself time and don’t rush the process or fake anything. It’s always good to evaluate your chances early by creating a checklist and noting areas you haven’t done enough.

These might seem like a lot, but trust me that if you are consistent in your career about doing great work and also giving back to the community, it will be easier to put together an application.

I got a lot of help and support from friends while putting my application together, so I hope this can help anyone that’s considering applying or trying to decide whether to. 

For further reading, check out [the official guide](https://stagetechn.wpengine.com/visa-tech-nation-visa-guide/), [Anuoluwapo Sebiomo's story](https://www.sebiomo.com/post/my-technation-global-talent-endorsement), [Oyinlola Akindele's story](https://digitalmarketwoman.com/global-talent-visa/), [Ademola Adegbuyi's story](https://medium.com/@ooade/my-experience-applying-for-a-global-talent-visa-95d906e06925), and an article on [TechCabal](https://techcabal.com/2022/07/22/digital-nomads-how-creatives-can-japa-with-the-uk-global-talent-visa/).

Feel free to send a DM or connect on LinkedIn if you have questions. Wishing you the best.

*Header photo by [Lanju Fotografie](https://unsplash.com/@lanju_fotografie?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash) on [Unsplash](https://unsplash.com/photos/silhouette-of-man-holding-flashlight-BvAoCypqRXU?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash)*

A personal guide to the Global talent visa through Tech Nation

My Global Talent Visa Story

This marks the conclusion of my Supabase tutorial series. If you haven't done so already, please take a moment to check out the preceding articles, "[How to create a contact form with Supabase & Next JS (Part 1)](https://deolaj.com/notes/how-to-create-a-contact-form-with-supabase-and-next-js)" and "[How to send emails with Edge Functions on Supabase (Part 2)](https://deolaj.com/notes/how-to-send-emails-with-edge-functions-on-supabase)". For this article, we will continue using the same Supabase project and API keys.

In Part 1, we established a connection between our contact form and the Supabase table (`contacts`). In Part 2, we developed an edge function to send emails (`email`). However, our contact form and edge function remain unconnected.

In this tutorial, we tie everything we have learned so far. We delve into creating a database function on Supabase which interacts with our edge function (`email` from Part 2). Additionally, we'll explore the creation of a database trigger to invoke this database function whenever a new row is added to the `contacts` table. This establishes a direct link between the contact form and email notifications.

To follow along, a basic understanding of SQL is recommended, but no worries - I'll provide some explanations as we progress.

## Database functions
Within Supabase, [Database functions](https://supabase.com/docs/guides/database/functions) are essentially [SQL functions](https://www.postgresql.org/docs/current/sql-createfunction.html) supported in Postgres. These functions can be created either in the SQL Editor (as illustrated below) or directly on the Dashboard. For the sake of this tutorial, we'll opt to use the Dashboard rather than the SQL Editor.

![SQL Editor](https://res.cloudinary.com/dzpntisxj/image/upload/v1699878568/notes/November%202023/Screenshot_2023-11-10_at_12.03.24_PM_okvjc6.png)

### Create a Database function
Navigate to the `Database Functions` page on your project's dashboard, it should be identical to the screen below.

![Database Functions](https://res.cloudinary.com/dzpntisxj/image/upload/v1699878571/notes/November%202023/Screenshot_2023-11-10_at_10.10.23_AM_dujhk5.png)

Next, click on `create a new function` button to follow create a database function.

![Creating a new database function](https://res.cloudinary.com/dzpntisxj/image/upload/v1699878569/notes/November%202023/Screenshot_2023-11-10_at_10.25.44_AM_o9cwkq.png)

We call this function `send_contact_email`. Feel free to call it whatever you like.

We set the return type to `trigger` here because we need this function to be triggered by an update to our `contacts` table - this is called a __Trigger function__. The return type of a database function can be set to any return type from the dropdown though.

This function doesn't need any arguments, so that section is empty.

    begin
      select
        http(
          (
            'POST',
            'EMAIL_EDGE_FUNCTION_URL',
            ARRAY [http_header('Authorization','Bearer API_KEY')],
            'application/json',
            concat(
              '{"name":"',
              new.name,
              '", "email": "',
              new.email,
              '", "body": "',
              new.body,
              '"}'
            )
           ) :: http_request
        );

    return new;

    end;

As seen above, we use the `http` extension (more on this later) to send the values of the new table row: `name`, `email` and `body`, to our `email` edge function. Replace `EMAIL_EDGE_FUNCTION_URL` with the actual URL from your edge function dashboard and `API_KEY` with yours.

Switch on the advanced settings toggle to set the type of security you need, if applicable. I selected `SECURITY DEFINER` for the sake of this tutorial, but this depends on your use case.

![Advanced settings](https://res.cloudinary.com/dzpntisxj/image/upload/v1699878569/notes/November%202023/Screenshot_2023-11-10_at_10.25.11_AM_ukuzjp.png)

Once you make a selection, submit to create your function. The function should be visible on the list, as shown below.

![Database function created](https://res.cloudinary.com/dzpntisxj/image/upload/v1699880480/notes/November%202023/Screenshot_2023-11-13_at_2.00.51_PM_ljouzp.png)

### Enable HTTP Extension
To make API calls from our database function, __enable the `http` extension__ in the `Extensions Tab` of your Database. Read more about the [http extension](https://supabase.com/docs/guides/database/extensions/http?database-method=dashboard).

![Extensions tab](https://res.cloudinary.com/dzpntisxj/image/upload/v1699878577/notes/November%202023/Screenshot_2023-11-10_at_10.29.32_AM_hdmev0.png)

Next, we call our trigger function.

## Database Trigger
According to the Supabase documentation,

> "In Postgres, a trigger executes a set of actions automatically on table events such as *INSERTs*, *UPDATEs*, *DELETEs*, or *TRUNCATE* operations."

To call our trigger function, we need to create a trigger object that determines when the function is called. You can read more about this [here](https://supabase.com/docs/guides/database/postgres/triggers).

Thankfully, this can be done from the Dashboard on Supabase.

![Triggers Tab](https://res.cloudinary.com/dzpntisxj/image/upload/v1699878571/notes/November%202023/Screenshot_2023-11-10_at_3.20.48_PM_jtizto.png)

### Create Trigger
Creating a trigger is easy, click on the `create a new trigger` button.

![Creating a trigger](https://res.cloudinary.com/dzpntisxj/image/upload/v1699878570/notes/November%202023/Screenshot_2023-11-10_at_3.23.19_PM_l9q5kv.png)

![Creating a trigger](https://res.cloudinary.com/dzpntisxj/image/upload/v1699878574/notes/November%202023/Screenshot_2023-11-10_at_3.23.53_PM_vscn8u.png)

First, we name the trigger `send_contact_email`, same as the database function. Feel free to choose a name that suits your preferences.

In our case, we want the trigger to monitor the `contacts` table, and specifically aim to trigger email sending when a new row is added. Therefore, we select the `Insert event`. The trigger type is set to `After the event`, reflecting a personal preference, the alternative option is before the event. 

Next, we configure this trigger to run on each `Row` in an operation - this choice explains why we reference `new.name`, `new.email`, `new.body` in our database function earlier. This ensures that even in cases of a bulk insert operations, emails are sent for each entry in the table.

Finally, we select the function to trigger. You should see the `send_contact_email` function in the list of database functions. Submit the form to create your trigger, and you are done.

![Trigger created](https://res.cloudinary.com/dzpntisxj/image/upload/v1699878569/notes/November%202023/Screenshot_2023-11-10_at_3.35.05_PM_vvakob.png)

## Complete workflow
To understand the end to end flow,

- An entry is submitted on the Contacts form (Next JS)
- This creates a new row in the `contacts` table on Supabase (__from Part 1__)
- The `insert operation` calls the `send_contact_email` trigger
- The `send_contact_email` trigger calls its corresponding database function - `send_contact_email`.
- The `send_contact_email` function makes an API call to the `email` Edge function with the values  of the new row.
- The `email` edge function (__from Part 2__) sends an email to the provided email address.

To test whether it works, submit an entry to the contact form or directly on the `contacts` table, and the email submitted should receive an email notification. Alternatively, you can test this on the [demo page](https://supabase-tutorials.vercel.app/).

## Conclusion
It's worth noting that there are shorter alternatives to this approach. We have the option to directly call edge functions and database functions from the client, as demonstrated in the NextJS application in Part 1, without the need for a trigger.

Nevertheless, in the interest of introducing some of Supabase's products, I chose to present this approach in a 3-part series.

Feel free to share your suggestions in the comments too for others to learn.

Thank you for following along.

*Header photo by [Bill Jelen](https://unsplash.com/@billjelen?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/photos/m010U75wdxE?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)*


A simple tutorial on Database Functions and Triggers  -  Part 3

How to trigger email notifications on a contact form with Supabase

This is Part 2 of my Supabase tutorial series. If you haven't, please check out the previous article, [How to create a contact form with Supabase & Next JS](https://deolaj.com/notes/how-to-create-a-contact-form-with-supabase-and-next-js). We will use the same Supabase project and API keys.

In this tutorial, we learn how to create an edge function to send emails. We will walk through how to trigger email notifications when the `contacts` table has a new entry in the next article.

To follow along, you need basic knowledge of JavaScript. You can also check it out on [Github](https://github.com/DeolaJ/supabase-tutorials).

## Edge functions
"[Edge Functions](https://supabase.com/docs/guides/functions) are server-side TypeScript functions, distributed globally at the edge - close to your users. They can be used for listening to webhooks or integrating your Supabase project with third-parties [like Stripe](https://github.com/supabase/supabase/tree/master/examples/edge-functions/supabase/functions/stripe-webhooks)." 

We can deploy server-side code that works as API endpoints. If you have worked with Firebase or Netlify, this is similar to how Cloud functions and Netlify functions work.

### Initialize supabase locally
To create an edge function in our project, we need the supabase CLI. If you don't have this installed, follow the instructions [here](https://github.com/supabase/cli). __Check that you have the latest version installed__ too to avoid spending 2 days debugging like me.

    brew install supabase/tap/supabase

Next, initialize a supabase project and follow the instructions.

    supabase init

Next, link your supabase database to your local project. Replace `[reference_id]` with the project reference, you can check yours in the `General tab` of the project settings page. The database password is in the `Database tab` also.

    supabase link --project-ref [reference_id]

Once this is done, we should have a `supabase` folder at the root of our local project with the `config.toml` file.

### Create function
Next, we create an edge function named `email`.

    supabase functions new email

This creates an `email` function. This function is situated in `supabase/functions` folder. All our functions will be added to this folder.

The default email function should look like this. 

![default email function](https://res.cloudinary.com/dzpntisxj/image/upload/v1691666156/notes/August%202023/Screen_Shot_2023-08-07_at_12.28.35_PM_keq859.png)

Next, modify the `email` function to be functional. Feel free to use any email service you like. For the sake of this example, we will use [resend](https://resend.com/). Thankfully, there is a guide [here](https://supabase.com/docs/guides/functions/examples/send-emails).

![Email function](https://res.cloudinary.com/dzpntisxj/image/upload/v1691666521/notes/August%202023/Screen_Shot_2023-08-10_at_12.19.11_PM_qh1yd8.png)

A few things to note here. First, notice the email, body, and name values from our `contacts` table in Part 1 of this series. We also use `RESEND_API_KEY` from our environment variables (more on this in the next section). 

### Environment variables
We need to set the `RESEND_API_KEY` variable to use. There are two ways to do this. 

The first involves creating an `.env` file in the root `supabase` folder. Remember to add `.env` to your `.gitignore` file. This will add all the variables in the `.env` file.

    supabase secrets set --env-file ./supabase/.env

Alternatively, you can set the variables individually

    supabase secrets set RESEND_API_KEY=value

Note that some environment variables have been set by default. To view all environment variables, run

    supabase secrets list

For a more comprehensive explanation, check the [functions guide](https://supabase.com/docs/guides/functions/secrets) or [CLI documentation](https://supabase.com/docs/reference/cli/supabase-secrets).

### Deployment
To deploy the `email` function, simply run

    supabase functions deploy email

Feel free to invoke your function in your terminal to test. Replace the `FUNCTION_URL` and `API_KEY` with yours.

    curl --request POST 'FUNCTION_URL' \
      --header 'Authorization: Bearer API_KEY' \
      --header 'Content-Type: application/json' \
      --data '{"email":"hello@deolaj.com", "name":"Test person", "body":"This is a test email"}'

To invoke your function locally, check this [guide](https://supabase.com/docs/guides/functions/local-development).

## Conclusion
I hope this tutorial helps to get started with edge functions on supabase. 

Next, we learn how to trigger email notifications when our contact form (from Part 1) gets a new submission.

Follow along to Part 3, [How To Trigger Email Notifications On A Contact Form With Supabase](https://deolaj.com/notes/how-to-trigger-email-notifications-on-a-contact-form-with-supabase).

*Header photo by [Carl Nenzen Loven](https://unsplash.com/@archduk3?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/photos/v01fum9ZgJw?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)*


A simple tutorial on Edge Functions  -  Part 2

How to send emails with Edge Functions on Supabase

[Supabase](https://supabase.com) is an open source Firebase alternative and helps you to build faster and focus on your products. As someone that likes to test out ideas once in a while, Firebase and Supabase have been interesting to work with.

In this tutorial, I will walk you through an introduction to Supabase, setting up a Database table, creating a simple contact form in Next JS, and putting it all together.

I assume you have basic knowledge of Next JS to follow along.

To follow along with the Next JS project, check it out on [Github](https://github.com/DeolaJ/supabase-tutorials). The contact form demo is also [live](https://supabase-tutorials.vercel.app/).

## Supabase
Creating a Supabase account is pretty simple. Visit [Supabase](https://supabase.com) and click on the "Start your project" button.

First, create an organization 

![Create supabase organization](https://res.cloudinary.com/dzpntisxj/image/upload/v1679931445/notes/March%202023/Screen_Shot_2023-03-27_at_4.30.51_PM_iuvm9n.png)

Next, create a project

![Create project](https://res.cloudinary.com/dzpntisxj/image/upload/v1679931444/notes/March%202023/Screen_Shot_2023-03-27_at_4.31.51_PM_gan36x.png)

On the next screen, your project API keys will be displayed. Copy the public key and keep it aside. We will use it later in this tutorial.

![Project API keys](https://res.cloudinary.com/dzpntisxj/image/upload/v1679931444/notes/March%202023/Screen_Shot_2023-03-27_at_4.32.22_PM_nkmpdn.png)

Copy the URL under the Project Configuration section too. This will be your base URL for the project.

![Project config](https://res.cloudinary.com/dzpntisxj/image/upload/v1681152118/notes/March%202023/Screen_Shot_2023-03-27_at_4.32.29_PM_mfbbge.jpg)

Next, we will create a table for the contact form.

### Create a Database table
In the section below, click on Database

![Database](https://res.cloudinary.com/dzpntisxj/image/upload/v1679931444/notes/March%202023/Screen_Shot_2023-03-27_at_4.32.53_PM_b1tkgf.png)

A blank page will be displayed. Click on the button to create a new table and follow the steps. 

![Blank DB](https://res.cloudinary.com/dzpntisxj/image/upload/v1679931444/notes/March%202023/Screen_Shot_2023-03-27_at_4.33.05_PM_yig8oo.png)

Add as many columns as you'd like. For the sake of this tutorial, we will create a table named "contacts" with the following columns. 

Note that the column types are important and the RLS policies section is checked. This controls access to our table.

![Table columns](https://res.cloudinary.com/dzpntisxj/image/upload/v1679931445/notes/March%202023/Screen_Shot_2023-03-27_at_4.34.29_PM_fujvxz.png)

Next, we write a simple policy for our table. Without a row level policy, we will not be able to read, update or delete rows on our table.

On our blank table, click on "No active RLS policies" on the extreme right of the table.

![Blank Table](https://res.cloudinary.com/dzpntisxj/image/upload/v1679931446/notes/March%202023/Screen_Shot_2023-03-27_at_4.34.58_PM_xjxpk6.png)

Create a new policy and select "For full customization".

![RLS screen](https://res.cloudinary.com/dzpntisxj/image/upload/v1679931445/notes/March%202023/Screen_Shot_2023-03-27_at_4.35.12_PM_rwamqj.png)

For the sake of this tutorial, we will enable access to all operations on our table. To read more about Row level security, visit this page in the [documentation](https://supabase.com/docs/guides/auth/row-level-security).

Follow the steps below.

![Enable access](https://res.cloudinary.com/dzpntisxj/image/upload/v1679931445/notes/March%202023/Screen_Shot_2023-03-27_at_4.35.39_PM_rjsihq.png)

![RLS summary](https://res.cloudinary.com/dzpntisxj/image/upload/v1679931445/notes/March%202023/Screen_Shot_2023-03-27_at_4.35.45_PM_tttvbw.png)

We are all set to create our contact form now.

## Contact form
To follow along with the Next JS project, check it out on [Github](https://github.com/DeolaJ/supabase-tutorials).

Create a simple Next JS project

    npx create-next-app contact-form
    npm install formik yup @supabase/supabase-js

We install a few dependencies to help create the contact form and to interact with our supabase table. 

To start, we create the supabase client in our next JS application using the [supabase-js](https://www.npmjs.com/package/@supabase/supabase-js) library. I added the Supabase base URL and our project's public key to the `.env` file to be used here. There is an example `.env` file in the github project.

    import { createClient } from "@supabase/supabase-js";

    const supabase = createClient(
        process.env.NEXT_PUBLIC_SUPABASE_URL,
        process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY
    );

    export default supabase;

Next, we create a simple contact form with the following schema

    ...

    const ContactSchema = Yup.object().shape({
        name: Yup.string().max(140, "Too long!").required("Required."),
        email: Yup.string().email("Invalid email.").max(140, "Too long!").required("Required."),
        body: Yup.string().max(280, "Too long!").required("Required."),
    });

    ...

Any kind of form works here. I chose formik for convenience. 

![Contact form](https://res.cloudinary.com/dzpntisxj/image/upload/v1681117389/notes/March%202023/Screen_Shot_2023-04-10_at_10.02.13_AM_ejyawr.png)

Next, we create the `handleSubmit` function to interact with our supabase table.

![Submit handler](https://res.cloudinary.com/dzpntisxj/image/upload/v1681117389/notes/March%202023/Screen_Shot_2023-04-10_at_10.02.35_AM_s2uy7z.png)

The supabase client is used to insert a new row into the exact table we created (contacts). If this works well, you should see the new row on your table.

![Table row](https://res.cloudinary.com/dzpntisxj/image/upload/v1681117730/notes/March%202023/Screen_Shot_2023-03-30_at_3.08.45_PM_cnmxxx.png)

### Using React Query 
Alternatively, you can use this with React Query.

First, create a hook

![Contacts hook](https://res.cloudinary.com/dzpntisxj/image/upload/v1681117988/notes/March%202023/Screen_Shot_2023-04-10_at_10.10.55_AM_df647o.png)

Then call the hook inside your contact form,

    ...

    const { mutateAsync: submitFormAsync, isLoading: isSubmittingForm } = useUpdateContacts();

    ...

Then use this in your `handleSubmit` function instead

![Hook function](https://res.cloudinary.com/dzpntisxj/image/upload/v1681117979/notes/March%202023/Screen_Shot_2023-04-10_at_10.12.23_AM_qxvubs.png)

### Conclusion
Note that for free accounts on Supabase, the project is paused after 7 days of inactivity.

I hope this tutorial helps to get started with supabase. This is part 1 of my Supabase and Next JS series.

Follow along to Part 2, [How To Send Emails With Edge Functions On Supabase](https://deolaj.com/notes/how-to-send-emails-with-edge-functions-on-supabase).

*Header photo by [Annie Spratt](https://unsplash.com/@anniespratt?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/photos/goholCAVTRs?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)*

An introduction to Supabase - Part 1

Hey hey, my go-to greeting phrase. 

It's the end of yet another year and all I can say is "Thank you, God" because a lot of things happened in the past year. As an adventurer, I embraced a journey into the unknown with so much zeal. Why not?!

Hollup! Wait a minute. I'm sure you are wondering what I meant by "damaged my twitter timeline". The answer is NFTs. I got introduced to NFTs in 2021 and made a decision to sell my art as NFTs because it seemed exciting. 

Late 2021, I doubled down on it and took some momentum into the new year. Safe to say that this took up 3, yes 3 quarters of 2022. I mention it now because it was a big factor in how my year went. It was a crazy period of creating, minting, constantly trying to sell my work, talking on Twitter spaces, supporting, and connecting with artists and collectors. I had to create a twitter burner account to keep up with the tech space, startups, angel investing, and other interests.

Worthy of note, 2021 ended with a sad turn. My Metamask wallet was hacked and I lost all the earnings from my first NFT collection, [Inner Bliss](https://opensea.io/collection/inner-bliss). I remember the 31st, just bursting into a praise session in my room to get my mind off it and count my blessings. Thankfully, on the 1st of January, I woke up to another sale and an NFT airdrop - God's way of reassuring me of provision for the new year.

![Happy New Year](https://res.cloudinary.com/dzpntisxj/image/upload/v1672935724/notes/January%202023/2023_lm83pm.jpg)

There are days that I still can't believe the way 2022 went. The milestones, the tech ecosystem, the skills, NFTs, relationships and so on. Considering my last year in review post was in [2018](https://medium.com/@DeolaJ/my-relationship-with-2018-7c6c20050444), an update was long overdue.

I write down major highlights per quarter in my journal, but decided to compress them here. 

### So first, here are things that went well.

- On NFTs, I sold out out my first NFT collection, [Inner Bliss](https://opensea.io/collection/inner-bliss). Then released my second NFT collection, [Mono Girls](https://opensea.io/collection/mono-girls), and sold 5 pieces. I released my 3rd NFT collection, [Coats of many colors](https://opensea.io/collection/coats-of-many-colors), and sold 10 editions. Sold a few more during the year. I also explored minting on Foundation, Rarible and Holaplex, and gifted previous collectors. You can check my current [NFT portfolio](https://deolaj.com/nfts). 
- I gave back to the art community by buying artists works. Shout-out to [Imit0r](https://opensea.io/assets/ethereum/0xc436bb045438f503354ad753c38c523e74fde302/18), [Rueby](https://opensea.io/assets/ethereum/0x495f947276749ce646f68ac8c248420045cb7b5e/84901439496243989122001580409578473686984489226235043422268928745954030387205), [Sylvia](https://opensea.io/assets/ethereum/0x495f947276749ce646f68ac8c248420045cb7b5e/32414334295336705840135951721489235689852499155674528811742963793302346792970), [Uche](https://opensea.io/assets/ethereum/0x495f947276749ce646f68ac8c248420045cb7b5e/65473480863624487882894403837680716860897156199762530706586931009895603896321), [Phil](https://opensea.io/assets/ethereum/0x495f947276749ce646f68ac8c248420045cb7b5e/63737183651103569155637787982992285964472502636703167556870980351357177823233), [Oyi](https://objkt.com/asset/KT1NvWThJToRZJUmXHYhdRsXQg8J7kATbjsh/5), [Tolu](https://opensea.io/assets/ethereum/0x495f947276749ce646f68ac8c248420045cb7b5e/107492733245280540386750548208079523792633553622190018205956360369800564703237), [Karima](https://opensea.io/assets/ethereum/0x495f947276749ce646f68ac8c248420045cb7b5e/8258621695078163840279702063594124538840322427371397452140576473739174084618), [Timi](https://opensea.io/assets/ethereum/0x495f947276749ce646f68ac8c248420045cb7b5e/37834261293615451651859816745996665486388998420495154618239795283730454544394), [Erica](https://opensea.io/assets/ethereum/0x495f947276749ce646f68ac8c248420045cb7b5e/65207035965289824462866480774117156847844146421437797858338131909145845039114), [Ferb](https://opensea.io/assets/ethereum/0x495f947276749ce646f68ac8c248420045cb7b5e/113276308287793991278232066188238652149947599353700794842000438578187962679303), and [Amara](https://opensea.io/assets/ethereum/0x6a5e76837a826abfdb3678ff7e8082533063285d/1) for creating amazing pieces that caught my attention. Never bet against creators. Framed [Imit0r's piece](https://opensea.io/assets/ethereum/0xc436bb045438f503354ad753c38c523e74fde302/18) for my room too (with his consent of course 😅).
- I also bought into a lot of different NFT projects. Did I think this was a great idea? Not sure. However, I got to meet some amazing people and learn more about the NFT space. Later in the year, things got a bit rough in the space though because of the downturn.
- I exhibited "Safe Place", one of my pieces, at the COLDS Collective event in Lagos, Nigeria. I remember randomly walking in on 2 ladies admiring my drawing and it felt great to introduce myself and talk about it.
- I went out of my comfort zone in my art journey and collaborated with other artists - Tega, Balafama and Imit0r. It was my first time doing this and it was worth it.
- I threw a birthday party for the first time in a while and invited a few friends to come have a good time. Shout-out to my girlfriend for helping to put this together.
- Participated in a work marathon for a month early in the year. It was a first but we needed to complete some tasks. Got to bond with some colleagues and eat good food 🤭. Safe to say that we did well because the products are live now and being used 🎉
- Had to say goodbye to the amazing folks at [Kora](https://www.korapay.com) 🥲. I got an opportunity to join [Talentdrop](https://www.talentdrop.com) in April and couldn't turn it down. The decision wasn't an easy one to make and I had to ask a lot of people for advice. Took 2 months to round off work and got to onboard new team members. I also created a drawing of Kora's marketing avatar, [Didi](https://opensea.io/assets/matic/0x2953399124f0cbb46d2cbacd8a89cf0599974963/71712875375649320123581213756315120926396429803677627171263809430669274120217), as a gift (minted as an NFT and airdropped to people that requested). Shoutout to the awesome team at Kora that let me keep my health insurance for a while longer ❤️.
-  Officially resumed at Talentdrop in June and it's been an amazing journey. Sure I miss a few things at Kora, but I've had the opportunity to work with amazing tools on a day to day, brainstorm on interesting problems, and make some impact in the team. Excited to share what we've been building in a few weeks.
- Joined a gym and started my fitfam journey in late March. I cannot lie that it was easy to wake up by 6:30am to go to the gym, but going 3 days per week kept me consistent. I kept at this throughout the year and it has become a part of my weekly routine.
- Hit my financial goals for the year. This made it easier to give more to a lot of charitable causes. I also created a persona, Santa Deola 🎅🏾, and gave gifts to friends on their birthdays. Felt nice to give thoughtfully to people.
- Invested in financial literacy and made a lot of investments. Got into real estate also.
- Attended my grandfather's funeral in my village and got to spend time with family.
- Got my highest ever art commission request (0.15ETH), based off an NFT Project, [Everyday Goddesses](https://opensea.io/assets/ethereum/0x9176e11a412b6ef5e8ddb045909a14112f7782b2/1505).
- Invested more in my relationship and hit the 1 year milestone. Ensured that I was present, learned to be a better boyfriend and supported in all ways that I could. Spoiled my woman with outings, gifts, love and care.
- Went out more - restaurants, movies, festivals, art exhibitions, live plays. Just name it and I was buying tickets for 2 😂.
- Moved to a new place with my brothers and furnished it. If you have ever moved to a new place in Lagos, Nigeria, you will understand how difficult this process can be. So many stories from getting rejected because I wasn't married to the car breaking down once from overheating 🫠. Glad it's over for now.
- Checked up on my mentees periodically and joined ADPList as a mentor in the tech space. Figured that it was time to give back to a wider community. I wrote about my thoughts [on mentoring](https://deolaj.com/notes/on-mentoring) too.
- Started writing again. Here we are.
- Learned a lot of new technologies because of my new role as Founding Engineer. This pushed me to think of the whole spectrum and about speed.

### Here are things that didn't go well

While pursuing NFTs, I lost myself and purpose. I got so clouded by the goal of selling my work that it affected how I perceived myself. There were times where I was so exhausted scrolling through my Twitter timeline but I felt it was 'grinding'. I attached my self-worth to getting sales and being seen on Twitter. This broke me time and time again when sales didn't come (even when I lowered my prices) and engagement dipped. 

There were times I compromised on people I follow and conversations just to be viewed a certain way and I hated it. This happened for months, so it felt like I wasted my time, but I choose to see it as a learning point. I saw how easy it was to get burned out and have a dwindling mental health.

So I decided in late September to choose myself. I detached mentally and focused on things outside the NFT space. Took some time off creating to discover what I want to draw. Tried to discover myself anew by admitting that I had lost my way, set new goals in general, and became receptive to instructions from God again. And I'm glad that I did because I entered into the new year refreshed and ready to take it on.

![New year comic](https://res.cloudinary.com/dzpntisxj/image/upload/v1672985464/notes/January%202023/0DF82718-2FD4-4509-8607-1994E6EB815D_kj0fja.png)

*Check out other comics templates on [Balloon Comics](https://ballooncomics.com)*

### Over to the new year
This new year, I plan to switch things up. Focusing more on things and people I love, and putting more effort into my career and interests. My year of extraordinaire, with no room for mediocrity.

Here are my focus areas for 2023,

- Continuing to be a loving partner and investing in my relationship.
- Improving my relationship with God.
- Travel is also top of my list. Now that I can afford to, I plan to visit other countries and experience other cultures.
- Take care of my mind and body by continuing to engage in fitness activities, writing and art.
- Set bigger goals for my art. Mint again, apply to digital art exhibitions, connect with and support more artists.
- I plan to continue exploring investments in different sectors and diversifying my portfolio.
- Leveling up my finances. Choosing not to get comfortable in this area.
- Speaking. I didn't get to speak at any event in 2022. I hope this can change in 2023.
- Giving back to the tech community. Whether it's through donations, contribution to open source, mentoring, collaborating on projects etc.
- Investing in platonic friendships more. As someone that loves meeting new people and connecting, there's a tendency to neglect my older friends. So I want to be more conscious of this.

### December 2022 Reading list
Since there is no December 2022 roundup note, I decided to add this here.
- [You need more intimate friends outside of your relationship](https://medium.com/acid-sugar/you-need-more-intimate-friends-outside-of-your-relationship-be7618b08439)
- [Sales aren't about money but about the seller's mental health](https://medium.datadriveninvestor.com/sales-arent-about-money-it-s-about-the-seller-s-mental-health-2ee1bb006d57)
- [What a 50 year old sugar daddy wants you to know](https://medium.com/refinery29/im-50-a-ceo-a-former-sugar-daddy-here-s-what-i-want-you-to-know-c7eb0baaf5fb)
- [Don't fall into the trap most part time creators make](https://themakingofamillionaire.com/dont-fall-into-the-trap-most-part-time-creators-do-it-ll-be-your-undoing-5a2da74ce5b6)
- [Research shows why married people give horrible dating advice](https://medium.com/written-with-love/research-shows-why-married-people-give-horrible-dating-advice-5eff68e0a673)
- [Your coworkers are less ambituous](https://www.wsj.com/articles/your-coworkers-are-less-ambitious-bosses-adjust-to-the-new-order-11672441067)
- [How to care less about your financial goals](https://moneywithkatie.com/blog/how-to-care-less-about-your-financial-goals-in-the-new-year)
- [Where are Nigeria's executives?](https://medium.com/@drola/where-are-nigerias-executives-c87b1cbe8911)

### Final thoughts
Special thanks to everyone that made 2022 worthwhile 😇. My partner, friends, and family. 2022 won't have been amazing without the support, love and care I received.

Cheers to a better 2023 and more. Looking forward to sharing an update at the end of the year. Till next time...

*Header photo by [Kenta Kikuchi](https://unsplash.com/@kentas_photography?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/photos/487WP1XzB64?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)*

Explored quite a bit and damaged my Twitter timeline 😅

2022, the rollercoaster

First, thanks for choosing to use one of my comics templates 😊. It brings me joy to know that my templates can be of use to someone out there.

I created this guide to ensure that there is consistency with how the comic strips look over time. I will update this guide from time to time based on new ideas that pop into my head.

## Attribution
A simple caption referring to the original source is fine. For example, 
"*Check out other comics templates on [Balloon Comics](https://ballooncomics.com)*"

You can also tag me on social media when you post.

## Usage and Editing
Feel free to download any template from the [general list](https://ballooncomics.com) and edit as you deem fit without commercial benefit. 

To edit the comic templates to fit my theme, I have created a sample template on [Canva](https://www.canva.com/design/DAFVMgZJvgY/g9srlBGKZuLCJWRJBFhm4g/view?utm_content=DAFVMgZJvgY&utm_campaign=designshare&utm_medium=link2&utm_source=sharebutton) that you can duplicate to use. 
__*Please do not edit the original sample*__

Important things to note:
1. Create an account on Canva, visit the [link](https://www.canva.com/design/DAFVMgZJvgY/g9srlBGKZuLCJWRJBFhm4g/view?utm_content=DAFVMgZJvgY&utm_campaign=designshare&utm_medium=link2&utm_source=sharebutton) above, and duplicate the sample.
2. Replace the image with your desired template.
3. The font family used for the header is __Assistant Bold__, with font size of 44.1px. Change to your desired header.
4. The font family used for the body text is __One Little Font__. The font size varies based on usage.
5. Keep the social media handles on the comic strip for attribution.

## Final thoughts
I look forward to seeing your amazing comic strips on social media. 

Feel free to send an email to balloooncomics@gmail.com if you more questions.


A guide to editing and using my comics templates

Balloon Comics templates guide

## First mentee
I first explored mentoring during my 4th year in the university. There was a mentorship program designed by the student executives at my department. The goal was to foster relationships and knowledge sharing. It sounded interesting, so I signed up. 

After a few weeks, the list got out and I had my first mentee. I admit that I was nervous about it, but I embraced this new experience. I reached out and we set up an introductory meeting. Luckily, there was an event and it was convenient to attend and see her. We had a conversation and that was the beginning.

I invested some time in getting to know her, her aspirations, and we had more conversations over time. Academics, life as a student. Considering the scope of our conversations wasn't wide, I was confident enough to give answers. Over time, as I got to experience life, our conversations eveolved.

I can call it a success because our relationship is still on till today (since 2017). She's currently interning as a Frontend Engineer. 

I've had about 10 mentees ever since.

![Mentorship comic](https://res.cloudinary.com/dzpntisxj/image/upload/v1671098805/notes/December%202022/2A7A63FC-1BED-4A52-92F4-626CF859BD0D_w87fow.png)

*Check out other comics templates on [Balloon Comics](https://ballooncomics.com)*

## Mentoring. Why?
I learned that there is a knowledge gap and this is one way to handle it. Everyone is at a stage in their lives where they need some insights into the next. This has a wide range of topics like relationships, marriage, career, friendships, specializations, and so on. So anyone in the next stage can offer some guidance.

I have always envied teachers growing up. I wonder how it feels to watch their wards grow up. The decision to be part of someone's story brings fullfilment to me. Knowing that all the knowledge you acquired through sweat and tears 😅 can help the next person avoid going through same.

## My mentor search story
When I left the university, I worked as a Frontend Engineer, the first one on the team, at a startup. Basically, there were many days when I needed some guidance or just extra eyes on my work. I had colleagues in other teams, but there were domain-specific topics I needed help with.

So I asked my CEO, at the time, for assistance. He reached out to a few friends, but couldn't find someone available to mentor me. So I decided to follow a lot of people on Twitter, sent connection requests on LinkedIn to more experienced people. I also followed writers and publications on Medium. Basically took matters into my hands to learn from the online community. This is something I'm truly grateful for.

I got desperate and sent a cold DM to a popular influencer on Twitter. She had a startup of her own, but wasn't an Engineer. I felt that I could learn from her. She was so impressed by the format of my message, that she said she couldn't turn me down. We tried to meet on various occasions, but it didn't work out. So I decided to learn from afar.

Over time, I shifted my focus from looking for mentors to finding more people to mentor and guide. Paying it forward. If whomever is serious about it and shows me their resolve, I get moved to invest more of my time. There have been cases where people reached out and didn't return to give updates or ask follow-up questions, and that's fine.

## What to expect?
Take out time to outline what you want your mentor to help with. It will you choose someone and help track your growth in that specific area. Know what you want from the experience.

Don't fall into the trap of thinking a mentor will save you. The onus is on you to take charge of the situation and take action. Do not see a mentor as a saviour or place them on a pedestal. At the end, a mentor is also human with goals and aspirations.

Think of how you can also give some value to your mentor. Relationship building goes both ways. It could be a gift, offering to help with a few things or even caring about their wellbeing.

Do not outsource all of your thoughts to your mentor. When I found a mentor, I kept asking questions that I needed to figure out myself and outsourcing my thoughts to her and it didn't work out. I figured out that this was a problem later on.

Not all relationships need to turn to into mentorship. Sometimes, a few counselling sessions are fine.

## Final thoughts
Finding a mentor can be an arduous task, I admit. 

Alternatively, you can pick role models and learn from afar like I did. The personal relationship might not be there, but this can be a huge step in the right direction. And if you find a mentor, cherish that relationship 🫡.

I have approached mentorship with an open mind. I try not to push my thoughts or ideas but let the other person see it for themselves. I won't want my mentees to follow my path without conviction and lose their sense of self and individuality.

So it gives me great joy to know that my mentees are doing well for themselves. That, in itself, is enough for me.

---

Recently, I signed up as a mentor on [ADPList](https://adplist.org) and you can [book a session](https://adplist.org/mentors/adeola-adeyemo) with me

![ADP Image](https://res.cloudinary.com/dzpntisxj/image/upload/v1670917904/notes/December%202022/Your_Mentor_Swag_oqash9.png)

*Header photo by [William Bout](https://unsplash.com/@williambout?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/s/photos/guide?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)*


An interesting topic with many short stories.

On mentoring

The past month was slower than I expected but the main highlight was continuing my journey to self discovery. I had gotten caught up with other things and had not taken some time out for myself and my goals. This realization came from a random argument I had with my partner. Interesting source of enlightenment, but enough to open my eyes.

In a quest to continue on my journey, I decided on a few things: Start writing more to share my journey, pick up mentoring, and drawing more consistently with a plan. So far, this hasn't been going badly. At least, here I am. Fingers crossed on keeping this up 😅.

So here is cheers to November and all it offered, and happy new month!

![November 2022](//images.ctfassets.net/mbk9xpxjt44g/66pPuKL0WoYLKZ25ETZsMI/2acdbabb965a90be1c908ef908522f46/December_2022.PNG)

*Check out other comics templates on [Balloon Comics](https://ballooncomics.com)*

## Work
Started working a fast-paced startup 5 months ago, and it has been an interesting ride. From the weekly syncs with my CTO, to product meetings and user feedback updates. I have been exposed to a new side of the startup life that involves going on little adventures and learning on the way.

The major highlight in the past month was taking a step back to let people use our product. This brought some insights into the problem we are trying to solve. I guess the "User is King" and the earlier you find out the better.

I also got to improve my knowledge of SQL and write Database functions, and working with emails on Postmark. This isn't something that I could have predicted 5 months ago. Life has its way of surprising us.

One other thing I have learned is resilience in the face of adversity. I won't say I have done a lot of fire-fighting lately, but I've had to discard a lot of ideas and implementations for newer and proven ones. Doing this constantly has been humbling. 

> Those great ideas are only as good as the value they offer in the present.

Overall, this has been great for my growth. Plus I love adventures 🫡.

## Personal time
Last month was again filled with moments of memories. 

I got to experience the joy of art. I attended an [art exhibition](https://artxlagos.com/) in Lagos, Nigeria. You can watch an Instagram [reel](https://www.instagram.com/reel/CktRi1VDM-H/?igshid=MWI4MTIyMDE=) of the experience. So many amazing pieces of work on display and I could only imagine how the artists felt. Time to take my art more seriously 😂.

I have been attending a lot of weddings lately. A friend even suggested that I become a wedding influencer. Me? Infleuncer? No way. However, there might be some truth in that statement because I have an interesting lineup. Last month, I showed up for the wedding ceremony of a friend and it was a fun experience as usual. I made sure that my attire was in tune with the color of the day.

Then I went to the cinemas to see Black Adam and Wakanda Forever. I enjoyed the latter more, but both were enjoyable. Still can't get over the Wakanda Forever OST (favorite track is "Alone" by Burna Boy). I enjoy superhero movies a lot and like to indulge that interest. Looking forward to my next movie outing, Avatar 2.

I celebrated the 1 year anniversary of my relationship with a picnic. I always have a great time with her and this wasn't different. We found a private field in Lagos and had some alone time to play games and talk.

Afterwards, I attended a sendforth party for one of my close friends. Glad to hear that she's settled now. Change is part of life I guess.

## Learnings
One of the biggest highlights for me this year was picking up podcasts. They have become an integral part of my week (I won't say I'm consistent daily). I didn't keep track of the podcasts episodes that caught my attention last month, but I will give a shout-out to my favorites - [I said what I said](https://open.spotify.com/show/3AGe43ZNWzBplppVCmPc2b?si=8ae2772a5a4147a4), [On Purpose with Jay Shetty](https://open.spotify.com/show/5EqqB52m2bsr4k1Ii7sStc?si=e369317e6dd44a95), [The Money with Katie Show](https://open.spotify.com/show/3KyldJHhXZPr8ERjKDASBh?si=d25e063c70cf4540), [Diary of a CEO](https://open.spotify.com/show/7iQXmUT7XGuZSzAMjoNWlX?si=71f58c9a605e470a).

Aside from podcasts, check out some notable articles I read in the past month:
- I love the Imperfectionist email series, check out these articles and subscribe if you love them: [In your own way](https://ckarchive.com/b/xmuph6hrd9re0) and [Everyone is still winging it](https://ckarchive.com/b/r8u8hoh2v34p3)
- Found the Money with Katie website earlier in the year when I needed some advice on how to manage my finances. I have come to love her writing and speaking style. Here is an article that stood out last month. Read it [here](https://moneywithkatie.com/blog/money-problems-not-about-money)
- There were a few articles on Medium that are worth mentioning: [Not everyone is going to grow. It’s not your job to force them](https://thoughtcatalog.medium.com/not-everybody-is-going-to-grow-its-not-your-job-to-force-them-fba857d643ae), [Silicon Valley Crisis and the Tech Diaspora](https://medium.com/@anfonn/silicon-valley-crisis-and-the-tech-diaspora-aa8a8ddc3bf0), [New Era of hiring startups](https://neighborhoodstudios.medium.com/goodbye-linkedin-a-new-era-of-hiring-startups-has-arrived-6d3817933f8e), [My aunt gave me relationship advice that forced me to rethink all my relationships](https://medium.com/heart-affairs/my-aunt-gave-me-relationship-advice-that-forced-me-to-rethink-all-my-relationships-f9748f43370a), and [How to ruin your future without even knowing you are](https://medium.com/mind-cafe/how-to-ruin-your-future-without-even-knowing-you-are-8e0b6dfffc9b)
- Finally, I came across this Instagram [post](https://www.instagram.com/p/Ck63yteOoEF/?igshid=MDJmNzVkMjY=) that resonated with me.

## Final thoughts
Thanks for reading through to the end. I might add an email subscriptions section to my notes depending on how often I write, so you can get notified when I post a new monthly article here. And as I said earlier, I will try to keep doing this 😁.

Feel free to send an email if you have a suggestion

---

Till next time, stay safe and enjoy the last month of the year 🎉

Brief review of the past month

November 2022 Roundup

It's been over a year since I last wrote notes here, but I have decided to change the way I think about my notes. It became overwhelming to think about writing full on posts. So I just didn't bother to write at all. 

However, I figured that it will be helpful to share a condensed write-up about articles I read, podcasts I listen to, and interesting posts I see on social media. I will write just one per month so it's concise and digestible, and will try to be consistent with this new style. Hopefully, someone somewhere gets to enjoy these monthly posts and learn a thing or two from them.

Till next time...

Update on my notes going forward

Notes direction

A few months ago, during a frontend interview, I was asked what I needed to succeed in the role. It was shocking because I hadn't thought about this before. Just regular days going to the office, doing my best, and learning new concepts. Considering there are a lot of resources out there,  my personal take can help someone out there to draft a path for themselves.

I gave a satisfactory answer during the interview, but felt the need to share too. Currently, I have been in the industry for about 5 years (updated), and can speak based on that.

## Technical Skills
### Be a good engineer
There are a lot of technical skills in today's world, and there are different guides to learning Frontend Engineering like [this](https://www.notion.so/Frontend-Developer-Learning-Guide-39e189f4a49b4fcb9a6304ebf1f327a9 "Frontend Development learning guide") (created by Ire Aderinokun). There are also roadmaps you can check to ensure you are on track with picking up technologies and stay up to date, [2023 Frontend roadmap](https://roadmap.sh/frontend).

I assume you have decided to become a Frontend Engineer, you will need to prioritize learning the latest technologies (when necessary) and keeping up to date. However, a short list I recommend is:
- Basics of programming
- Design principles: This involves user interface and user experience laws
- Technologies (programming language nuances, libraries, frameworks, etc.)
- Accessibility
- Performance
- Responsive Design
- Browser Compatibility
- Security
- Version Control (CI/CD)
- Testing
- Software Architecture and Design

However, you need to actually put in the work to learn these skills. And not just learn, but practice practice practice. I remember how difficult it was for me to learn JavaScript when I started, but applying the concepts constantly helped me. So try not to be discouraged during your learning journey. Everyone started from somewhere. Do not be afraid to check the documentation of libraries, that's usually the best way to see what's new and working. 

I believe in learning passively too. Sometimes, you can pick up new lessons by randomly checking out articles online, seeing tweets, or LinkedIn posts. Try not to isolate yourself while learning to only the resources directly in front of you. You never know when you might need this to come up. I did this for a while between 2019 and late 2020 and it helped me to keep up with happenings in the ecosystem.

Challenge yourself constantly to pick up new skill sets. This could be by looking for tutorials specifically, reading documentation. There was a time when I used job assessments to practice new technologies that I had picked up from reading articles. This helped me try out a lot of ideas that I had learned so they stuck better.

### Portfolio
A portfolio gives you an online digital footprint where anyone can read your story for themselves. I gave a talk about this recently, check out the [slides](https://docs.google.com/presentation/d/1w5lyZjVB4qJmRiEIsh5bABzQ-Dxcm2saVuHj8tB4P_o/edit?usp=sharing). You choose what you want to be on display, but as an Engineer, it should contain your projects at least. Remember that everyone will see your portfolio, both technical and non-technical people. So make the content as concise and basic as possible.

If it seems difficult to build one, make it one page with a list of links maybe. You can also take advantage of templates online for your first version. This can be built on as you advance in your career. For example, my portfolio was built with Gatsby JS initially, but when I got comfortable with Next JS, I migrated the first version over to Next JS and bought a custom domain name to use.

> *Everyone has a story, why not tell yours yourself.*

### Resume
Have a resume and keep it up to date. I found this resource of templates on [Resume.io](https://resume.io/resume-templates) that can be useful in formatting yours. I particularly like the "London" option because it's similar to how mine looks.

## Non-technical Skills

### Communication
To thrive in today's engineering world, you need to be able to communicate with your teammates (whether technical or non-technical), management, and users. This skill can be both oral and written; Oral, because you could give presentations and need to contribute to meetings and planning, interface with clients, then written because you need to document your work: research findings, processes, software documentation, etc. It can be tempting to use buzz words, but remember that the goal is to be understood.

### Continuous learning
Things change a lot so Frontend Engineers need to keep up with trends to avoid being obsolete. However, there is pressure from fear of missing out (FOMO). So I recommend some balance as you learn. Ensure you find ways to put what you learn into practice, and share this knowledge to get better insights.

### Empathy
This skill is important because it shines as we work with people, either in a senior or junior role. We are human, and mistakes happen. A lot of Engineers have horrid stories of mistakes that they have made in their careers, and it's great to extend that understanding and grace to others. Empathy also shines as we build robust products because putting yourself in a user's shoes, can be the difference between building an accessible product and a difficult one.

### Attention to details
This stands out as a great skill because we work with User interfaces, and little mistakes can cause ripples. Details can also pass on to the user's end, and will account for different possibilities. This can shine when implementing user interface designs, little animations, responsive design, accessibility, and browser compatibility issues. For example, I like to write tests on job assessments to show that I can go the extra mile to deliver production grade work.

### Community
As a self-taught Engineer, I really appreciate this because I was taught by the community through free courses, articles, newsletters, conferences. Most of the libraries I use were also created and maintained by the community (open source). By giving back, we create a cycle that can sustain our industry for many more years. Sharing of information also creates a healthy ecosystem that attracts the best minds to solve problems and proffer better solutions to existing problems. So try to contribute if you can through articles, open source, and volunteering.

### Feedback
This is one of my favorites because as Engineers, we get feedback regularly on our work. This could be during code reviews, performance reviews, or random people that read our posts. It's always good to keep an open mind because this makes you a better colleague. This will also make people eager to approach you to learn and bounce ideas off you.

### Relationships
Try to build meaningful relationships with people. It helps to have people speaking up for you and your work. Aside from that, it helps to interact better with your teammates to collaborate better. Personally, this is important to me because I work better with people that I can relate with. 

### Personal Branding
Finally, put yourself and your work out there. So people can find you if you are open to opportunities or just for random offers. You never can tell where it will lead. Most of the opportunities I have gotten came through social media. 

### Give Back
You can write on websites like Medium, Dev.to, HackerNoon to share what you know. Offer to mentor and help others too. This can help you grow and learn new things by teaching. I have many stories in my personal [Online notes](https://deolaj.com/notes) and [Medium](https://medium.com/@DeolaJ).

## Final thoughts
Just like every other thing, your journey will be different from the next person's. So do not be too hard on yourself at any stage of your growth. The things within our control should be the focus.

I wish you the best. Feel free to reach out if you need anything or have questions to ask me.

Technical and non-technical tips based on my experiences so far

How to succeed as a Frontend Engineer in the Software Industry

## A little background
I started learning to code in 2015 (Aug. 2015). A few friends and I wanted to build a social e-commerce platform in the University. However, things never took form because none of us could code or were technical. We spent hours discussing and increasing our never-ending features list.

In the midst of this, the others were also motivated to learn how to code, and I didn't want to get left out. So in some way, peer pressure pushed me to learn also. You could say that from the beginning, I already felt that I was not good enough but peer pressure kept pushing me to go on.

I was able to learn HTML and CSS well after about 5 months (Dec. 2015) and practiced frequently. They were both fun because I enjoy fiddling with design elements and being creative. Then I was ready for the next stage and started learning JavaScript. It was interesting at first but started getting confusing and not intuitive enough. So I hit a stumbling block with JavaScript after a few weeks. It had been going so well that the first major pushback and obstacle scared me so much. Then I thought to myself that "Why was I even learning this"? So I dropped everything.

The following year (June 2016), I stumbled on some practical tutorials during my semester break. These tutorials were enough to show me practical applications of JavaScript in the real world. I started playing around with these till I felt a bit more confident. However, this was not enough to put me back on track.

Later that year (Dec 2016), I attended a 3 day event that introduced me to the possibilities of technology in today's world and the future, and the role that Software Engineers play in bringing that to life. I'll say this was a major turning point in my journey because from that moment because I felt proud to associate myself with Software Engineering ;).

---

## Lessons from my career
When I got my first job as a Frontend Engineer, I was made responsible for owning the user interface of the application - both design and frontend. And I must admit, it was overwhelming. The first day, I got scared by the sheer amount of things I did not know or could not pick out from the general meetings. Looking back, it is clear that was perfectly normal.

Judging by the amount of work I needed to do, I began to note things I needed to learn and created some learning plans to start. I followed it for a while but it became stressful because I retire to bed early. So I decided to spread out my learning across work hours through articles. 

With time, I realized that with more knowledge, I find out that I only knew so little and it was daunting. I kept learning gradually and picking up skills over the years. Most of the new skills I learned needed to be applied so I found a way that worked for me to apply these skills. That way was interviewing. Interviewing was like the test or exam that evaluated whether my skill level was employable and practical. Plus the deadlines (usually 7 days) forced me to pick up more skills along the way, enough to submit a great project. Then the technical interviews helped me with presenting my thought process and aligning them with what was required in the task.

Unfortunately, interviewing is mentally exhausting and the constant rejections got to me. It kinda took me back to feeling like an imposter - "If I'm not good enough to be employed, then am I truly good?". When these negative thoughts come, it's great to have a support system of friends that keep you encouraged to keep going. I had a lot of them that kept reassuring me that a big break will come and it eventually did.

Before I got a big break, I searched for a mentor to guide me but I couldn't find one. Instead, I started mentoring newer developers (also co-workers) and encouraging people to start. This filled in that gap because it helped me to revisit the basics more than I normally would. I recommend this, if you can because it's also a way of giving back. Also, I read a lot of stories from other developers and realized that this feeling doesn't ever leave. It gave me some assurance - "If everyone feels this way, then it's normal". Sometimes, it is also a consequence of fear. Recently I changed jobs, and in my first week, I felt scared that I wouldn't live up to their expectations. But I reached out to a few friends to share this feeling and they made me realize that change is not always comfortable. In a short while, I felt my confidence return.

In summary, imposter syndrome is a lot to deal with as developers. A few ways that helped me was:
- Have a great support system for reassurance
- Read other peoples stories
- Mentor other developers
- Evaluate and appreciate how far you have come
- Have some learning plan but find solace in knowing that you can't know everything


Tips that helped me as a self-taught Frontend Engineer

How I dealt with impostor syndrome as a Frontend Engineer

A sitemap will give your website pages more visibility on Google Search by defining the relationship between pages.

In this tutorial, I will walk you through how to create a static and dynamic sitemap for your Next JS website.

## Static Sitemap

If you just need a simple sitemap, you can simply create a `sitemap.xml.js` in your pages folder and structure it in the following way:

    <urset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
      <url>
        <loc>https://deolaj.com</loc>
        <changefreq>monthly</changefreq>
        <priority>1.0</priority>
      </url>
      <url>
        <loc>https://deolaj.com/notes</loc>
        <changefreq>monthly</changefreq>
        <priority>1.0</priority>
      </url>
    <urlset>

## Dynamic Sitemap with local pages
To create a dynamic sitemap, first create a `sitemap.js` file anywhere in the root of your project or in the `src` folder.
Then add the `globby` library to your project to get the list of routes:

    yarn add globby --dev

First, to get the page routes, we will use the `globby` package to extract the routes first. We exclude the Next JS default pages (`_app.tsx`, `_document.tsx` etc.), `[slug].tsx`, and `api` pages since they are not important.

    const globby = require('globby');

    const pages = await globby([
      'pages/**/*.tsx',
      '!pages/_*.tsx',
      '!pages/**/[slug].tsx',
      '!pages/api',
    ]);
  Next, we get the current Date:

    const currentDate = new Date().toISOString();

Next, we create the complete sitemap string

    const sitemap = `<?xml version="1.0" encoding="UTF-8"?>
      <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
        ${pages
          .map((page) => {
            const path = page
              .replace('pages', '')
              .replace('.js', '')
              .replace('.tsx', '')
              .replace('.md', '');
            const route = path === '/index' ? '' : path;
            return `
              <url>
                <loc>${`https://deolaj.com${route}`}</loc>
                <lastmod>${currentDate}</lastmod>
                <changefreq>monthly</changefreq>
                <priority>1.0</priority>
              </url>
            `;
          })
          .join('')}
       </urlset>
    `;

Next, write this file to your public folder:

    const fs = require('fs');
    fs.writeFileSync('public/sitemap.xml', sitemap);

Finally, put everything together

    const fs = require('fs');
    const globby = require('globby');

    async function generateSiteMap() {
      const pages = await globby([
        'pages/**/*.tsx',
        '!pages/_*.tsx',
        '!pages/**/[slug].tsx',
        '!pages/api',
      ]);

      const currentDate = new Date().toISOString();

      const sitemap = `<?xml version="1.0" encoding="UTF-8"?>
        <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
          ${pages
            .map((page) => {
              const path = page
                .replace('pages', '')
                .replace('.js', '')
                .replace('.tsx', '')
                .replace('.md', '');
              const route = path === '/index' ? '' : path;
              return `
                <url>
                  <loc>${`https://deolaj.com${route}`}</loc>
                  <lastmod>${currentDate}</lastmod>
                  <changefreq>monthly</changefreq>
                  <priority>1.0</priority>
                </url>
              `;
            })
            .join('')}
        </urlset>
      `;

      fs.writeFileSync('public/sitemap.xml', sitemap);
    }

    generateSiteMap();

## Dynamic Sitemap with remote content

In this example, I will use `contentful` to illustrate how to generate dynamic pages using remote content. E.g blog posts.

First, initialize the contentful client with your space id and access token

    const { createClient } = require('contentful');

    const client = createClient({
      space: process.env.CONTENTFUL_SPACE_ID,
      accessToken: process.env.CONTENTFUL_ACCESS_TOKEN,
    });
 Get the posts from contentful and their paths (slug)

    const notePosts = await client
      .getEntries({ content_type: 'notes', order: 'sys.createdAt' })
      .then((response) => {
         // this is a custom utility function I created to extract the posts
         const posts = generateNotePosts(response.items);
         return posts;
    });
    const notePaths = notePosts.map(({ fields: { slug } }) => slug);   

  Next, modify the sitemap string with a new section for remote pages

     ...
     ${notePaths
        .map((route) => {
          return `
            <url>
              <loc>${`https://deolaj.com/notes/${route}`}</loc>
              <lastmod>${currentDate}</lastmod>
              <changefreq>monthly</changefreq>
              <priority>1.0</priority>
            </url>
          `;
        })
        .join('')}
     ...

 Finally, put everything together

    const fs = require('fs');
    const globby = require('globby');
    const { createClient } = require('contentful');

    async function generateSiteMap() {
      const pages = await globby([
        'pages/**/*.tsx',
        '!pages/_*.tsx',
        '!pages/**/[slug].tsx',
        '!pages/api',
      ]);

      const client = createClient({
        space: process.env.CONTENTFUL_SPACE_ID,
        accessToken: process.env.CONTENTFUL_ACCESS_TOKEN,
      });

      const currentDate = new Date().toISOString();

      const notePosts = await client
      .getEntries({ content_type: 'notes', order: 'sys.createdAt' })
      .then((response) => {
         // this is a custom utility function I created to extract the posts
         const posts = generateNotePosts(response.items);
         return posts;
       });

      const notePaths = notePosts.map(({ fields: { slug } }) => slug);

      const sitemap = `<?xml version="1.0" encoding="UTF-8"?>
        <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
          ${pages
          .map((page) => {
            const path = page
              .replace('pages', '')
              .replace('.js', '')
              .replace('.tsx', '')
              .replace('.md', '');
            const route = path === '/index' ? '' : path;
            return `
              <url>
                <loc>${`https://deolaj.com${route}`}</loc>
                <lastmod>${currentDate}</lastmod>
                <changefreq>monthly</changefreq>
                <priority>1.0</priority>
              </url>
            `;
          })
          .join('')}

          ${notePaths
          .map((route) => {
            return `
              <url>
                <loc>${`https://deolaj.com/notes/${route}`}</loc>
                <lastmod>${currentDate}</lastmod>
                <changefreq>monthly</changefreq>
                <priority>1.0</priority>
              </url>
            `;
          })
          .join('')}
      </urlset>
    `;

      fs.writeFileSync('public/sitemap.xml', sitemap);
    }

    generateSiteMap();

## Putting it together
To ensure that your page is built, add the following to your `next.config.js`

    module.exports = {
      webpack: (config, { isServer }) => {
        if (isServer) {
          // Replace the path below with the `sitemap.js` file location
          require('./src/utils/sitemap');
        }

        return config;
      },
    };

 Run your local server and the sitemap.xml file should appear in your public folder

A short tutorial to create a dynamic sitemap

# List of VSCode extensions
- __Add Jsdoc comments__: Document code sections
- __Bracket Pair colorizer__: Colors bracket pair for easy redability
- __Eslint__: Works with the `eslint` package to lint files
- __Eva Theme__: Visual theme
- __GitLens__: Assists with Git History
- __MarkdownLint__: Helps to link markdown files
- __Prettier__: Works with the `prettier` package to format files
- __Reactjs Code snippets__: Helps to create and work with code snippets in React
- __Stylelint__: Works with the `stylelint` package to lint CSS files
- __Tailwind CSS IntelliSense__: Works with the `tailwindcss` package to improve working with Tailwind CSS classes
- __Tailwind CSS Autocomplete for Visual Studio Code__: Works with the `tailwindcss` package to add autocomplete for Tailwind CSS classes


List of extensions to install to aid development

Setting up VSCode for Development

# Introduction

In this note, we will walkthrough the steps to get started with local development with Github. First we will setup the configuration details, then we will set up the SSH keys.

## Configuration Steps

### Global setup
To set up global variables, open the terminal and run the following:
- Email set up:
    `git config --global user.email "insert your email here"`

- User name set up:
    `git config --global user.name "insert your name here"`

### Local setup
To set up local variables for an individual project,
- Open the terminal
- Navigate to the project folder
- To set the project email, run:
    `git config --local user.email "insert your email here"`

- To set the project user name, run:
    `git config --local user.name "insert your name here"`

To view all settings, run:
    `git config --list`

## Setting up SSH keys

### Generate the SSH keys
1. Open the terminal
2. Navigate to the home directory by running:
    `cd ~/`
3. Generate your SSH key by running:
    `ssh-keygen -t rsa`
4. Follow the prompts and accept the defaults. You can decide whether to create a passphrase, which is requested every time you want to interact with Github (like a password).
5. When you are done, two files will be created `~/.ssh/id_rsa` and `~/.ssh/id_rsa.pub` (this is the public key)
6. To copy your public key to your clipboard, run:
    `pbcopy < ~/.ssh/id_rsa.pub`

### Upload public key to Github
1. Open your browser
2. Login to Github and navigate to [https://github.com/settings/profile](https://github.com/settings/profile "Github Profile")
3. Click on the __SSH and GPG keys__ section on the sidebar
4. Click on the __New SSH key__ button
5. Enter an appropriate title
6. Paste the contents from your clipboard
7. Click the __Add SSH key__ button to save it

You are now set up, and can clone a repository.


Set up configuration and SSH Keys

Setting up local development for Github

AI powered online playground for interactive games. Explore the 4 pilot games

Neegma (In Progress)

This is a youth church web application. Visitors can generate unique event banners with personal pictures and there's also a linktree replica application for announcements.

Hello, I'm Adeola Adeyemo

I build Web Interfaces.

About

My Story.

Skills

Tech Stack.

Projects

Featured Projects.

Neegma (In Progress)

Thribe-X

PDF Builder

Notes

Latest Notes.

My Global Talent Visa Story

How to trigger email notifications on a contact form with Supabase

How to send emails with Edge Functions on Supabase

Community

Talks, Open Source, Conferences

How to create an online portfolio

Slides

Blog posts

Published articles

How To Trigger Email Notifications On A Contact Form With Supabase

How to send emails with Edge Functions on Supabase

How to create a contact form with Supabase & Next JS

How to generate a dynamic sitemap for your Next JS website

How to create a Custom Route Blocking Modal in React

Twin.macro Tutorial for Beginners: Styling with Tailwind CSS and Emotion in React

How to create an Image Uploader using React and Cloudinary

Creating A Simple Collapsible Sidebar with JavaScript (No Framework Required)

How to Create a Simple Cookie Consent Pop-up for your Website

Contact

Are you ready to work with me?