DEV Community: Nelson chege

I made an Instagram clone

Nelson chege — Tue, 09 Jan 2024 09:19:04 +0000

spending a lot of time scrolling on Instagram made me think about creating an Instagram clone to challenge my skills.

I decided to go as much as the hot tech as possible in the JavaScript to see how they worked or if they being hyped only but had no real advantage in using them

Tools I Used:

Shadcn UI: For web components.
Next-Auth: Handling authentication.
Drizzle: for database management and ORM.
TRPC: API interactions.
Uploadthing: file uploads.

Here is the link to the site

some of the take away that i had:

TRPC: Working with TRPC made fetching data from the back-end an enjoyable experience. The ability to define functions in the back-end and call them in the UI reduced the chances of errors, and it was fun having to enjoy the fruits of autocomplete.
Drizzle: As someone used to writing raw queries, Drizzle offered the flexibility of using its ORM syntax or writing raw queries .It even generated types by inferring from the created table classes,

Development process:

Navigating through this project, I initially overlooked the importance of thorough planning, resulting in a lack of understanding of the complete scope.
Lesson learned - scoping and planning will be pivotal in my next project.

Conclusion:

I plan to integrate Drizzle into all of my future projects and consider migrating some of my existing work to leverage its capabilities. Nextjs has made it easy for you not needing a different back-end for small to medium project .For The JavaScript/Typescript ecosystem is increasingly showcasing tools that prioritise developer experience while also ensuring efficient functionality.

Understanding HTML canvas

Nelson chege — Wed, 03 Jan 2024 08:16:07 +0000

HTML canvas is a graphic interface that can be used to create video games and animation using JavaScript and the canvas element in HTML.it is also a lightweight solution when you want to create animations without any additional frameworks and libraries.

How to setup a basic playground

you only need JavaScript and an html file to getting started using Canvas.

in the HTML file ,add the canvas element and a script tag to your JavaScript file

inside the JavaScript file, First select the canvas element in the HTML, using any of the document methods.you can get the canvas depending on how you have initialized the canvas element in you HTML file.

const canvas  = document.querySelector('canvas')

then create the main object that will be used in whatever you want to make of it. here is a link to the different context that are available when using Canvas.

const ctx = canvas.getContext('2d')

How to draw something on canvas

the object created ctx contains different methods that are used to create the different things within the canvas context

for drawing rectangles , you can use the .fillRect() method

ctx.fillRect(0,0,50,150)
%%the first two argument are for the postions of the rectangle being drawn, and the other  one is for the height and with of the said rectangle  %%

you can also use the .fillStyle() method to add colour to it

How to create a basic animation

a callback function can be created to tell the browser that you wish to perform an animation.

function animate(){
 window.requestAnimationFrame(animate)
}

animate()

in this case, it will be an infinite callback function that will continue running the function.This will make the screen refresh each time the function run.
This is helpful because in things like animation, the screen needs to change for each frame in the animation.

Creating an object that moves

for a simple example of creating a small game that you can move a character around,ill be creating an object that can move side to side and jump.

First setup the object and give it full height and width of the screen

const canvas = document.querySelector('canvas')
const ctx = canvas.getCOntext('2d')

canvas.witdth = window.innerWitdth;
canvas.height = window.innerHeight;

Next ,create a class that will hold the properties that we want object to contain (lets can it a player).

class Player{
  constructor({position.velocity}){
    this.position = position
    this.velocity = velocity
    this.height = 150 pixels
  }
  draw(){
    canvas.fillStyle ='red'
    canvas.fillRect(this.position.x,this.position.y,50,this.height)
 }
 update(){
    this.draw();
    this.position.x += this.velocity.x
    this.position.y += this.velocity.y

  if(this.position.y + this.height + this.velocity.y >= canvas.height){
  this.velocity.y = 0
  }else{
    this.velocity.y += 0.2
  }
 }
}

now time to create a player instance from the class created

const Player1 = new PLayer({postion:{x:0,y:0},velocity:{x:0,y:5}})

Next thing is to write functions that takes in input from the keys pressed on the keyboard, and also adding helper variables

const Keys = {
    a:{ pressed:false },
    d:{ prassed:false }
    w:{ passed:false }
}

window.addEventLIstener("keyDown",(event)=>{
 switch (event.key){
   case "d":
     Keys.d.pressed = true;
     break;
   case "a":
     Keys.a.pressed = true;
     break;
  %%  this will handle the player jumping  %%   
   case "w":
     player1.velocity.y = -10;
     break;
 }
})

window.addEventLIstener("keyUp",()=>{
  case "d":
     Keys.d.pressed = false;
     break;
   case "a":
     Keys.a.pressed = false;
     break;
})

finally , create a callback function that would be used to re render "yeah I'm used to that term from the react world ;)" and handle the animation

function animate(){
   windows.requestAnimationFrame(animate)
   ctx.fillStyle ='black';
   ctx.fillRect(0,0 canvas.width,canvas.height);
   player1.update()

   player1.velocity.x = 0

  if (keys.a.pressed && player.lastKeyPressed === "a") {
       player.velocity.x = -10;
  else if (keys.d.pressed && player.lastKeyPressed === "d") {
       player.velocity.x = 10;
  }
}

animate()

conclusion

HTML canvas is a great way to getting started if interested in making animation using javascript. It's Lightweight from it being a native HTML element and no extra libraries or framework needed

working with Server Actions

Nelson chege — Thu, 17 Aug 2023 13:49:23 +0000

Server actions were introduced in NextJs version 13.4 in Alpha together with turbopack (Beta) and App router(stable).

They have a good developer Experience when using them plus other features that are really nice to have.

with server actions:

allows progressive Enhancement which allows forms to function correctly without javascript
you can now you forms inside of server action, reducing the amount of javascript shipped to the client
you don't need to create other endpoints todo mutations. (but these actions are considered as api endpoints by nextjs)

Because at the moment,server Actions is still in Alpha, you have to add this to your next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    serverActions: true,
  },
};

module.exports = nextConfig;

now creating a simple form that calls an action

import { addTodo } from "../lib/actions";
const AddTodo = () => {
  return (
    <div>
      <form action={addTodo}>
        <div className="">
          <input
            type="text"
            name="todo"
            required
          />
        </div>
        <div>
          <button
            type="submit"
           >
            Submit
          </button>
        </div>
      </form>
    </div>
  );
};

export default AddTodo;

server actions can be imported and saved in a separate file making them cool to work with.

the "use server" must be included on top of the file

"use server";

import { randomUUID } from "crypto";
import { revalidatePath } from "next/cache";

export async function addTodo(data: FormData) {
  const todo = data.get("todo");

  await fetch("http://localhost:3500/todos", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      todo,
      userId: randomUUID,
    }),
  });

  revalidatePath("/");
}

inside the Action you are able to do all the things that a normal API endpoint used to handle such as communicating to a database

the revalidatePath will update the cache with the new data add to the specified path.

And thats all required to get started using server actions.

An extra feature that can be included inside server action is the useTransition hook.
This provides pending and startTransitions to play around with. you can disable the button using the pending status.

"use client";

import React, { useRef, useTransition } from "react";

type AddTodoFormProps = { addTodo: (todo: string) => Promise<void> };

const AddTodoForm = ({ addTodo }: AddTodoFormProps) => {
  const todoRef = useRef<HTMLInputElement>(null);
  let [pending, startTransition] = useTransition();
  return (
    <>
      <div className="">
        <input
          ref={todoRef}
          type="text"
          id="todo"
          name="todo"
          required
        />
      </div>
      <div>
        <button
          disabled={pending}
          onClick={async () => {
            startTransition(async () => {
              await addTodo(todoRef.current!.value);
            });
          }}
        >
          Submit
        </button>
      </div>
    </>
  );
};

export default AddTodoForm;

for the action, data passed to the action will only be that one variable

"use server";

import { randomUUID } from "crypto";
import { revalidatePath } from "next/cache";

export async function addTodo(data: string) {
  const todo = data;
  const payload = {
    todo,
    userId: randomUUID(),
    createdAt: new Date(new Date()).toLocaleString(),
  };

  await fetch("http://localhost:3500/todos", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify(payload),
  });

  revalidatePath("/");
}

conclusion

server actions is an easier way to communicate with your backend without extra endpoints and also reduce the javascript code that is passed to the client side.

setting up next auth with the new app directory

Nelson chege — Sat, 24 Jun 2023 16:14:24 +0000

I was looking for ways to setup next-auth with the new app directory and found no blog that gave out the steps for actually doing it.

here are the steps of setting it up.

for this, i did not use the scr file structure in my next project.

i install next auth

npm install next-auth

ii add an api route

touch app/api/auth/[...nextauth]/route.ts

inside of the routes add the following code

import { authOptions } from "@/utils/authoptions";
import NextAuth from "next-auth/next";

const handler = NextAuth(authOptions);

export { handler as GET, handler as POST };

This handle all requests related to next-auth.
we need to create authOptions

iii create authOptions

there are different providers that can be use for authentication,
you can have a look at the next-auth docs to view how to impliment for different providers
in this case ill simply use the credential provider

mkdir utils

touch authOptions.ts

inside the authOptions file ,add the following

import { NextAuthOptions } from "next-auth";
import CredentialsProvider from "next-auth/providers/credentials";

export const authOptions: NextAuthOptions = {
  providers: [
    CredentialsProvider({
      name: "Credentials",
      credentials: {
        email: { label: "Username", type: "text" },
        password: { label: "Password", type: "password" },
      },
      authorize(credentials: any, req) {
        // database operations
        return {
          id: "1",
          Email: credentials.email,
        };
      },
    }),
  ],
};

iv adding required environment variables

next auth needs the following environment variable

# this is for jwt encording
NEXTAUTH_SECRET='supersecretkey'

#used to specify the url to the site
NEXTAUTH_URL='http://localhost:3000'

shifting to handling sessions in the client side

v creating a session provider

mkdir providers

touch SessionProvider.tsx

then add the following code

"use client";

import React from "react";
import { SessionProvider } from "next-auth/react";

type sessionProps = {
  children: React.ReactNode;
};
function NextAuthSessionProvider({ children }: sessionProps) {
  return <SessionProvider>{children}</SessionProvider>;
}

export default NextAuthSessionProvider;

vi adding the provider to layout.tsx

include it to the rootLayout function


export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <NextAuthSessionProvider>{children}</NextAuthSessionProvider>
      </body>
    </html>
  );
}

and thats it , you can use the usesession hook to check if someone is logged in or not.

here is a link to the full code https://github.com/nelsonchege/next-auth-with-app-directory

Demystifying Hash Tables: Understanding the Inner Workings of This Key Data Structure

Nelson chege — Sat, 22 Apr 2023 12:14:32 +0000

A hash map, also known as a hash table, is a data structure that enables fast and efficient lookup, insertion, and deletion of key-value pairs.

Because of their reliability hash tables are used in database indexing, caching, programming compilation, and many more places

Think of a hash table as living in a gated community where each home has an address(key) and the home as the value, if you want to get to a particular home you go straight to the address, getting the value is independent of the size of the hash table

how is data stored into the hash table?

The key is transformed into an index that points to a memory address, this is done by a hashing function.

There are different hashing functions that can be used.

The most straightforward hashing function works by (if the key is a string) converting each character into an ASCII value and then summing it. once you get the sum you divide the number by the size of the hash table getting the remainder.

The remainder is then used as the index for that value

Another hashing function is the folding method, in this function, the key is divided into equal parts then added together, then divide by the size of the hash table getting the remainder and index

one issue usually comes with hash functions : collusions
This occurs when a hashing function returns an index that has already been assigned a value.

there are two ways that are used to address this occurring issues.

open addressing
chaining/closed addressing

open addressing
when the hashing function returns an index that is already in use it moves to the next position, and checks if is empty. if empty it takes that space else it continues moving to the next position till it finds an empty space

This is referred to as linear probing

This introduces another issue where values are not equally distributed in the hash table.

New methods for finding an empty space have been created to try and solve this second issues which they include:

plus 3 rehash
quadratic probing
double hashing

chaining/closed addressing

This deals with collusion by making the index a pointer to a linked list, if an index is duplicated it's just added to the linked list.

Popular programming languages such as Python, JavaScript, c++, and Ruby use chaining in their hash functions

Even though generally hash tables are fast, the performance of a hash table is highly dependent on the quality of the hash function.

what are some of the factors to consider when creating the perfect hash function ?

minimize collusions
uniform distribution of hash values
easy to calculate
resolve any collusion

If you would like to know more about optimizing the hash function here is a video that I found useful, even though at points in the video I was just hearing him speaking in tongues :)

Conclusion

Hash tables are an efficient data structure that allows for fast data retrieval and insertion by using a hash function to map keys to indices in an array. They have a constant average time complexity of O(1) for insertion, deletion, and retrieval operations, making them ideal for storing and accessing large amounts of data quickly. Hash tables can be implemented in a variety of programming languages and have numerous applications in areas such as databases, search engines, and cryptography. However, the efficiency of a hash table may be affected by collisions, which can be mitigated through various collision resolution techniques. Overall, hash tables are a valuable tool for optimizing data access in software development

Node-based Data Structure

Nelson chege — Thu, 16 Mar 2023 22:58:39 +0000

while searching for solutions on Google, I came across a new term, "node-based data structure" ,
this term was new to me and I decided to dig in a little bit deeper.
These are some of the concepts that I discovered while researching node-based data structures.

Node-based data structures are data structures that organizes and stores data as interconnected nodes. Each node contains data and one or more pointers that point to other nodes.

This structure allows for efficient traversal and manipulation of the data

what is a node ?
I explain this using an analogy;
think of how the TV show The Amazing Show worked, contestants reached a given destination and got instructions on how to reach the next destination. Now replace the destination as the data in a node and the instructions as the pointer to the next node

Simply node-base data structures are a collection of linked nodes that point to each other:

the two main node-base data structures are:
Linked List: its a data structure that can have a node that has a single pointer pointing to a next node singular linked list or two pointers, one pointing the previous and one pointing to the next doubly linked list

Tree: for trees you can have a multiple pointers pointing to the next nodes. Trees don't have pointers for previous nodes, this create a parent-child relationship between the nodes

Implementation of A Tree
we can represent a math equation into a tree
Using BODMAS we can create tree for this equation

3 * (y + x) as

     *
    / \
   /   \
  3  (y + x)

and 3 * y + X as

     +
    / \
   /   \
(3 * y)  x

Below is the code representation of the Tree


# represent 3 * (y + x) and  3 * y + X as trees 

class exp():
    pass

class Times(exp):
    def __init__(self,l,r):
        self.r = r
        self.l = l

    def __str__(self):
        return str(self.r) +" * "+ str(self.l)

    def eval(self,env):
        return self.r.eval(env) * self.l.eval(env)

class Plus(exp):
    def __init__(self,l,r):
        self.r = r
        self.l = l

    def __str__(self,l,r):
        return str(self.r) + " + " + str(self.l) 

    def eval(self,env):
        return self.r.eval(env) + self.l.eval(env)

class Const(exp):
    def __init__(self,val):
        self.val = val

    def __str__(self):
        return str(self.val)

    def eval(self):
        return self.val

class Variable(exp):
    def __init__(self,name):
        self.name = name

    def eval(self,env):
        return env[self.name]



# 3 * (y + x)
e1 = Times(Const(3),Plus(Variable('y'),Variable('x')))

# 3 * y + x
e2 = Plus(Times(Const(3),(Variable('y'))),Variable('x'))

# to get the calculations

env = {"x":2,"y":4}

e1.eval(env)
e2.eval(env)

CSS tips for Responsive Web design

Nelson chege — Sun, 12 Mar 2023 11:24:28 +0000

Crafting a responsive website can be a daunting undertaking that demands a deliberate approach to guarantee a visually appealing layout on all devices.

The growing array of devices and screen sizes presents challenges in creating a straightforward and efficient design.

Here are some of some CSS tricks and properties to creating a more responsive designs

1. aspect ratio

this css property lets you have consistent ratios of width and height for a html element in relation to its parent element or its-self

.container{
   aspect-ratio: 16/9;
}

The relationship for the element having the css class container will be the width of 16 by the height of 9

you can also set the width or height for which the aspect ratio will get its measurement from instead of getting from the parent element

.container{
   aspect-ratio: 16/9;
   width: 100px;
}

2. Use rem or em instead of px

Rem and em are relative units that adjust their size based on the font size of their parent element. This means that if the font size of the parent element changes, all child elements that use rem or em will adjust their size accordingly.

This makes it easier to create responsive designs that can adapt to different screen sizes and devices.

On the other hand, px is an absolute unit that sets the font size to a fixed pixel size. This can create issues with scalability, especially when designing for different devices and screen sizes.

Additionally, using px can make it difficult to implement accessibility features like zooming, as the font size will not adjust when the user zooms in or out.

3. min() , max() and clamp()

min()

starting of with min, it takes at-least two argument which are the desired width and the maximum width

.container{
   width: min(100px,70%);
}

the function only picks the smallest value so it doesn't care much on the placement of the arguments

the 70% is the desired width and the element wont have a width greater than 100px

# same as using min()
.container{
   width: 70%;
   max-width: 100px;
}

max()

max() works opposite to how min() works

.container{
   width: max(100px,70%);
}

# same as using max()
.container{
   width: 70%;
   min-width: 100px;
}

clamp()

clamp() takes three arguments: a minimum value, a preferred value, and a maximum value. The preferred value is the size you want to use, and the other two values set the range in which the preferred value can adjust

.container{
  font-size: clamp(16px, 3vw, 24px);
}

4. Text-overflow

You know those moments that you are trying to fit content in a div but is making one div bigger than the other divs in maybe in you flex row, well this solves that.

it adds three dots to content that is longer than the space in the parent div has

.container {
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

5. Media-query

without forgetting the big boy in responsive design,Media-query allows you adjust to different device properties, such as screen size or orientation.

here is a basic view on how they work

@media only screen and (max-width: 768px) {
  .menu {
    display: none;
  }
}

for the above example,the .menu element will be hidden on screens with a width of 768 pixels or less, allowing for a better user experience on smaller screens.

for a more deeper understanding of Media-query heres the link to the documentation

And those are some of many CSS properties that you can use for a more responsive web design

Zustand, simplified redux

Nelson chege — Thu, 23 Feb 2023 23:37:11 +0000

Having Used Redux toolkit, it really does the job well having no issues with it. Setting Up the store makes using it in the rest of your project quite Easy.

But one thing about creating the Redux stores is that it's really verbose and you have to write a lot more boilerplate code.

This is the part where Zustand comes in, Doing what redux is doing but with really less code. ill be creating a simple project to show you how easy it is to use Zustand

first, create a folder in the root directory that will contain the costume Hook for our state

touch store/useItemsStore.js

in that file, the hook is created as follows

import {create} from 'zustand';

const useMyStore = create((set) => ({
  items: [], // initial state
  addItem: (newItem) => set((state) => ({ items: [...state.items, newItem] })),
  deleteItem: (index) =>
    set((state) => ({ items: state.items.filter((_, i) => i !== index) })),
}));

this will create an empty list and two functions for adding and deleting items

when you want to use the above state and functions in you components you'll do the following

import { useMyStore } from './store/useItemsStore';

function MyComponent() {
  const addItem = useMyStore((state) => state.addItem);

  const handleClick = () => {
    addItem('New Item');
  };

  return (
    <>
      <button onClick={handleClick}>Add Item</button>
      {/* Render the list of items here */}
     <ul>
        {items.map((item, index) => (
          <li key={index}>
            {item} <button onClick={() => handleDelete(index)}>Delete</button>
          </li>
        ))}
      </ul>
    </>
  );
}

And that's it. not a lot of code and still functions similarly to redux. it has been fun using it for small side projects so far

here is a simple Todo App that i use Zustand to manage my state: https://react-zustand.netlify.app/

Getting started with Nextjs

Nelson chege — Tue, 14 Feb 2023 02:17:08 +0000

Next.js is a relatively new JavaScript framework for building applications with React.

Why Nextjs?

Nextjs generates static html pages which reduce the initial loading of reacts application and its super friendly for SEO purposes

In this blog post, we'll take a closer look at how Next.js works and how you can get started building your own web applications with this powerful framework.

How Next.js Works

Next.js is built on top of React and uses the React component model to define your application's pages and components. It handles all the complicated tasks of rendering your pages on the server, so you can focus on writing the code that defines your application's functionality.

Here's a high-level overview of how Next.js works:

The Client Makes a Request: When a user visits your Next.js application, the client sends a request to the server for the requested page.
The Server Renders the Page: Next.js will handle the request on the server and generate the HTML for the requested page. This HTML will include the content of your React components and any data that needs to be passed from the server to the client.
The Server Sends the HTML to the Client: Once the HTML has been generated, Next.js will send it to the client, which will display the page in the user's browser.
The Client Renders the Page with React: The client will then use React to render the page and handle any dynamic interactions. This makes it possible to build rich, interactive web applications with Next.js.

Nextjs offers four types of rendering:

1. Server-Side Rendering (SSR): This type of rendering generates the HTML for your pages on the server and then sends it to the client. SSR provides a better user experience as pages load faster, and it's ideal for dynamic web applications that require server-side processing.

2. Static Site Generation (SSG): This type of rendering generates a static version of your website that can be served without the need for a server. SSG is a great solution for websites that don't require any dynamic content or user interactions

3. Client-Side Rendering (CSR): This type of rendering generates the HTML for your pages on the client side using JavaScript. CSR is ideal for applications that require fast and smooth user interactions, but it can have negative effects on the initial loading time of the page.

4. Incremental Static Regeneration (ISR): ISR is a combination of Static Site Generation (SSG) and Server-Side Rendering (SSR), and it provides the benefits of both. With ISR, you can have pages that are pre-rendered as static HTML at build time, and then updated incrementally on the server as data changes. This provides the fast loading times of SSG, with the ability to handle dynamic data updates, just like in SSR.

In conclusion, Next.js is a powerful and versatile framework for building modern web applications. With its focus on server-side rendering, it provides a fast and efficient solution for building websites and web applications with dynamic content.

DevFest Nairobi 2022

Nelson chege — Mon, 07 Nov 2022 06:18:02 +0000

The Annual Google devfest Nairobi happened over the weekend on Saturday and what an amazing event it was.This was my first devfest i have attended.met old friends,new like-minded people and also learnt new things in the process.

Here are some of the notes that i was able to take during the different session:

Starting a Startup

some of the steps that one needs to take while starting a startup

create a team- create a team that understand and believe in your idea

2.MVP - Having a minimum viable product

make decisions on tech and infrastructure that will be used to create your product

4.acquire customers - you should also consider getting customers and not only focusing on developing your product

5.scaling up- this is the next step after your product has started getting traction.Also joining an accelerator program helps Google offering one

Everything APIs

types of API endpoints

Soap
XML
REST
Grpc

tips on naming conventions

use nouns and not verbs
consistency is key in naming your endpoints
use lowercase
don't use method name in URL
the name should try to be self explanatory

some of the ways to secure endpoints

Basic auth (username & password)
JWT
OpenID and Oauth

what is throttling ? limiting the number of request made by a user in a certain period

tools used for creating, testing and documenting API endpoints

Swagger UI
Swagger Hub
Postman
Redocly

types of test that can be done on API endpoints

Unit test
Integration test
Load / performance test
security test

tools used to test API endpoints

JMeter
Soup UI
CuCumber
Rest-Assured (the person how named this needs a pay raise)

Serverless Backend infrastructure with AWS Lambdas

AWS lambda more like Google cloud Function
Api Gateway replaces Web server hence acts as point of contact when the the client sends a request

AWS Lambdas has:

Handlers
Events

The events was really enjoy-full and looking forward to attending to more of such events

creating a simple database using SQL

Nelson chege — Sat, 29 Oct 2022 23:26:58 +0000

assuming you have some basic understanding of database and SQL, the logical next step is to interact with SQL and creating databases and have a feel of writing queries.If you what a quick reminder of theory behind SQL, here is a blog to help you on that.

On this blog, i will be taking you through creating a simple database for a coffee shop.

Firstly we will define the schema for the database tables which is simply the blueprint of how the database will look like.

The coffee shop database will have three tables:

Coffee Menu
Employee table
Orders table

columns for Coffee Menu table include:

id
Coffee name
price

columns for Employee table include:

id
employees name
role

columns for Orders table include:

id
coffee ordered (foreign key from coffee menu table)
served by (foreign key from Employees table)
order time

with this we have a basic look at how the database looks like and now comes the best but running some SQL. i'll be using PostgreSQL but the commands will still work for any RDBMS.
the command for creating a database is:

CREATE DATABASE <db_name>;

note that any SQL query written must end with a semi colon.In this case i will run the below command to create the table.

CREATE DATABASE coffee_shop;

next step is witting queries to create the different tables .The SQL format for creating a table is:

CREATE TABLE table_name ( column_name datatype, column_name datatype, …. );

There are different datatypes that can be stored in a database column.Read more on the different datatypes Here. For our tables i will run the following SQL queries:

CREATE TABLE coffee_menu ( id INTEGER PRIMARY KEY, coffee_name VARCHAR(255), price FLOAT );

CREATE TABLE Employees( id INTEGER PRIMARY KEY, employees_name VARCHAR(255), role VARCHAR(255) );

CREATE TABLE Orders ( id INTEGER PRIMARY KEY, coffee_ordered INT, served_by INT, order_time TIMESTAMP DEFAULT CURRENT_TIMESTAMP, FOREIGN KEY (coffee_ordered) REFERENCES coffee_menu(id), FOREIGN KEY (served_by) REFERENCES Persons(id) );

That is it, that's all the queries needed to create our database.this will create all the tables and required columns for each table.

SQL 101

Nelson chege — Sun, 23 Oct 2022 01:40:56 +0000

hi ,welcome to my first technical blog in hopefully a series of more to come. I will be discussing about different topics around technology.

lets talk about SQL.

what is SQL?
the definition of SQL is structured query language.
SQL acts to other similar languages such as JavaScript , python and C++ only that its giving command to the database.

The four most popular SQL commands forms the acronym
CRUD :

create
read
update
delete

A database is a collection of organized tables that act similar to excel spread sheet. yeah database are excel spread sheet on some serious steroids.

These database are managed by Database management system that ensure everything is working properly with the database. Some of the available database management system (DBMS) include:

PostgreSQL
Microsoft sqlserver
MySQL
oracle.

there are two types of database: relational database and
non-relational database

relational database consist of tables that have relationship between them. Example is when one table has a data that reference data from another table

before forgetting schemas ,a schema is the representation of any kind of structure we are defining around the data that will be inserted into a table

when creating relationship between table you must consider normalization, what is that you ask? this is the structuring of data in the lowest normal that ensure that data is not duplicated across different tables and also more redundancy of data