Forem: Mahmoud Abdelwahab

Set up a free PostgreSQL database on Supabase to use with Prisma

Mahmoud Abdelwahab — Fri, 11 Jun 2021 20:13:04 +0000

Supabase is a backend-as-a-service built on top of open source technologies. It gives you a database, authentication, a REST API, real-time subscriptions, and storage.

It offers a free plan which includes a hosted PostgreSQL database. This can be useful if you're getting started with a new project.

This guide explains how to quickly connect the Postgres database provided by Supabase to a Prisma project. There are other services out there that provide hosted PostgreSQL databases like Heroku or Digital Ocean.

Prisma is an open source next-generation ORM. It consists of the following parts:

Prisma Client: Auto-generated and type-safe query builder for Node.js & TypeScript.
Prisma Migrate: Migration system.
Prisma Studio: GUI to view and edit data in your database.

Step 1: Log into Supabase

Navigate your browser to https://app.supabase.com and log in with GitHub.

Step 2: Create a new project

You'll find that an organization has been created for you under the same GitHub username you used when logging in.

Go ahead and create a new project by clicking on "New project" and then pick the organization.

You'll then need to provide a name and set a password for your database (we'll need it later). Finally, click on "create new project".

After creating the project, you'll need to wait for ~2 minutes for Supabase to finish creating the database.

Step 3: Get the connection string from the project settings

Go to the settings page from the sidebar and navigate to the Database tab. You'll find the database's connection string with a placeholder for the password you provided when creating the project.

Step 4: Testing the connection

To make sure that everything works correctly, let's try the connection string in a Prisma project.

If you already have one, all you need to do is set the DATABASE_URL to the connection string (including the password) in your .env file, and you're good to go.

In case you don't have a Prisma project or this is your first time working with Prisma, you're going to use with the repo from the quickstart guide.

Cloning the starter project

Navigate into a directory of your choice and run the following command in your terminal if you're on a Windows machine:



curl https://pris.ly/quickstart -L -o quickstart-master.tar.gz && tar -zxvf quickstart-master.tar.gz quickstart-master/typescript/starter && move quickstart-master\typescript\starter starter && rmdir /S /Q quickstart-master && del /Q quickstart-master.tar.gz

And if you're using Mac OS or Linux, run the following command:



curl -L https://pris.ly/quickstart | tar -xz --strip=2 quickstart-master/typescript/starter

You can now navigate into the directory and install the project's dependencies:



cd starter && npm install

A look at the project's structure

This project comes with TypeScript configured and has the following structure.

A prisma directory which contains:
- A dev.db file: This is a SQLite database.
- A schema.prisma file: Where we define the different database models and relations between them.
A .env file: Contains the DATABASE_URL variable, which Prisma will use.
A script.ts file: where we will run some queries using Prisma Client.

This starter also comes with the following packages installed:

@prisma/client: An auto-generated and type-safe query builder that's tailored to your data.
prisma: Prisma's command-line interface (CLI). It allows you to initialize new project assets, generate Prisma Client, and analyze existing database structures through introspection to automatically create your application models.

Note: Prisma works with both JavaScript and TypeScript. However, to get the best possible development experience, using TypeScript is highly recommended.

Configuring the project to use PostgreSQL

Go ahead and delete the prisma/dev.db file because we will be switching to PostgreSQL.

Next, inside the prisma/.env file, update the value of the DATABASE_URL variable to the connection string you got in step 3. The URL might look as follows:



# prisma/.env

postgres://postgres:[YOUR-PASSWORD]@db.vdbnhqozmlzdsaejdxwr.supabase.co:5432/postgres

Finally, inside your schema.prisma file, change the provider from "sqlite" to "postgresql".

This is what your schema.prisma file should look like:



datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

generator client {
  provider = "prisma-client-js"
}

model Post {
  id        Int     @id @default(autoincrement())
  title     String
  content   String?
  published Boolean @default(false)
  author    User?   @relation(fields: [authorId], references: [id])
  authorId  Int?
}

model User {
  id    Int     @id @default(autoincrement())
  email String  @unique
  name  String?
  posts Post[]
}

To test that everything works correctly, run the following command to create a migration:



prisma migrate dev --name init

You can optionally give your migration a name, depending on the changes you made. Since this is the project's first migration, you're setting the --name flag to "init".

If everything works correctly, you should get the following message in your terminal:



Your database is now in sync with your schema.

✔ Generated Prisma Client (2.x.x) to ./node_modules/@prisma/client in 111ms

This will create a prisma/migrations folder inside your prisma directory and synchronize your Prisma schema with your database schema.

Note: if you want to skip the process of creating a migration history, you can use the db push command instead of migrate dev.

If you go to your Supabase project, in the table editor, you should see that two tables have been created, a Post and a User table.

That's it! You have now successfully connected a Prisma project to a PostgreSQL database hosted on Supabase and ran your first migration.

Connection pooling with Supabase

If you're working in a serverless environment (for example Node.js functions hosted on AWS Lambda, Vercel or Netlify Functions), you need to set up connection pooling using a tool like PgBouncer. That's because every function invocation may result in a new connection to the database.

Fortunately, Supabase projects support connection management using PgBouncer and are enabled by default.

Go to the Database page from the sidebar and navigate to connection pool settings

When running migrations you need to use the non pooled connection URL (like the one we used in step 4). However, when deploying your app, you'll use the pooled connection URL. and add the ?pgbouncer=true flag to the PostgreSQL connection URL. The URL might look as follows:



# prisma/.env

postgres://postgres:[YOUR-PASSWORD]@db.vdbnhqozmlzdsaejdxwr.supabase.co:6543/postgres?pgbouncer=true

Prisma Migrate uses database transactions to check out the current state of the database and the migrations table. However, the Migration Engine is designed to use a single connection to the database, and does not support connection pooling with PgBouncer. If you attempt to run Prisma Migrate commands in any environment that uses PgBouncer for connection pooling, you might see the following error:



Error: undefined: Database error
Error querying the database: db error: ERROR: prepared statement "s0" already exists

This is a known issue and it is being worked on, you can follow the progress on this GitHub issue.

If you want to learn more about Supabase, check out the docs.

If you want to learn more about Prisma, check out the docs. Also in case you have any questions or run into any issue, feel free to start a discussion in the repo's discussions section.

A Letter You Can Send to Your Manager to Adopt Prisma at Work

Mahmoud Abdelwahab — Tue, 09 Feb 2021 13:07:32 +0000

Want to use Prisma at work? We've made it easier for you to ask your manager to adopt Prisma for your projects! Here's a letter you can copy/paste.

Dear Manager,

The team has been working hard on improving our product and shipping new features, however, we'd like to increase our productivity even more while maintaining great code quality.

The current state of our tooling is okay, but we would like to take it to the next level. One way to do that is to adopt Prisma. It is a next-generation ORM that offers an amazing development experience.

Prisma will make our code easier to reason about since it has an intuitive API with features like CRUD, pagination, and filtering built-in.

It also offers great auto-completion so we'll be making fewer errors while building new features, and we can ship with confidence.

The great thing about Prisma is that it solves one problem and it solves it really well: providing a simple data access layer for our database inside a Node.js or TypeScript environment.

Prisma is also framework and API agnostic, so we can easily integrate it within our stack and inside any architecture.

Here's what some of the biggest companies are saying about Prisma:

"Next.js and Prisma is the ultimate combo if you need a database in React apps! Depending on your needs, you can query your database with Prisma in Next.js API routes, in getServerSideProps or in getStaticProps for full rendering flexibility and top performance 🚀 " - Guillermo Rauch - CEO & Founder of Vercel
"So happy we chose Prisma Client and Migrate for Redwood.js. Finally we have something akin to Rails' ActiveRecord but for JavaScript & the future of JAMstack apps!" - Tom Preston-Werner - GitHub Co-Founder
"Prisma provides an excellent modeling language for defining your database, as well as a powerful ORM for working with SQL in JavaScript & TypeScript. It’s the perfect match to Apollo Server and makes building GraphQL APIs with a database feel delightful." - Kurt Kemple - DevRel Manager of Apollo

Prisma also has a dedicated team for providing support on GitHub and a huge Slack community of 40,000+ developers where we can ask questions.

It currently supports PostgreSQL, MySQL, SQL Server, and SQLite, so we can incrementally adopt it in our backend.

In case you have any questions, please let us know, we'd love to discuss it. To get things started, check out what is Prisma, to gain a better understanding of how it works and why it would be an upgrade for us. We can also incrementally adopt it in our project and the migration is low-risk so it is definitely worth trying. For more information, check out the should you use Prisma page

Thanks.

– The team

How I Failed The 100 Days Of Code Challenge

Mahmoud Abdelwahab — Mon, 07 Dec 2020 22:26:37 +0000

Consistency Is Hard

I heard about the 100 days of code challenge around two years ago when I got into web development. It's a challenge where you're supposed to code at least 1 hour a day for 100 days straight.

I failed at it. HARD.

I just couldn't manage to stay consistent.

Some days I coded, others I didn't.

Some days I felt inspired and motivated, other days I felt like crap and I couldn't get anything done.

Some days I was just, well, busy. Life got in the way.

Coding 1 hour a day for 100 days, sounds easy, but it's not. The consistency aspect is super hard. At least for me.

So after multiple tries, I've accepted defeat.

Going with the flow

I decided to go with the flow. Code depending on how I felt.

So some days I'd code for 5-7 hours, and on these days everything would just magically work ✨

That code snippet I copied from stack overflow? Runs the first time.

I Encounter a bug? The answer was the first one on Google.

On other days though, things were slow. Nothing seemed to work, I felt stuck, and I wasn't focused at all. Sometimes it feels like the only productive thing I've done during the day was running npm install.

What's also weird was I had no in-between. It was binary.

Either I'm super productive, or a potato.

With time though, I managed to accept it.

Getting used to this cycle made me happier since I didn't feel guilty all the time.

For all beginner developers out there, I want to let you know that It's okay not to be productive every day. It's okay to stumble, struggle, and be stuck. In fact, it's part of the journey.

If you're productive and in the zone, enjoy it while it lasts.

If you're stuck, ask for help or take the day off. It's fine. You can always try again tomorrow.

Now some of you might find a hard time believing what I'm saying. You might be worried that missing a couple of days will greatly impact your progress as a developer.

I'm here to tell you it won't.

What truly matters: doing your best

In reality, what matters is the total hours spent.

Two people can end up coding the same amount even if they follow different schedules.

Here you can see that in the weekly progress chart, the person coding 1 hour a day codes for 7 hours per week, while the other person codes the same amount but for fewer days.

And for the total number of hours spent coding during the year, the person that went with the flow spent on average the same number of hours as someone that coded 1 hour every day.

I'm the second type, and luckily, I track how much time I spend on my text editor.

I use Wakatime, which is a VSCode extension that tracks the amount of time you spend coding. I installed it on December 24th, 2018. Since then, I've coded for a total of 1218 hours.

This is what my chart looks like

As you can see, I have times where I coded consistently, others I had zero activity.

The moral of the story, do what works best for you.
Don't feel like you have to follow a specific schedule religiously to get better. Just make sure you're always trying to get better. Eventually, you will.

The funny thing is, 1218 hours in two years is around 1.7 hours per day. So I guess I did complete the challenge after all.

Track how much you work, but don't obsess over it

Tracking the number of hours is not the best metric, the quality of the time matters too. You should strive to achieve both quality and quantity.

These numbers also do not show the full picture. They don't include the time I spent reading other people's code (which taught me a lot), watching talks, reading blog posts, and meeting new people.

However, I think tracking helps in keeping you accountable and it can also act as motivation.

Do your best, trust the process, and remember: you're only competing with yourself.

Building An Open Source Project | Developer Vlog

Mahmoud Abdelwahab — Thu, 13 Aug 2020 18:01:23 +0000

New Video is LIVE! 🚀 I document my progress building an open-source project - Tailwind Snippets.

The Ultimate Screencast Recording Process

Mahmoud Abdelwahab — Wed, 12 Aug 2020 01:27:23 +0000

Knowing how to screencast is a valuable skill, You may have already tried doing it and you found that it takes a ton of work.

Generally, there are two approaches when it comes to creating screencasts:

Record your screen and then do a voice over
Record both simultaneously, but doing one step at a time while taking pauses between each step.

Each process has it's own pros and cons

Record your screen and then do a voice over

Recording audio and the screen separately sounds really good in theory. You'll read a script and your life will be easy.

However, the problem with voiceovers is that it's so hard to match the pace of the screen recording. Sometimes you're coding too fast, other times you're going too slow.

So the only fix is to keep adjusting the video speed and try doing multiple takes when you're recording the audio.

This is a ton of work and it can be really frustrating. So I personally don't use this approach.

Record both simultaneously, but doing one step at a time while taking pauses between each step.

This is a nicer approach because after recording you don't need a lot of editing. You can remove the pauses by looking at the audio track.
Also, if you know you messed up, you can just do a loud clap, so that you can find the bad takes a lot faster.

On the other hand, I find this approach very hard for me. I can't do two things at the same time (code + voiceover).

So for me to get a good take, I need to redo the same step multiple times.

So from my point of view, both approaches are hard.
One is hard in the production phase, and the other in post-production.

But it doesn't have to be this way. Here's how I do it:

Code. Pause. Narrate

I record my screen
pause
read the explanation from a script.

When editing, all I need to do is grab the voiceover and decide where I want it to start

I don't mess up or forget what I want to say, and I'm not doing two things at once

This is a combination of the 2 approaches and works perfectly for me.

Here's a video where I show how I do it:

Landing Page Redesign| Design For Developers

Mahmoud Abdelwahab — Sat, 25 Jul 2020 03:39:10 +0000

If you're a developer and you find yourself struggling with making things look good then this video is for you!

I go over how I changed the landing page from this

to this

👉🏻 https://www.youtube.com/watch?v=eovEWBXSWIg

This is the landing page for The coding Career Handbook. You'll find my redesign live at https://coding-career-handbook.netlify.app

It's built using Gatsby and TailwindCSS, two of my favorite technologies at the moment. It's open-source as well at https://github.com/m-abdelwahab/coding-career-handbook

If you prefer reading, I wrote a summary of the changes I made + key takeaways ⬇️

The Hero Section

By far the most important section of any landing page. This is where users build the first impression and should be able to understand what the whole website is about.

So make sure that:

→ Use an attention-grabbing headline that focuses on the product's value
→ Make sure that there are clear call-to-actions

Table Of Contents Section

Having a table of contents that users can read is important.

People want to know exactly what they're paying for.

However, having it on the main page will result in a lot of scrolling.

A good approach is to have it on a separate page

About The Author Section

When designing things, sometimes "less is more"

You don't need a unique color combination

You don't need fancy layouts.

Keeping things simple works more often than you think

Pricing Section

If you offer different packages/ pricings a common pattern is to have a comparison table. This way your future customers can easily understand the differences and which package is best for them

If you enjoyed this you'll find that the video covers one more section (the book reviews)

Check it out here: 👉🏻 https://www.youtube.com/watch?v=eovEWBXSWIg

What's the best approach for form validation in React?

Mahmoud Abdelwahab — Tue, 28 Apr 2020 09:34:58 +0000

I had a task where I needed to validate a sign-up form in React.
There was a name, email, password, confirm password, and a checkbox. All fields were required and the password had a couple of rules.
I got it to work using Formik + Yup, was that overkill for this use-case?

I found that there are a ton of form validation libraries, which one should I work with? What makes one better than the other?

AWS The Good Parts: My Personal Notes

Mahmoud Abdelwahab — Wed, 15 Apr 2020 14:47:50 +0000

Hi! My name is Mahmoud Abdelwahab and I'm a front-end engineer based in Egypt. I successfully landed my first ever paid gig this year (🎉), where I was responsible for styling a Web app. The project was using React on the front-end and the backend was powered by AWS Amplify and DynamoDB.
While I was working on the project, the backend developer made me very interested in learning AWS. So after I finished the job, I did some research about the best resources to learn AWS and I found The Good Parts Of AWS by Daniel Vassallo.

This will be a series of blog posts where I share my understanding of the things I learn from the book. You should definitely check it out.

The Default Heuristic

As a Software engineer, you have to make a lot of choices, from deciding which language(s) to use, frameworks, libraries, architectures, etc. So for you to make these decisions, you have to first understand what are the available options.
This part requires research so that you're able to determine what are the right tools for your specific use case.
And with the fast pace of the tech industry, new tools are constantly being invented.
The problem is that, while doing your research, sometimes one might fall in the trap of chasing the best tool.

So with each tool you encounter, you try to understand how it works, the different trade-offs you'll make when using it, who's using it and maybe try building something with it to test it.

This approach takes a lot of time and effort and it becomes really inefficient when you have a lot of options.

Okay, so how can you avoid this trap? Daniel Vassallo recommends using a technique called the "Default Heuristic".

"The premise of this heuristic is that when the cost of acquiring new information is high and the consequence of deviating from a default choice is low, sticking with the default will likely be the optimal choice."

So an important question pops up: "what should be my default choice"?

You should go with something that you already understand, you're confident that it works and you've tested it before.
The default choice doesn't have to be the best, it just needs to be reliable so that it gets you closer to your goals.

When you follow this strategy, you end up being more efficient, because you're making the majority of your decisions based on your experience. When the defaults you have don't fit a certain case, that's when you should do your research and try to find the right tool.

I'm a front-end engineer and I recently faced a situation where I had to make a choice about which tool to use concerning the styling of the UI.

Should I go with an existing component library or write my own CSS from scratch? Okay, if I'm going to write my own CSS from scratch should I use CSS-in-JS? SCSS? Or maybe I should try tailwind-CSS, I heard it makes you really efficient when building layouts and UIs.

So as you can see, there are a lot of possible decisions for one aspect of the project. There are also different conventions, philosophies, libraries, frameworks, linting-tools, build-tools, CI/CD, etc.
So if I would research and try all the possible tools that there is, I just wouldn't get anything done.

The point of this book is to share "the default choices" of Daniel Vassallo. He explains each one of them and why it became a default choice when working with AWS.

I will share my learnings from this book here, but definitely I recommend that you buy the book yourself and go through it.

Composition Over Inheritance

Mahmoud Abdelwahab — Sun, 12 May 2019 21:20:11 +0000

Composition Over Inheritance

Object-Oriented Programming (OOP) is one of the most popular paradigms when it comes to building software, however, the more I learned about JavaScript, I got introduced to Functional Programming (FP), a completely different way of thinking. In this article, I'll share with you what I've learned and I'll explain to you using my own examples.

Example: You want to build a game, where the main character is a student in Hogwarts and he's learning witchcraft from his teacher.
So you create a Student Class where your student object will be able to take tests, and you have another class called Teacher, where the teacher object will be able to grade Tests.

Student
  .takeTest()

Teacher
  .gradeTest()

Assuming you want to add some features like eating, sleeping and walking, you'll end up with something that looks like this

Student
  .takeTest()
  .sleep()
  .eat()
  .walk()

Teacher
  .gradeTest()
  .sleep()
  .eat()
  .walk()

The problem is that the code above doesn't follow the DRY principle, which stands for ( Don't Repeat Yourself), so the solution is to create a parent class where we put the sleep, eat and walk features. So we end up with something like this:

Human
  .sleep()
  .eat()
  .walk()

    Student
     .takeTest()

    Teacher
     .takeTest()

Yaaay problem solved! everyone's happy. However, a few months later, to make your game even more exciting, you decide to add another character to your game, let's say you want to add a dragon. This is what you end up with:
SO you end up with something like this:

EvilDragon
 .breathFire()
 .fly()
Human
  .sleep()
  .eat()
  .walk()

    Student
     .takeTest()

    Teacher
     .takeTest()

While this is great, you're not satisfied, so you decide to make the game more realistic by giving your dragon abilities like humans, you want your dragon to be able to sleep and eat, so you end up with something like this:

GameObject
  .sleep()
  .eat()

    EvilDragon
     .breathFire()
     .fly()

    Human
     .walk()

        Student
        .takeTest()

        Teacher
        .takeTest()

Now, this is working completely fine, but assuming that in your game, the teacher, after careful study of witchcraft, was able to create a cape that allowed him to fly.
Now comes the problem: how do you structure your project? you can't add the flying ability to the humans class because not all humans can fly, and you can't make the teacher inherit from the EvilDragon Class, because the teacher can't breathe fire.
There is a solution it's to add features that will never be used by the teacher object to make him able to fly, like breathing fire. However, this is like asking for a banana and receiving a gorilla holding a banana.
So now, you've hit a wall, you can't turn your game idea into a reality.
Of course, you can repeat yourself, but since you're an excellent developer who cares about every line of code he writes you won't do that.
Don't worry though, there is a solution: Composition

With inheritance, you structure your classes around what they are. With functional programming, you structure your classes on what they do.

By favoring composition over inheritance and thinking in terms of what things do rather than what things are, you free yourself of fragile and tightly coupled inheritance structures.

Here's a snippet of what our code might look like in our game when we think in terms of objects:

class Teacher{
    constructor(name){
        this.name = name;
    }
    sleep(){
        setTimeout(console.log('Damn, that was a great nap'),8000);
    }
}

const teacher = new Teacher(Dumbledore);
teacher.sleep();
//outputs 'Damn, that was a great nap' after 8 seconds

When we write our project using a functional approach we end up with a collection of stand-alone functions, each one of them serving a single purpose, which facilitates maintainability and makes debugging easier since we can predict the outcome of a function. When creating an object, we simply import all the functions that we need.

//same code rewritten using factory functions
//factory functions are functions that create objects
//we will use
const sleep = () => {
     return setTimeout(console.log('Damn, that was a great nap'),8000);
}
Object.assign(

)

Which one wins? well normally you would use inheritance when there is a relation between objects, like me, Mahmoud, I'm a human, so I will inherit all of the things that a human has. On the other hand, you would use composition for example when an object has a certain feature, like for example a car will have an engine component.

However, this is not completely true because, for example, a car is a vehicle and me Mahmoud, I have arms and I can lift things. So, in reality, you can follow any of these patterns.
Buuuut, composition is easier to debug, maintain, everything is encapsulated and in a project, you can easily add features.