DEV Community: AjeaS

Software Guide

AjeaS — Tue, 15 Jul 2025 02:08:26 +0000

Runtime environment

is an environment to run code on the server (outside the browser) this environment has access to file systems, networks request, and ability to create a server. However, it’s tedious to handle api routes/middleware within a runtime environment that’s where Server engines (aka framework) comes into play.

Without a runtime, code can’t be run outside a browser.

Examples of runtime environments

Node
Deno
Bun
Edge

Server Engines

A server engine (aka web framework) is a library or tool that helps you build servers easily by managing things like:

HTTP routing
Parsing requests (body, params, etc.)
Sending responses
Middleware
Error handling

Examples of server engines(frameworks)

Express (uses node runtime)
Fastify (uses node runtime)
Nestjs (uses node runtime)
Nitro (can use any runtime either node, deno, bun,edge)
Hono (can use any runtime either node, deno, bun,edge)

Full-Stack vs API-First Frameworks

Some of the frameworks are more API focused than others. Meaning they handle routes/api with minimal html rendering.

API-First Frameworks:
• NestJS: Primarily API-first, focused on backend logic (APIs, GraphQL, WebSockets, etc.).
• Can serve HTML, but not built for that (not its strength).
• Great for building APIs, often paired with React, Vue, or mobile frontends.
Full-Stack Frameworks:
Full-stack means the framework can handle both frontend rendering (HTML/SSR) and backend API logic.
Examples:
• Next.js: Full-stack React framework with SSR, API routes, and serverless functions.
• Nuxt.js: Full-stack Vue framework with SSR and API routes via Nitro engine (multi-runtime).

TL;DR Cheat Sheet
• ✅ Nuxt Plugin → Vue app logic (client/server/SSR setup)
• ✅ Nitro Plugin → Server-only logic for API requests, SSR, headers, middleware
• ✅ Nuxt Module → Tooling + config to extend Nuxt itself (like making your own library or utility)

Build tools

are programs that help prepare your code base for production. There are many build tools based on categories

Type	Example Tools	What they do
Bundlers	Webpack, Vite, esbuild, Rollup	Combine multiple files into fewer files, often with tree-shaking and code splitting
Transpilers	Babel, TypeScript, PostCSS	Convert code from one format or version to another (e.g., ES6 → ES5)
Task Runners	Gulp, npm scripts	Automate tasks like minification, image compression, copying files
Package Managers	npm, Yarn, pnpm	Manage dependencies and scripts
Dev Servers	Vite, webpack-dev-server	Serve your app with hot module reloading (HMR) for development

Reason for build tools? A lot of code we write majority of it is based on a framework (react,vue etc) all the .vue / .jsx / typescript / SCSS we write, still needs to be compiled into plain HTML, CSS and JavaScriptat the end of the day. So, that’s why we need these build tools to do it for us.

Authentication Strategies

*Session-based vs JWT-based vs JWT-cookie based. *

Session based

Mostly handled on the server.

Flow —> when a user logs in (username, password) server checks credentials.
--> If valid, server creates a session which will hold session-id and user-info.
--> The user-info is stored in either DB or memory and the session-id will be set in a (secure) cookie and attached to browser(client).
--> Once it’s set, the client will send this cookie automatically on every other request.
--> The server will check the cookie for its session-id to match against user-info, if matches user is authenticated.

JWT-based

Mostly handled on the client.

When a user logs in with credentials (username, password), its sent to server. Server verifies credentials, if valid server generates JWT token and assigns data and secret to it. It then gets sent to client for it to be stored in either localstorage, sessionstorage. For protected routes, the client passes this token in requests through the authorization header (authorization: Bearer <Token>). Lastly, server gets request and verifies the token by the secret to determine access.

JWT with Cookie

Instead of manually storing it in localstorage or sessionstorage the server stores it in a cookie on the client. The browser automatically sends it on every request. No need to manually send it through authorization header.

Rendering

SSR —> the html and data is generated on server, per request. User makes a request, server sends back html with data. (Fast speed, better seo)

CSR —> JS renders html and does data fetching on client. So html isn’t rendered until JS is done. User makes a request, server sends back empty.
<div id=“app”></div>
The client then populates the rest (html,data) (slow speed, not good seo)

SSG —> when the app gets built for production, the data and html is generated before hand. This way, the data and html is available to server already when client makes request. (Faster speed, better seo)

Example frameworks that handles this

Nextjs
Nuxtjs
Astro
Svelte-kit

Web security

CORS —> web security features that restricts your Frontend from making API calls from a different domain. The API server would need to allow access for that frontend to make calls. If CORS is not configured, the API server is accessible to anyone (dangerous).
Same domain —> no Cors needed
FE: https://mycoolapp.com
BE: https://mycoolapp.com/api/posts

Different domain —> Cors need to allow access
FE: https://mycoolapp.com
BE: https://api.mycoolapp.com/posts

HTTPS (Hypertext Transfer Protocol Secure) —> ensures a secure communication between client and server.

Content Security Policy (CSP)
What it is:
A browser feature that lets you control which sources (scripts, styles, images, etc.) are allowed to load on your site.

Why it matters:
It helps prevent Cross-Site Scripting (XSS) and data injection attacks.

Example:

Content-Security-Policy: default-src 'self'; script-src 'self' cdn.example.com

This means:
• Load resources only from the same origin ('self')
• Scripts only from self or cdn.example.com

OWASP Security Risks

What it is:
A list of the top 10 most critical web application security risks, maintained by OWASP.

Why it matters:
It’s a go-to standard for developers, security teams, and companies to follow best practices.

Examples of OWASP Top 10 Risks (2023):
• Broken Access Control
• Cryptographic Failures
• Injection Attacks (like SQL/XSS)
• Security Misconfiguration
• Vulnerable & Outdated Components

Good practice:
Use the OWASP list to audit your app regularly, especially before launching.

To be continued ...

Theme Switcher in Astro project

AjeaS — Wed, 04 Jun 2025 20:38:26 +0000

In short, I created a simple theme switcher using Tailwind CSS and some JS. Here's how I did it.

I've broken it down into 3 sections
global.css
Layout.astro
ThemeToggle.astro

global.css

I defined light theme color variables in the :root by default. Then, for dark mode, I re-defined those same variables for the dark theme. The dark theme only applies if there is a data-theme="dark"attribute set on the HTML tag.

:root {
    --font-body: DM Sans, sans-serif;
    --font-fira: Fira Code, monospace;

    --text-2xl: 2.5rem;
    --text-xl: 2rem;
    --text-lg: 1.75rem;
    --text-md: 1.5rem;
    --text-sm: 1.25rem;
    --text-xs: 1.125rem;
    --text-base: 1rem;

    --color-neutral-900: #1c1a19;
    --color-neutral-800: #201e1d;
    --color-neutral-700: #34302d;
    --color-neutral-600: #4a4846;
    --color-neutral-400: #c0bfbf;
    --color-neutral-300: #dedcda;
    --color-neutral-200: #efedeb;
    --color-neutral-100: #fbf9f7;
    --color-blue-900: #022b4a;
    --color-blue-800: #5792c0;
    --color-blue-700: #75b0de;
    --color-blue-500: #93cefc;
    --color-blue-200: #e1f1fe;
    --color-green-900: #132a18;
    --color-green-700: #008531;
    --color-green-500: #9dd3a9;
    --color-green-200: #e9f5ea;
    --color-yellow-900: #4a3003;
    --color-yellow-700: #ea9806;
    --color-yellow-500: #facc79;
    --color-yellow-200: #fff5e1;
    --color-red-600: #d92d20;
    --color-red-400: #f04438;
    --color-white: #ffffff;

    /* light mode */
    --border: var(--color-neutral-200);
    --background-color: var(--color-neutral-100);
    --text-color: var(--color-neutral-600);

    --heading-text: var(--color-neutral-700);

    --header-background: var(--color-white);
    --header-text: var(--color-neutral-800);

    --menu-toggle-background: var(--color-neutral-800);
    --menu-toggle-text: var(--color-white);

    --nav-background: var(--color-white);
    --nav-text: var(--color-neutral-600);

    --icon-fill: var(--color-neutral-900);
}

/* dark mode */
html[data-theme="dark"] {
    --border: var(--color-neutral-700);
    --background-color: var(--color-neutral-900);
    --text-color: var(--color-neutral-400);

    --heading-text: var(--color-white);

    --header-background: var(--color-neutral-800);
    --header-text: var(--color-white);

    --menu-toggle-background: var(--color-white);
    --menu-toggle-text: var(--color-neutral-800);

    --nav-background: var(--color-neutral-800);
    --nav-text: var(--color-neutral-400);

    --icon-fill: var(--color-white);
}

NOTE: within my components, I use these color variables so they will switch accordingly when toggling the theme.
ex:

<div className="flex items-center justify-between gap-4 
bg-(--header-background) text-(--header-text) 
transition-colors duration-500 ease-in relative 
mt-5 mb-3 rounded-[10px] p-[6px] border border-(--border)">

Layout.astro

I have a script tag in the head with a is:inline attribute so that this code runs before the HTML is rendered. In a nutshell,

I'm getting the theme from localstorage and if it doesn't exist it's set to "light" by default.
I'm setting the data-theme attribute to that value.

<html lang="en">
    <head>
        <ClientRouter />
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width" />
        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
        <meta name="generator" content={Astro.generator} />
        <title>Personal Blog</title>

        <script is:inline>
            function applyTheme(doc) {
                // 1. Get the stored theme preference from localStorage
                const storedTheme = localStorage.getItem("theme") || "light";

                doc.documentElement.setAttribute("data-theme", storedTheme);
            }

            // Apply theme on initial page load
            applyTheme(document);

        </script>
    </head>
</html>

NOTE: I'm using client-side routing with ClientRouter. However, when navigating to a new page (e.g. about) the old DOM is removed (along with its event listeners/data attributes) and the new DOM is created but without event listeners/data attributes attached.

So the data-theme attribute is not attached to the new DOM (about page).

Example: on the Home page, the theme is set to dark mode, if I go to the About page(new DOM everything removed) theme will be set back to default light mode.

FIX: to fix this, I needed to ensure that the data-theme attribute is set on the new DOM upon navigating.

So I used the astro:before-swap event listener to ensure the correct theme is applied to each page upon navigation.

// Apply theme to the new document during Astro View Transitions
            document.addEventListener("astro:before-swap", (event) => {
                applyTheme(event.newDocument);
            });

ThemeToggle.astro

This component

Sets the data-theme attribute based on localstorage value
Displays the correct icons based on theme
Saves the theme to localstorage

<script>
    // Toggle theme icons and set theme attribute
    function applyTheme(theme: string) {
        const root = document.documentElement;
        const moonIcon = document.getElementById("moonIcon");
        const sunIcon = document.getElementById("sunIcon");

        // Set theme attribute and persist in localStorage
        root.setAttribute("data-theme", theme);
        localStorage.setItem("theme", theme);

        if (!moonIcon || !sunIcon) return;

        if (theme === "dark") {
            sunIcon.classList.remove("hidden");
            moonIcon.classList.add("hidden");
        } else {
            sunIcon.classList.add("hidden");
            moonIcon.classList.remove("hidden");
        }
    }

    function setUpThemeToggle() {
        const toggleButton = document.getElementById("themeToggle");
        if (!toggleButton) return;

        // Initialize from saved theme or fallback to light
        let currentTheme = localStorage.getItem("theme") || "light";
        applyTheme(currentTheme);

        toggleButton.addEventListener("click", () => {
            currentTheme = currentTheme === "light" ? "dark" : "light";
            applyTheme(currentTheme);
        });
    }

    // runs on page load
    setUpThemeToggle();

    // Reapply theme after Astro page transitions
    document.addEventListener("astro:after-swap", () => {
        setUpThemeToggle();
    });
</script>

astro:after-swap fires after page navigations. There I re-fetched the theme from localstorage to ensure the correct icon is displayed. Hope that makes sense.

Lastly, for full context here's the HTML for my theme button

<button
    id="themeToggle"
    class="rounded-lg border border-(--border) bg-(--background-color) cursor-pointer transition-colors duration-500 ease-in p-2"
>
    <MoonIcon id="moonIcon" className="w-6 h-6 hidden" />
    <Sun id="sunIcon" class="w-6 h-6 hidden" />
</button>

This is what's currently working for me at the moment. I'm open to suggestions on how to make it better/improve. 👌🙏🏽

Happy Coding!

Frontend Mentor.io Challenge: PhotoSnap Website

AjeaS — Tue, 23 Apr 2024 18:56:53 +0000

Project Name: PhotoSnap
Level: Advanced
Source Code
Live

Setup: I used Vite with Sass and deployed with Vercel.

Overview: I got to utilize CSS grid, and I'm starting to get more comfortable with it now.

Things I learned

Mixins for media queries (helpful link, Thanks Kevin P
(Note to self) Use the layout grid option in Figma to help visualize columns and rows.
Making a card taller than others using a CSS grid
How to deploy a Vite project to Vercel (what I learned in the previous project, but just forgot to mention)

Frontend Mentor.io Challenge: Designo Agency

AjeaS — Sat, 13 Apr 2024 14:01:42 +0000

Project Name: Designo Agency

Level: Guru (Hard)

Source code

Live Site

Setup: I used Vite with Sass and deployed with Vercel.

Overview: Out of all the projects I've done on this site, this is one of my favorites, mostly because I've learned so much. I used a combination of chatGPT, CSS god Kevin Powell, and Coder Coder throughout this project.

Things I learned

Positioning PNG images with object-fit and object position (helpful link)
On mobile, show overlay when the mobile menu is open (helpful video by Kevin Powell)
For loops in SCSS for background images (chatGPT).
Rotation of background images (chatGPT)

Positioning PNG images with object-fit and object position

The problem: I couldn't figure out how to position the image to be tucked within the hero section like the image below.

My solution: I wrapped the image in a container and added a position relative to the container.

Then, I positioned the image using object-fit and object-position. I could have used position:absolute for the image. However, I was having some issues with the sizing of the image fitting properly within the container. object-fit:none fixed this, that's when I discovered I could position it using object-position.

Lastly, I added an overflow:hidden on the entire section to hide the overlap of the image. Which gave it the tucked-in effect as desired.

&__image {
        position: relative;
        top: -180px;

        img {
            margin-inline: auto;
            object-fit: none;
            object-position: center top;
        }
    }

For loops in SCSS for background images (chatGPT)

The Problem: Since I'm not using any framework in this project, there was a lot of duplicate code happening (had very little js, so I didn't want to whip out react).

The Solution: With the help of chatGPT, I discovered you can do loops in SCSS. I needed this for background images.

End result

With this loop, I was able to set background images and hover states to my category items.

@for $i from 1 through 3 {
        &--bg#{$i} {
            $image: "";
            $hoverColor: rgba(231, 129, 107, 0.8);

            @if $i == 1 {
                $image: "image-web-design-large.jpg";
            } @else if $i == 2 {
                $image: "image-app-design.jpg";
            } @else if $i == 3 {
                $image: "image-graphic-design.jpg";
            }

            cursor: pointer;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;

            background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
                url("/assets/home/desktop/#{$image}");

            &:hover {
                background-image: linear-gradient($hoverColor, $hoverColor),
                    url("/assets/home/desktop/#{$image}");
            }
        }
    }

html for clarity

<body>
    <div class="category__item category--bg1">
        <h3>Web Design</h3>
        <a href="/web/index.html" class="category__link">
            <p>View Projects</p>
            <img src="/assets/shared/desktop/icon-right-arrow.svg" alt="icon-right-arrow" />
        </a>
    </div>

    <div class="category__item-container">
        <div class="category__item category--bg2">
            <h3>App Design</h3>
            <a href="/app/index.html" class="category__link">
                <p>View Projects</p>
                <img src="/assets/shared/desktop/icon-right-arrow.svg" alt="icon-right-arrow" />
            </a>
        </div>

        <div class="category__item category--bg3">
            <h3>Graphic Design</h3>
            <a href="/graphic/index.html" class="category__link">
                <p>View Projects</p>
                <img src="/assets/shared/desktop/icon-right-arrow.svg" alt="icon-right-arrow" />
            </a>
        </div>
</body>

Coding Snippets Dev Log (10/14/23)

AjeaS — Sun, 15 Oct 2023 20:29:12 +0000

Update (10/14/23):

topics covered:

using Prisma for ORM with mongoDB
fetching data sidebar component
dynamic routes (layout wrapper)

Prisma for ORM with mongoDB

I followed this guide to get started with using Prisma with mongoDB.
In a nutshell;

it generates a prisma/schema.prisma file where I store my models.
initialized a .env for my DB connection string.

this is what my schema looks like so far. I wanted to keep it simple.

prisma/schema.prisma


// This is your Prisma schema file,
// Learn more about it in the docs: https://pris.ly/d/prisma-schema

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

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

model CodeSnippet {
  id     String      @id @default(auto()) @map("_id") @db.ObjectId
  title  String
  code   String

  folder Folder?  @relation(fields: [folderId], references: [id])
  folderId String? @db.ObjectId
}

model Folder {
  id       String        @id @default(auto()) @map("_id") @db.ObjectId
  name     String
  icon     String
  snippets CodeSnippet[]
}

Each Folder can have multiple CodeSnippets. As well a CodeSnippet can belong to a Folder.

Lastly, I installed prisma client to query the DB on the front-end with npm install @prisma/client

I created an instance of prisma client to reuse throughout
src/lib/db.ts

import { PrismaClient } from '@prisma/client';

declare global {
  var prisma: PrismaClient | undefined;
}

const prisma = global.prisma || new PrismaClient();

if (process.env.NODE_ENV === 'development') global.prisma = prisma;

export default prisma;

With some googling, I found that the reason for doing it this way. In development, because of hot-reload, a new instance of the Prisma client gets created each time, which results in multiple instances (not good). But, using a global var keeps the same instance on each refresh. Therefore, we need to set it globally in development.

fetching data sidebar component

In the SideBar.tsx file I'm using CSS modules for styling and I split it up into 3 sections.

user section where the user image will be after login
the list of folders fetched from the DB
Add a folder button component, that when clicked shows a prompt

import Image from 'next/image';
import AddFolderButton from '../AddFolderButton';
import FolderList from '../FolderList';
import styles from './SideBar.module.css';

export default async function SideBarMenu() {
  return (
    <aside className={styles.aside}>
      {/* USER */}
      <section className={styles.user_section}>
        <Image
          priority
          src="/user.png"
          width={100}
          height={100}
          alt="Picture of author"
        />
        <h3>John Doe</h3>
      </section>

      {/* FOLDERS */}
      <section className={styles.folder_list}>
        <h5>Folders</h5>
        <FolderList />
      </section>

      {/* ADD FOLDER */}
      <section className={styles.new_folder_btn}>
        <AddFolderButton />
      </section>
    </aside>
  );
}

The add folder button is a client component, so I added the 'use client' directive at the top.

'use client';
import { createFolder } from '@/lib/folders/actions';
import Image from 'next/image';

const AddFolderButton = () => {
  async function handleSubmit() {
    let folderName: string | null = prompt('Please enter folder name:');

    if (folderName !== null) {
      await createFolder(folderName);
    }
    return;
  }

  return (
    <button onClick={handleSubmit}>
      <Image src="/plus.png" alt="plus" width={24} height={24} />
      <span>New Folder</span>
    </button>
  );
};

export default AddFolderButton;

The createFolder func takes in the folder name from the prompt and creates that folder. After, I revalidate the path which updates the cache and fetches new data.

export async function createFolder(name: string) {
  try {
    await prisma.folder.create({
      data: {
        name,
        icon: 'folder',
      },
    });

    revalidatePath('/');
  } finally {
    await prisma.$disconnect();
  }
}

The getFolders func fetches all folders from DB. I currently haven't implemented the error handling yet.

export const getFolders = cache(async () => {
  try {
    console.log('Its called');
    const folders = await prisma.folder.findMany();

    if (!folders.length) {
      // Handle error - look at docs
    }

    return folders;
  } finally {
    await prisma.$disconnect();
  }
});

Lastly, I fetched the data from FolderList.tsx component

import { getFolders } from '@/lib/folders/actions';
import Folder from './Folder';

const FolderList = async () => {
  const folders = await getFolders();

  return (
    <ul>
      {folders.map((folder) => {
        return <Folder folder={folder} key={folder.id} />;
      })}
    </ul>
  );
};

export default FolderList;

Folder.tsx

'use client'
import { Folder } from '@/lib/types';
import Link from 'next/link';
import { usePathname } from 'next/navigation'
import styles from '../components/Sidebar/SideBar.module.css';

const Folder = ({ folder }: { folder: Folder }) => {
  const pathname = usePathname();
  const decodedPathname = decodeURIComponent(pathname).replace(/%20/g, ' ');
  return (
    <Link href={`/folder/${folder.name}`} key={folder.id}>
      <div
        className={
          decodedPathname == `/folder/${folder.name}` ? `${styles.active}` : ''
        }
      >
        {folder.name === 'Favorites' ? (
          <svg
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M21.9843 10.7231L17.7562 14.4131L19.0228 19.9069C19.0898 20.1941 19.0707 20.4947 18.9678 20.771C18.8649 21.0474 18.6828 21.2874 18.4443 21.4608C18.2058 21.6343 17.9215 21.7336 17.6268 21.7464C17.3322 21.7591 17.0404 21.6847 16.7878 21.5325L11.9962 18.6263L7.21495 21.5325C6.96236 21.6847 6.6705 21.7591 6.37586 21.7464C6.08122 21.7336 5.79688 21.6343 5.55838 21.4608C5.31988 21.2874 5.13781 21.0474 5.03493 20.771C4.93205 20.4947 4.91292 20.1941 4.97995 19.9069L6.24464 14.4188L2.01557 10.7231C1.79189 10.5302 1.63015 10.2756 1.55063 9.99108C1.4711 9.70661 1.47733 9.40499 1.56855 9.12404C1.65976 8.8431 1.83189 8.59534 2.06335 8.41183C2.29481 8.22832 2.57529 8.11724 2.86964 8.0925L8.44401 7.60969L10.6199 2.41969C10.7336 2.14736 10.9252 1.91474 11.1708 1.75112C11.4164 1.5875 11.7049 1.50019 11.9999 1.50019C12.295 1.50019 12.5835 1.5875 12.8291 1.75112C13.0747 1.91474 13.2663 2.14736 13.3799 2.41969L15.5624 7.60969L21.1349 8.0925C21.4293 8.11724 21.7098 8.22832 21.9412 8.41183C22.1727 8.59534 22.3448 8.8431 22.436 9.12404C22.5272 9.40499 22.5335 9.70661 22.454 9.99108C22.3744 10.2756 22.2127 10.5302 21.989 10.7231H21.9843Z"
              fill="#FCCA46"
            />
          </svg>
        ) : (
          <svg
            width="25"
            height="24"
            viewBox="0 0 25 24"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M20.4231 6.75001H12.4156L9.83339 4.18969C9.69342 4.0498 9.5268 3.93889 9.34322 3.86341C9.15964 3.78792 8.96275 3.74938 8.76401 3.75001H3.78211C3.38088 3.75001 2.99609 3.90804 2.71238 4.18935C2.42867 4.47065 2.26929 4.85218 2.26929 5.25001V18.8081C2.26979 19.1904 2.42316 19.5568 2.69576 19.8271C2.96837 20.0974 3.33796 20.2495 3.72349 20.25H20.5073C20.886 20.2495 21.2491 20.1001 21.517 19.8346C21.7848 19.569 21.9355 19.209 21.936 18.8334V8.25001C21.936 7.85218 21.7766 7.47065 21.4929 7.18935C21.2092 6.90804 20.8244 6.75001 20.4231 6.75001ZM3.78211 5.25001H8.76401L10.2768 6.75001H3.78211V5.25001ZM20.4231 18.75H3.78211V8.25001H20.4231V18.75Z"
              fill={
                decodedPathname == `/folder/${folder.name}`
                  ? '#F4FAFF'
                  : '#FE6C0B'
              }
            />
          </svg>
        )}
        <li>{folder.name}</li>
      </div>
    </Link>
  );
};

export default Folder;

Dynamic Routes

In src/app/folder/[name]/page.tsx

When one of the sidebar menu links is clicked ->
<Link href={/folder/${folder.name}} key={folder.id}>
it redirects to this dynamic route. Right now, I have it rendering the params.

import Layout from '@/app/page';

const FolderPage = ({ params }: { params: { name: string } }) => {
  const decodedParams = decodeURIComponent(params.name).replace(/%20/g, ' ');
  return <Layout>{decodedParams}</Layout>;
};

export default FolderPage;

Later, I will have it render out all the code snippets within that folder.

Coding Snippets Dev Log (10/6/23)

AjeaS — Fri, 06 Oct 2023 19:06:24 +0000

Quick update, I got the project set up following this guide on "How to Build a Scalable Architecture for your Next.js Project".

I highly recommend reading that article. At a high level, it goes over how to scale a project if you're on a team or plan to expand later. The tools used, enforcing proper commit messages, and more.

Here's what the folder structure looks like at the moment following the mentioned article.

The repo can be found here.

Thats all for now.

Next I'll start working on one of the components for the app.

Coding Snippets Dev Log (10/2/23)

AjeaS — Mon, 02 Oct 2023 18:47:50 +0000

Update (10/2/23):

In the past few days, I've been working on the design aspect of the project. I wanted to make sure it was simple but efficient, and as I stated before, I'm not a designer. However, I'm happy with how it turned out :).

Login View

No Data View

With Data View

Active View

Add Snippet View

Edit Snippet View

Code Detail View

This is one of the pages I don't have mapped out yet. I'm not sure what it would look like until I add the code components.

Delete Snippet Modal

This is a good start for me, but I'll keep you guys updated if I make any design changes in the future.

I was inspired by this design since it's similar to what I'm trying to build.

I cheated a little and researched what package I would need for handling viewing the snippet in the user's chosen language along with syntax highlighting.

I found these 2 would do the trick

According to chatGPT, I can use Prismjs to get a list of supported languages available to choose from.

With that being said, I believe my next step would be to start setting up the project. Until next time 😉

Happy Halloween! 🎃

Coding Snippets Dev Log (9/27/23)

AjeaS — Wed, 27 Sep 2023 21:11:38 +0000

It's been a while since I've posted anything. But I've come back with a new project that has me excited about web dev again. This isn't my usual tutorial like my previous posts, but more of a documentation.

The Project

The project is a Code snippet web app. Users can add, delete, and favorite the code snippets they use the most, with a recommendation section based on their previous snippets. I've built something similar in iOS (minus the recommendation part). However, I thought it would be more efficient as a web app. Most of my coding/component searching happens on the computer instead of the phone.

Since I am more of a web dev than a designer, my design inspirations will come from Figma. I want to take more of a professional approach (as much as possible, considering it is just me) with this project.

These are the features I plan for the app to have and the resources I'll use to help throughout the process.

Features

Add snippet (copy reusable snippet)
Delete snippet
*Edit snippet?
Categories snippets by folders
Search list of snippets
Filter by tags
Accounts( google sign in)
Recommendations based on current snippets
Favorite snippets
*Drag and drop snippets to a folder?

Tech stack Idea

Nextjs, MongoDB, Node/Express, TensorFlow.js for ML or Python?

Using -> this guide to help structure a project in a better way

UI Concept

Of course there will be more pages down the line, this is just a rough draft.

Overall, it's going to be a fun but challenging project. So let the games begin!

P.S. I was watching Saw while writing this 😅, Happy Halloween!

Hire+Plus! For Employees Here's how I built it (UI - Modals)

AjeaS — Sat, 06 Aug 2022 08:50:14 +0000

Project Modal Component

inside components > modal > project-modal.component.tsx
ProjectPopupModalProps, defines the types of props being passed into this component. defaultFormFields fields of the modal to edit. Used defaultFormFields as the default state for projectFields.

import React, { ChangeEvent, useState } from 'react';
import { setProjects } from '../../app/features/profile/profileSlice';
import { useAppDispatch, useAppSelector } from '../../app/hooks';

interface ProjectPopupModalProps {
    isProjOpen: boolean;
    closeProjModal: () => void;
}
const defaultFormFields = {
    date: '',
    title: '',
    summary: '',
    github: '',
    projectUrl: '',
};

Functionality

onHandleChange, onTextareaChange - handle state changes for the form fields.

resetFormFields - resets form fields after submission.

addProject - set projects for the profile.projects state within profileSlice, resets form, and close modal afterward.

const ProjectPopupModal: React.FC<ProjectPopupModalProps> = ({
    isProjOpen,
    closeProjModal,
}) => {
    const dispatch = useAppDispatch();

    const { profile } = useAppSelector((state) => state.profile);

    const [projectFields, setProjectFields] = useState(defaultFormFields);

    const onHandleChange = (e: ChangeEvent<HTMLInputElement>) => {
        const { name, value } = e.target;
        setProjectFields({ ...projectFields, [name]: value });
    };
    const onTextareaChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
        const { value } = e.target;
        setProjectFields({ ...projectFields, summary: value });
    };
    const resetFormFields = () => {
        setProjectFields(defaultFormFields);
    };
    const addProject = (e: ChangeEvent<HTMLFormElement>) => {
        e.preventDefault();
        dispatch(
            setProjects([
                {
                    date: projectFields.date,
                    title: projectFields.title,
                    summary: projectFields.summary,
                    github: projectFields.github,
                    projectUrl: projectFields.projectUrl,
                },
                ...profile.projects,
            ])
        );
        resetFormFields();
        setProjectFields(projectFields);
        closeProjModal();
    };
    return ( {/* removed for simplicity */} );
};

export default ProjectPopupModal;

UI

Renders the pop-up modal if the isProjOpen is set to true, and all the fields to edit.

const ProjectPopupModal: React.FC<ProjectPopupModalProps> = ({
    isProjOpen,
    closeProjModal,
}) => {
    {/* removed for simplicity */}
    return (
        <div
            className="py-12 bg-gray-700 transition duration-150 ease-in-out z-10 absolute right-0 bottom-0 left-0 h-screen"
            id="modal"
            style={{ display: `${isProjOpen ? 'block' : 'none'}`, top: '850px' }}
        >
            <div role="alert" className="container mx-auto w-11/12 md:w-2/3 max-w-lg">
                <div className="relative py-8 px-5 md:px-10 bg-white shadow-md rounded border border-gray-400">
                    <div className="w-full flex justify-center text-gray-600 mb-3">
                        <svg
                            xmlns="http://www.w3.org/2000/svg"
                            className="icon icon-tabler icon-tabler-wallet"
                            width="52"
                            height="52"
                            viewBox="0 0 24 24"
                            strokeWidth="1"
                            stroke="currentColor"
                            fill="none"
                            strokeLinecap="round"
                            strokeLinejoin="round"
                        >
                            <path stroke="none" d="M0 0h24v24H0z" />
                            <path d="M17 8v-3a1 1 0 0 0 -1 -1h-10a2 2 0 0 0 0 4h12a1 1 0 0 1 1 1v3m0 4v3a1 1 0 0 1 -1 1h-12a2 2 0 0 1 -2 -2v-12" />
                            <path d="M20 12v4h-4a2 2 0 0 1 0 -4h4" />
                        </svg>
                    </div>
                    <h1 className="text-gray-800 font-lg font-bold tracking-normal leading-tight mb-4 text-center text-lg">
                        Add Project
                    </h1>
                    <form onSubmit={addProject}>
                        <label
                            htmlFor="name"
                            className="text-gray-800 text-sm font-bold leading-tight tracking-normal"
                        >
                            Project Name
                        </label>
                        <input
                            type="text"
                            required
                            name="title"
                            onChange={onHandleChange}
                            value={projectFields.title}
                            id="name"
                            className="mb-5 mt-2 text-gray-600 focus:outline-none focus:border focus:border-indigo-700 font-normal w-full h-10 flex items-center pl-3 text-sm border-gray-300 rounded border"
                            placeholder="Full stack react"
                        />
                        {/* Project Date */}
                        <label
                            htmlFor="date"
                            className="text-gray-800 text-sm font-bold leading-tight tracking-normal"
                        >
                            Date
                        </label>
                        <div className="relative mb-5 mt-2">
                            <div className="absolute right-0 text-gray-600 flex items-center pr-3 h-full cursor-pointer">
                                <svg
                                    xmlns="http://www.w3.org/2000/svg"
                                    className="icon icon-tabler icon-tabler-calendar-event"
                                    width="20"
                                    height="20"
                                    viewBox="0 0 24 24"
                                    strokeWidth="1.5"
                                    stroke="currentColor"
                                    fill="none"
                                    strokeLinecap="round"
                                    strokeLinejoin="round"
                                >
                                    <path stroke="none" d="M0 0h24v24H0z" />
                                    <rect x="4" y="5" width="16" height="16" rx="2" />
                                    <line x1="16" y1="3" x2="16" y2="7" />
                                    <line x1="8" y1="3" x2="8" y2="7" />
                                    <line x1="4" y1="11" x2="20" y2="11" />
                                    <rect x="8" y="15" width="2" height="2" />
                                </svg>
                            </div>
                            <input
                                name="date"
                                onChange={onHandleChange}
                                value={projectFields.date}
                                id="date"
                                className="text-gray-600 focus:outline-none focus:border focus:border-indigo-700 font-normal w-full h-10 flex items-center pl-3 text-sm border-gray-300 rounded border"
                                placeholder="MM/YY"
                            />
                        </div>
                        {/* project github */}
                        <label
                            htmlFor="github"
                            className="text-gray-800 text-sm font-bold leading-tight tracking-normal"
                        >
                            Project Github
                        </label>
                        <input
                            type="text"
                            name="github"
                            onChange={onHandleChange}
                            value={projectFields.github}
                            id="github"
                            className="mb-5 mt-2 text-gray-600 focus:outline-none focus:border focus:border-indigo-700 font-normal w-full h-10 flex items-center pl-3 text-sm border-gray-300 rounded border"
                            placeholder="www.projectOne@github.com"
                            required
                        />
                        <label
                            htmlFor="projectUrl"
                            className="text-gray-800 text-sm font-bold leading-tight tracking-normal"
                        >
                            Project URL
                        </label>
                        <input
                            name="projectUrl"
                            onChange={onHandleChange}
                            value={projectFields.projectUrl}
                            id="projectUrl"
                            className="mb-5 mt-2 text-gray-600 focus:outline-none focus:border focus:border-indigo-700 font-normal w-full h-10 flex items-center pl-3 text-sm border-gray-300 rounded border"
                            placeholder="www.coolwebapp.com"
                            required
                        />
                        <label
                            htmlFor="description"
                            className="text-gray-800 text-sm font-bold leading-tight tracking-normal"
                        >
                            Project Summary
                        </label>
                        <textarea
                            name="summary"
                            onChange={onTextareaChange}
                            value={projectFields.summary}
                            maxLength={300}
                            id="description"
                            className="mb-5 mt-2 text-gray-600 focus:outline-none focus:border focus:border-indigo-700 font-normal w-full flex items-center px-3 py-3 text-sm border-gray-300 rounded border"
                            placeholder="Authentication, testing, etc."
                            required
                        />
                        <div className="flex items-center justify-start w-full">
                            <button
                                type="submit"
                                className="focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-700 transition duration-150 ease-in-out hover:bg-indigo-600 bg-indigo-700 rounded text-white px-8 py-2 text-sm"
                            >
                                Submit
                            </button>
                            <button
                                type="button"
                                onClick={closeProjModal}
                                aria-label="close modal"
                                className="focus:outline-none focus:ring-2 focus:ring-offset-2  focus:ring-gray-400 ml-3 bg-gray-100 transition duration-150 text-gray-600 ease-in-out hover:border-gray-400 hover:bg-gray-300 border rounded px-8 py-2 text-sm"
                            >
                                Cancel
                            </button>
                        </div>
                    </form>
                    <button
                        className="cursor-pointer absolute top-0 right-0 mt-4 mr-5 text-gray-400 hover:text-gray-600 transition duration-150 ease-in-out rounded focus:ring-2 focus:outline-none focus:ring-gray-600"
                        aria-label="close modal"
                        onClick={closeProjModal}
                    >
                        <svg
                            xmlns="http://www.w3.org/2000/svg"
                            className="icon icon-tabler icon-tabler-x"
                            width="20"
                            height="20"
                            viewBox="0 0 24 24"
                            strokeWidth="2.5"
                            stroke="currentColor"
                            fill="none"
                            strokeLinecap="round"
                            strokeLinejoin="round"
                        >
                            <path stroke="none" d="M0 0h24v24H0z" />
                            <line x1="18" y1="6" x2="6" y2="18" />
                            <line x1="6" y1="6" x2="18" y2="18" />
                        </svg>
                    </button>
                </div>
            </div>
        </div>
    );
};

export default ProjectPopupModal;

Screenshot

Experience Modal Component

inside components > modal > experience-modal.component.tsx
ExperiencePopupModalProps, defines the types of props being passed into this component. defaultFormFields fields of the modal to edit. Used defaultFormFields as the default state for experienceFields.

import { ChangeEvent, useState } from 'react';
import { setExperiences } from '../../app/features/profile/profileSlice';
import { useAppDispatch, useAppSelector } from '../../app/hooks';

interface ExperiencePopupModalProps {
    isOpen: boolean;
    closeModal: () => void;
}
const defaultFormFields = {
    date: '',
    position: '',
    positionSummary: '',
};

Functionality

onHandleChange, onTextareaChange - handle state changes for the form fields.

resetFormFields - resets form fields after submission.

addExperience - set experiences for the profile.experience state within profileSlice, resets form, and close modal afterward.

const ExperiencePopupModal: React.FC<ExperiencePopupModalProps> = ({
    isOpen,
    closeModal,
}) => {
    const dispatch = useAppDispatch();
    const { profile } = useAppSelector((state) => state.profile);
    const [experienceFields, setExperienceFields] = useState(defaultFormFields);

    const onHandleChange = (e: ChangeEvent<HTMLInputElement>) => {
        const { name, value } = e.target;
        setExperienceFields({ ...experienceFields, [name]: value });
    };
    const onTextareaChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
        const { value } = e.target;
        setExperienceFields({ ...experienceFields, positionSummary: value });
    };
    const resetFormFields = () => {
        setExperienceFields(defaultFormFields);
    };

    const addExperience = (e: ChangeEvent<HTMLFormElement>) => {
        e.preventDefault();
        dispatch(
            setExperiences([
                {
                    position: experienceFields.position,
                    positionSummary: experienceFields.positionSummary,
                    date: experienceFields.date,
                },
                ...profile.experience,
            ])
        );
        resetFormFields();
        closeModal();
    };
    return ( {/* removed for simplicity */} );
};

export default ExperiencePopupModal;

UI

Renders the pop-up modal and all the fields to edit.

const ExperiencePopupModal: React.FC<ExperiencePopupModalProps> = ({
    isOpen,
    closeModal,
}) => {
    {/* removed for simplicity */}
    return (
        <div
            className="py-12 bg-gray-700 transition duration-150 ease-in-out z-10 absolute right-0 bottom-0 left-0 h-screen"
            id="modal"
            style={{ display: `${isOpen ? 'block' : 'none'}`, top: '880px' }}
        >
            <div role="alert" className="container mx-auto w-11/12 md:w-2/3 max-w-lg">
                <div className="relative py-8 px-5 md:px-10 bg-white shadow-md rounded border border-gray-400">
                    <div className="w-full flex justify-center text-gray-600 mb-3">
                        <svg
                            xmlns="http://www.w3.org/2000/svg"
                            className="icon icon-tabler icon-tabler-wallet"
                            width="52"
                            height="52"
                            viewBox="0 0 24 24"
                            strokeWidth="1"
                            stroke="currentColor"
                            fill="none"
                            strokeLinecap="round"
                            strokeLinejoin="round"
                        >
                            <path stroke="none" d="M0 0h24v24H0z" />
                            <path d="M17 8v-3a1 1 0 0 0 -1 -1h-10a2 2 0 0 0 0 4h12a1 1 0 0 1 1 1v3m0 4v3a1 1 0 0 1 -1 1h-12a2 2 0 0 1 -2 -2v-12" />
                            <path d="M20 12v4h-4a2 2 0 0 1 0 -4h4" />
                        </svg>
                    </div>
                    <h1 className="text-gray-800 font-lg font-bold tracking-normal leading-tight mb-4 text-center text-lg">
                        Add Job Experience
                    </h1>
                    <form onSubmit={addExperience}>
                        <label
                            htmlFor="title"
                            className="text-gray-800 text-sm font-bold leading-tight tracking-normal"
                        >
                            Position Title
                        </label>
                        <input
                            required
                            name="position"
                            onChange={onHandleChange}
                            value={experienceFields.position}
                            id="title"
                            className="mb-5 mt-2 text-gray-600 focus:outline-none focus:border focus:border-indigo-700 font-normal w-full h-10 flex items-center pl-3 text-sm border-gray-300 rounded border"
                            placeholder="Front-End Developer"
                        />
                        <label
                            htmlFor="description"
                            className="text-gray-800 text-sm font-bold leading-tight tracking-normal"
                        >
                            Position Summary
                        </label>
                        <textarea
                            required
                            name="description"
                            onChange={onTextareaChange}
                            value={experienceFields.positionSummary}
                            maxLength={1000}
                            id="description"
                            className="mb-5 mt-2 text-gray-600 focus:outline-none focus:border focus:border-indigo-700 font-normal w-full flex items-center px-3 py-3 text-sm border-gray-300 rounded border"
                            placeholder="Job details..."
                        />
                        <label
                            htmlFor="date"
                            className="text-gray-800 text-sm font-bold leading-tight tracking-normal"
                        >
                            Date
                        </label>
                        <div className="relative mb-5 mt-2">
                            <div className="absolute right-0 text-gray-600 flex items-center pr-3 h-full cursor-pointer">
                                <svg
                                    xmlns="http://www.w3.org/2000/svg"
                                    className="icon icon-tabler icon-tabler-calendar-event"
                                    width="20"
                                    height="20"
                                    viewBox="0 0 24 24"
                                    strokeWidth="1.5"
                                    stroke="currentColor"
                                    fill="none"
                                    strokeLinecap="round"
                                    strokeLinejoin="round"
                                >
                                    <path stroke="none" d="M0 0h24v24H0z" />
                                    <rect x="4" y="5" width="16" height="16" rx="2" />
                                    <line x1="16" y1="3" x2="16" y2="7" />
                                    <line x1="8" y1="3" x2="8" y2="7" />
                                    <line x1="4" y1="11" x2="20" y2="11" />
                                    <rect x="8" y="15" width="2" height="2" />
                                </svg>
                            </div>
                            <input
                                required
                                name="date"
                                onChange={onHandleChange}
                                value={experienceFields.date}
                                id="date"
                                className="text-gray-600 focus:outline-none focus:border focus:border-indigo-700 font-normal w-full h-10 flex items-center pl-3 text-sm border-gray-300 rounded border"
                                placeholder="MM/YY"
                            />
                        </div>

                        <div className="flex items-center justify-start w-full">
                            <button
                                type="submit"
                                className="focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-700 transition duration-150 ease-in-out hover:bg-indigo-600 bg-indigo-700 rounded text-white px-8 py-2 text-sm"
                            >
                                Submit
                            </button>
                            <button
                                aria-label="close modal"
                                type="button"
                                onClick={closeModal}
                                className="focus:outline-none focus:ring-2 focus:ring-offset-2  focus:ring-gray-400 ml-3 bg-gray-100 transition duration-150 text-gray-600 ease-in-out hover:border-gray-400 hover:bg-gray-300 border rounded px-8 py-2 text-sm"
                            >
                                Cancel
                            </button>
                        </div>
                    </form>
                    <button
                        className="cursor-pointer absolute top-0 right-0 mt-4 mr-5 text-gray-400 hover:text-gray-600 transition duration-150 ease-in-out rounded focus:ring-2 focus:outline-none focus:ring-gray-600"
                        aria-label="close modal"
                        onClick={closeModal}
                    >
                        <svg
                            xmlns="http://www.w3.org/2000/svg"
                            className="icon icon-tabler icon-tabler-x"
                            width="20"
                            height="20"
                            viewBox="0 0 24 24"
                            strokeWidth="2.5"
                            stroke="currentColor"
                            fill="none"
                            strokeLinecap="round"
                            strokeLinejoin="round"
                        >
                            <path stroke="none" d="M0 0h24v24H0z" />
                            <line x1="18" y1="6" x2="6" y2="18" />
                            <line x1="6" y1="6" x2="18" y2="18" />
                        </svg>
                    </button>
                </div>
            </div>
        </div>
    );
};

export default ExperiencePopupModal;

Screenshot

That's all for the UI/Modals portion of the project, stay tuned!

Hire+Plus! For Employees Here's how I built it (UI - Profile)

AjeaS — Sat, 06 Aug 2022 08:00:49 +0000

Overview: All views and functionality related to the Profile, all funcs called are coming from the profileReducer.

Profile Route Page

inside routes > profile > profile-page.tsx
imports that assist with functions to call.
On mount, I fetch the profile by id I get from useParams. If editing is set to true, I render the edit profile component. If not, I render the actual profile component.

import { useEffect } from 'react';
import { useParams } from 'react-router';
import { getProfileById } from '../../app/features/profile/profileSlice';
import BeatLoader from 'react-spinners/BeatLoader';
import { useAppSelector, useAppDispatch } from '../../app/hooks';
import Profile from '../../components/profile/profile.component';
import EditProfile from '../../components/profile/edit-profile.component';

const ProfilePage = () => {
    const { id } = useParams();
    const dispatch = useAppDispatch();
    const { isLoading, isEditting } = useAppSelector((state) => state.profile);
    useEffect(() => {
        dispatch(getProfileById(id));
    }, [id, dispatch]);
    return (
        <>
            {isLoading ? (
                <div className="text-center p-20">
                    <BeatLoader color="#ffffff" />
                </div>
            ) : (
                <>{isEditting ? <EditProfile /> : <Profile />}</>
            )}
        </>
    );
};

export default ProfilePage;

Profile Component

inside components > profile > profile.component.tsx
imports that assist with functions to call.

Functionality

settingEditView toggles isEditting to determine whether the edit profile component should show or not. removeItem removes projects (by filter) and sets new result in project state. I use currentUser for displaying info in UI.

import { setEditView, setProjects } from '../../app/features/profile/profileSlice';
import { useAppDispatch, useAppSelector } from '../../app/hooks';
import Experience from '../experience/experience-component';
import Project from '../project/project-component';

const Profile = () => {
    const dispatch = useAppDispatch();
    const { profile, isEditting } = useAppSelector((state) => state.profile);
    const { currentUser } = useAppSelector((state) => state.auth);

    const settingEditView = () => {
        dispatch(setEditView(!isEditting));
    };
    const removeItem = (id: number) => {
        const newProjects = profile.projects.filter((_, i) => i !== id);
        dispatch(setProjects(newProjects));
    };

    return ( {/* removed for simplicity */} )
}

UI

Renders profile info (projects, experiences, skills, summary, website url, etc.). It will not render edit profile button if current user id and profile id's don't match. Projects and Experiences are both separate components. By default, it shows no data until you edit the profile.

const Profile = () => {
    {/* removed for simplicity */}
    return (
        <>
            {profile && (
                <>
                    <section style={{ backgroundColor: '#252731' }}>
                        <div className="container mx-auto py-5 px-5 md:px-0 text-right text-white flex justify-between">
                            <div className="flex justify-center text-md text-slate-200">
                                {profile.isForHire ? (
                                    <p>Actively looking for work</p>
                                ) : (
                                    <p>Not currently looking for work</p>
                                )}
                            </div>
                            {currentUser.uid !== profile.id ? null : (
                                <button
                                    onClick={settingEditView}
                                    className="underline text-md text-indigo-500"
                                >
                                    Edit Profile
                                </button>
                            )}
                        </div>
                        <div className="md:px-12 lg:px-24 max-w-7xl relative items-center w-full px-5 py-5 mx-auto">
                            <div className="mx-auto flex flex-col w-full max-w-lg mb-12 text-center">
                                <p className="mb-5 font-medium text-2xl text-white">
                                    {currentUser.displayName}
                                </p>
                                <img
                                    alt="testimonial"
                                    className="inline-block object-cover object-center w-20 h-20 mx-auto mb-8 rounded-full"
                                    src="https://picsum.photos/200"
                                />
                                <div className="flex justify-center">
                                    {profile.headline ? (
                                        <p className="text-base leading-relaxed font-color pr-2">
                                            {profile.headline}
                                        </p>
                                    ) : null}
                                    {profile.websiteURL ? (
                                        <>
                                            <a
                                                href={profile.websiteURL}
                                                className="text-base leading-relaxed text-indigo-500 border-l-2 border-gray-500 pl-2"
                                            >
                                                Live Website
                                            </a>
                                        </>
                                    ) : (
                                        <p className="font-color">No website to show</p>
                                    )}
                                </div>
                            </div>
                        </div>
                    </section>
                    <div className="divide-y divide-gray-700" key={profile.id}>
                        <section className="text-gray-600 body-font mt-2">
                            <div className="container px-10 py-20 mx-auto">
                                <div className="flex flex-col w-full mx-auto">
                                    <div className="w-full mx-auto">
                                        <h2 className="sm:text-3xl text-2xl my-5 font-bold">
                                            About Me
                                        </h2>
                                        <p className="lg:w-3/4 about-me font-color">
                                            {profile.summary ? profile.summary : 'No info to show'}
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </section>
                        <section className="text-gray-600 body-font overflow-hidden">
                            <div className="container px-10 py-20 mx-auto">
                                <div className="flex flex-col w-full mx-auto">
                                    <div className="w-full mx-auto">
                                        <h2 className="sm:text-3xl text-2xl mb-5 font-bold">
                                            Skills
                                        </h2>
                                        {profile.skills.length ? (
                                            <ul className="flex flex-wrap">
                                                {profile.skills.map((skill, id) => {
                                                    return (
                                                        <li
                                                            className="mr-2 my-2 text-white px-4 py-2 rounded-3xl bg-indigo-700 cursor-pointer["
                                                            key={id}
                                                        >
                                                            {skill}
                                                        </li>
                                                    );
                                                })}
                                            </ul>
                                        ) : (
                                            <p className="font-color">No skills to show</p>
                                        )}
                                    </div>
                                </div>
                            </div>
                        </section>
                        {/* Experience starts */}
                        <section className="text-gray-600 body-font overflow-hidden">
                            <div className="container px-10 py-20 mx-auto">
                                <div className="-my-8 mx-auto">
                                    <h2 className="text-3xl my-8 mb-5 font-bold">Experience</h2>
                                    {profile.experience.length ? (
                                        <ol className="border-l-2 border-indigo-700 mt-10">
                                            {profile.experience.map((exp, index) => {
                                                return (
                                                    <Experience
                                                        experienceData={exp}
                                                        key={index}
                                                        itemIndex={index}
                                                    />
                                                );
                                            })}
                                        </ol>
                                    ) : (
                                        <p className="font-color">No experiences to show</p>
                                    )}
                                </div>
                            </div>
                        </section>
                        {/* Projects starts */}
                        <section className="text-gray-600 body-font">
                            <div className="container px-10 py-24 mx-auto">
                                <h2 className="sm:text-3xl text-2xl font-bold title-font mb-5">
                                    Projects
                                </h2>
                                {profile.projects.length ? (
                                    <div className="container py-5 mx-auto">
                                        <div className="flex flex-wrap -m-4">
                                            {profile.projects.map((proj, index) => {
                                                return (
                                                    <Project
                                                        project={proj}
                                                        key={index}
                                                        itemIndex={index}
                                                        removeItem={removeItem}
                                                    />
                                                );
                                            })}
                                        </div>
                                    </div>
                                ) : (
                                    <p className="font-color">No projects to show</p>
                                )}
                            </div>
                        </section>
                    </div>
                </>
            )}
        </>
    );
};

export default Profile;

Screenshots

Edit Profile Component

inside components > profile > edit-profile.component.tsx
Imports: TagsInput react package for adding tags, I use this for adding skills, ExperiencePopupModal pop-up modal for adding job experiences to profile, ProjectPopupModal pop-up modal for adding projects. The rest are funcs from profileReducer to call when appropriate.

import { ChangeEvent, useState } from 'react';
import { useNavigate } from 'react-router';
import { TagsInput } from 'react-tag-input-component';
import {
    setEditView,
    setProjects,
    updateProfileById,
} from '../../app/features/profile/profileSlice';
import { useAppDispatch, useAppSelector } from '../../app/hooks';
import Experience from '../experience/experience-component';
import ExperiencePopupModal from '../modal/experience-modal.component';
import ProjectPopupModal from '../modal/project-modal.component';
import Project from '../project/project-component';

Functionality

I handle all the fields that need to be updated formFields, skills, and checked for toggling is for hire state. isOpen for open/close experience modal. isProjOpen for open/close project modal.

handleCheckedChange - toggle isForHire state, determines
whether user is looking for work.

settingEditView - toggle editing view

onHandleChange - handle changes for the formFields state

onTextAreaChange - handle changes for textarea

updateProfile - updates the profile, set editing view to false, redirects to the main page.

removeItem - removes projects by id (using a filter).

closeModal - closes experience modal

closeProjModal - closes project modal

const EditProfile = () => {
    const { profile, isEditting } = useAppSelector((state) => state.profile);
    const { currentUser } = useAppSelector((state) => state.auth);
    const dispatch = useAppDispatch();
    const navigate = useNavigate();

    const [formFields, setFormFields] = useState({
        headline: profile.headline ? profile.headline : '',
        summary: profile.summary ? profile.summary : '',
        websiteURL: profile.websiteURL ? profile.websiteURL : '',
    });

    const [skills, setSkills] = useState<string[]>(
        profile.skills ? profile.skills : []
    );

    const [checked, setChecked] = useState<boolean>(profile.isForHire);
    const [isOpen, setIsOpen] = useState(false);
    const [isProjOpen, setIsProjOpen] = useState(false);

    const handleCheckedChange = () => {
        setChecked(!checked);
    };

    const settingEditView = () => {
        dispatch(setEditView(!isEditting));
    };

    const onHandleChange = (event: ChangeEvent<HTMLInputElement>) => {
        const { name, value } = event.target;
        setFormFields({ ...formFields, [name]: value });
    };
    const onTextAreaChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
        setFormFields({ ...formFields, summary: event.target.value });
    };

    const updateProfile = async () => {
        dispatch(
            updateProfileById({
                id: profile.id,
                headline: formFields.headline,
                summary: formFields.summary,
                isForHire: checked,
                websiteURL: formFields.websiteURL,
                skills: skills,
                experience: profile.experience,
                projects: profile.projects,
            })
        );
        dispatch(setEditView(false));
        navigate('/app');
    };
    const removeItem = (id: number) => {
        const newProjects = profile.projects.filter((_, i) => i !== id);
        dispatch(setProjects(newProjects));
    };
    const closeModal = () => {
        setIsOpen(false);
    };
    const closeProjModal = () => {
        setIsProjOpen(false);
    };

    return ( {/* removed for simplicity */} );
};

export default EditProfile;

UI

Renders all fields that you can edit. Along with buttons to open either experience modal or project modal.

const EditProfile = () => {
    {/* removed for simplicity */}
    return (
        <>
            <section style={{ backgroundColor: '#252731' }}>
                <div className="container mx-auto py-5 text-right text-white flex justify-between">
                    <div>
                        <label
                            htmlFor="toggle-example"
                            className="flex items-center cursor-pointer relative mb-4"
                        >
                            <input
                                onChange={handleCheckedChange}
                                checked={checked}
                                type="checkbox"
                                id="toggle-example"
                                className="sr-only"
                            />
                            <div className="toggle-bg bg-gray-200 border-2 border-gray-200 h-6 w-11 rounded-full"></div>
                            <span className="ml-3 text-slate-200 text-md font-medium">
                                Are you looking for work?
                            </span>
                        </label>
                    </div>
                    <div>
                        <button
                            onClick={updateProfile}
                            className="mr-2 text-lg text-indigo-500"
                        >
                            Update
                        </button>
                        <button onClick={settingEditView}>Go Back</button>
                    </div>
                </div>
                <div className="md:px-12 lg:px-24 max-w-7xl relative items-center w-full px-5 py-5 mx-auto">
                    <div className="mx-auto flex flex-col w-full max-w-lg mb-12 text-center">
                        <p className="mb-5 font-medium text-2xl text-white">
                            {currentUser.displayName}
                        </p>
                        <img
                            alt="testimonial"
                            className="inline-block object-cover object-center w-20 h-20 mx-auto mb-8 rounded-full"
                            src="https://picsum.photos/200"
                        />
                        <div className="flex justify-center">
                            <input
                                className="font-color mr-3 primary-bg-color input-border-color block w-full px-5 py-3 mt-2 text-base text-neutral-600 placeholder-gray-500 transition duration-500 ease-in-out transform border border-transparent rounded-lg focus:outline-none focus:border-transparent focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-300 apearance-none"
                                id="headline"
                                value={formFields.headline}
                                onChange={onHandleChange}
                                name="headline"
                                placeholder="e.g. Front-end Developer"
                            />
                            <input
                                className="font-color primary-bg-color input-border-color block w-full px-5 py-3 mt-2 text-base text-neutral-600 placeholder-gray-500 transition duration-500 ease-in-out transform border border-transparent rounded-lg focus:outline-none focus:border-transparent focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-300 apearance-none"
                                id="websiteURL"
                                value={formFields.websiteURL}
                                onChange={onHandleChange}
                                name="websiteURL"
                                placeholder="Add website url..."
                            />
                        </div>
                    </div>
                </div>
            </section>
            <section>
                <div className="divide-y divide-gray-700">
                    <section className="text-gray-600 body-font mt-2">
                        <div className="container px-5 py-20 mx-auto">
                            <div className="flex flex-col w-full mx-auto">
                                <div className="w-full mx-auto">
                                    <h2 className="sm:text-3xl text-2xl my-5 font-bold">
                                        About Me
                                    </h2>
                                    <div>
                                        <textarea
                                            maxLength={4000}
                                            rows={5}
                                            className="font-color input-border-color secondary-bg-color block w-full px-5 py-3 mt-2 text-base text-neutral-600 placeholder-gray-500 transition duration-500 ease-in-out transform border border-transparent rounded-lg focus:outline-none focus:border-transparent focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-300 apearance-none autoexpand"
                                            id="summary"
                                            name="summary"
                                            value={formFields.summary}
                                            onChange={onTextAreaChange}
                                            placeholder="Message..."
                                        ></textarea>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </section>
                    <section className="text-gray-600 body-font overflow-hidden">
                        <div className="container px-5 py-20 mx-auto">
                            <div className="flex flex-col w-full mx-auto">
                                <div className="w-full mx-auto">
                                    <h2 className="sm:text-3xl text-2xl mb-5 font-bold">
                                        Skills
                                    </h2>
                                    <TagsInput
                                        value={skills}
                                        onChange={setSkills}
                                        name="skills"
                                        placeHolder="Add skills here..."
                                    />
                                </div>
                            </div>
                        </div>
                    </section>
                    {/* Experience starts */}
                    <section className="text-gray-600 body-font overflow-hidden">
                        <div className="container px-5 py-20 mx-auto">
                            <div className="-my-8 mx-auto">
                                <h2 className="sm:text-3xl text-2xl my-5 font-bold">
                                    Experience
                                </h2>
                                <button
                                    onClick={() => setIsOpen(true)}
                                    className="block mb-5 text-white bg-indigo-700 focus:ring-4 focus:outline-none font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-indigo-600 dark:hover:bg-indigo-700 dark:focus:ring-indigo-800"
                                    type="button"
                                    data-modal-toggle="defaultModal"
                                >
                                    Add Experience
                                </button>
                                <ExperiencePopupModal isOpen={isOpen} closeModal={closeModal} />
                                <p className="mb-5 font-color">
                                    Be sure to <b>'Update'</b> for these changes to take effect :)
                                </p>
                                {profile.experience.length ? (
                                    <ol className="border-l-2 border-indigo-700">
                                        {profile.experience.map((exp, index) => {
                                            return (
                                                <Experience
                                                    experienceData={exp}
                                                    key={index}
                                                    itemIndex={index}
                                                />
                                            );
                                        })}
                                    </ol>
                                ) : null}
                            </div>
                        </div>
                    </section>
                    {/* Projects starts */}
                    <section className="text-gray-600 body-font">
                        <div className="container px-5 py-24 mx-auto">
                            <div className="text-left mb-5">
                                <h2 className="sm:text-3xl text-2xl font-bold title-font mb-5">
                                    Projects
                                </h2>
                                <button
                                    onClick={() => setIsProjOpen(true)}
                                    className="block text-white bg-indigo-700 focus:ring-4 focus:outline-none font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-indigo-600 dark:hover:bg-indigo-700 dark:focus:ring-indigo-800"
                                    type="button"
                                    data-modal-toggle="defaultModal"
                                >
                                    Add Project
                                </button>
                                <ProjectPopupModal
                                    isProjOpen={isProjOpen}
                                    closeProjModal={closeProjModal}
                                />
                            </div>
                            <p className="mb-5 font-color">
                                Be sure to <b>'Update'</b> for these changes to take effect :)
                            </p>
                            <div className="flex flex-wrap -m-4">
                                {profile.projects.length
                                    ? profile.projects.map((project, index) => {
                                            return (
                                                <Project
                                                    project={project}
                                                    key={index}
                                                    itemIndex={index}
                                                    removeItem={removeItem}
                                                />
                                            );
                                      })
                                    : null}
                            </div>
                        </div>
                    </section>
                </div>
            </section>
        </>
    );
};

export default EditProfile;

Screenshots

Editing state

Non-editing state

That's all for the UI/Profile portion of the project, stay tuned!

Hire+Plus! For Employees Here's how I built it (UI - Launch)

AjeaS — Sat, 06 Aug 2022 04:51:00 +0000

Launch Route Page

inside routes > launch > launch-page.tsx
Basic launch page info with 2 links that redirect either to the Developers section of the app or the Recuiters section of the app.

import { Link } from 'react-router-dom';
const Launch = () => {
    return (
        <section className="text-gray-600 body-font">
            <h1 className="text-center text-2xl md:text-4xl my-10">
                What features are you looking for?
            </h1>
            <div className="container px-10 py-5 mx-auto">
                <div className="flex flex-wrap -mx-4 -mb-10 text-center">
                    <div className="sm:w-1/2 mb-10 px-4">
                        <div className="rounded-lg h-64 overflow-hidden">
                            <img
                                alt="content"
                                className="object-cover object-center h-full w-full"
                                src="https://images.unsplash.com/photo-1537511446984-935f663eb1f4?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870"
                            />
                        </div>
                        <h2 className="title-font text-2xl font-medium mt-6 mb-3">
                            For Recuiters
                        </h2>
                        <p className="leading-relaxed text-base font-color">
                            Easily search and view candidates, manage candidates through our
                            Project Management board, best of all post jobs for free!
                        </p>
                        <a href="https://hire-plus-employer-v1.vercel.app/">
                            <button className="flex mx-auto mt-6 text-white bg-indigo-700 border-0 py-2 px-5 focus:outline-none rounded">
                                GET STARTED
                                <span style={{ marginLeft: '10px' }}>&#10095;</span>
                            </button>
                        </a>
                    </div>
                    <div className="sm:w-1/2 mb-10 px-4">
                        <div className="rounded-lg h-64 overflow-hidden">
                            <img
                                alt="content"
                                className="object-cover object-center h-full w-full"
                                src="https://images.unsplash.com/photo-1551434678-e076c223a692?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870"
                            />
                        </div>
                        <h2 className="title-font text-2xl font-medium mt-6 mb-3">
                            For Developers
                        </h2>
                        <p className="leading-relaxed text-base font-color">
                            View the latest jobs posted by hiring companies, create and manage
                            your profile to show off skills, and apply for jobs you want!
                        </p>
                        <Link to="/app">
                            <button className="flex mx-auto mt-6 text-white bg-indigo-700 border-0 py-2 px-5 focus:outline-none rounded">
                                GET STARTED
                                <span style={{ marginLeft: '10px' }}>&#10095;</span>
                            </button>
                        </Link>
                    </div>
                </div>
            </div>
        </section>
    );
};

export default Launch;

Screenshot

That's all for the UI/Launch portion of the project, stay tuned!

Hire+Plus! For Employees Here's how I built it (UI - Job)

AjeaS — Sat, 06 Aug 2022 04:38:15 +0000

Overview: All views and functionality related to the Job, all funcs called are coming from the jobReducer.

Job Route Page

inside routes > job > job-page.tsx
imports that assist with components to render, and functions to call. On mount, I fetch all jobs. I'm handling search and filter states using searchInput, and filteredData.

searchItems - filters jobs by search term and sets results to filteredData. If nothing was searched, filteredData is set to default jobs.

import { useEffect, useState } from 'react';
import BeatLoader from 'react-spinners/BeatLoader';
import { getPostedJobs } from '../../app/features/job/jobSlice';
import { JobData } from '../../app/features/job/jobTypes';
import { useAppDispatch, useAppSelector } from '../../app/hooks';
import Job from '../../components/job/job.component';

const JobsPage = () => {
    const dispatch = useAppDispatch();
    const { jobs, isLoading } = useAppSelector((state) => state.job);

    const [searchInput, setSearchInput] = useState<string>('');
    const [filteredData, setfilteredData] = useState<JobData[]>([]);

    useEffect(() => {
        dispatch(getPostedJobs());
    }, []);

    const searchItems = (value: string) => {
        setSearchInput(value);
        if (searchInput !== '') {
            const filtered = jobs.filter((item) => {
                return Object.values(item)
                    .join('')
                    .toLowerCase()
                    .includes(searchInput.toLowerCase());
            });
            setfilteredData(filtered);
        } else {
            setfilteredData(jobs);
        }
    };
    return ({/* removed for simplicity */});
};

export default JobsPage;

UI

In a nutshell, it renders all jobs with a search bar. Searching by job title, and or location will show filtered results in Job component.

const JobsPage = () => {
{/* removed for simplicity */}
    return (
        <>
            {isLoading ? (
                <div className="text-center p-20">
                    <BeatLoader color="#ffffff" />
                </div>
            ) : (
                <>
                    <div className="flex justify-center pt-20">
                        <div className="mb-3 w-1/2">
                            <div className="input-group relative flex items-stretch w-full mb-4">
                                <input
                                    value={searchInput}
                                    onChange={(e) => searchItems(e.target.value)}
                                    type="search"
                                    className="form-control relative flex-auto min-w-0 block w-full px-5 py-3 text-base font-normal font-color secondary-bg-color bg-clip-padding border border-solid border-gray-300 rounded-full transition ease-in-out m-0 focus:text-slate-200 focus:secondary-bg-color focus:border-indigo-700 focus:outline-none"
                                    placeholder="Search for a job..."
                                    aria-label="Search"
                                    aria-describedby="button-addon2"
                                />
                            </div>
                        </div>
                    </div>
                    <section className="text-gray-600 body-font overflow-hidden">
                        <div className="container px-5 py-24 mx-auto">
                            <div className="-my-8 divide-y-2 divide-gray-700">
                                {searchInput.length
                                    ? filteredData.map((job, index) => {
                                            return <Job job={job} key={index} />;
                                      })
                                    : jobs.map((job, index) => {
                                            return <Job job={job} key={index} />;
                                      })}
                            </div>
                        </div>
                    </section>
                </>
            )}
        </>
    );
};

export default JobsPage;

Screenshots

when it's not filtered
when it's filtered

inside routes > job > job-detail.tsx
imports that assist with functions to call. On mount, I fetch a single job by id I get from useParams. I parse the result and set it to local state jobData.

import { useEffect, useState } from 'react';
import { useParams } from 'react-router';
import BeatLoader from 'react-spinners/BeatLoader';
import { getPostedJobById } from '../../app/features/job/jobSlice';
import { JobData } from '../../app/features/job/jobTypes';
import { useAppDispatch, useAppSelector } from '../../app/hooks';

const JobDetail = () => {
    const { id } = useParams();
    const [jobData, setjobData] = useState<JobData>({} as JobData);
    const { isLoading } = useAppSelector((state) => state.job);
    const dispatch = useAppDispatch();

    useEffect(() => {
        dispatch(getPostedJobById(id))
            .unwrap()
            .then((val) => {
                setjobData(JSON.parse(val));
            });
    }, [dispatch, id]);

    return ( {/* removed for simplicity */} );
};

export default JobDetail;

UI

In a nutshell, it renders the details of a job.

const JobDetail = () => {
    {/* removed for simplicity */}
    return (
        <>
            {isLoading ? (
                <BeatLoader />
            ) : (
                <>
                    <section style={{ backgroundColor: '#252731' }}>
                        <div className="md:px-12 lg:px-24 max-w-7xl relative items-center w-full px-5 py-20 mx-auto">
                            <div className="mx-auto flex flex-col w-full max-w-lg text-center">
                                <p className="mb-5 font-medium text-3xl text-white">
                                    {jobData.position}
                                </p>
                                <div>
                                    <span className="font-color">
                                        {jobData.location} - {jobData.salary}
                                    </span>
                                </div>
                            </div>
                        </div>
                    </section>
                    <section>
                        <div className="divide-y divide-gray-700">
                            <section className="text-gray-600 body-font mt-2">
                                <div className="container px-5 py-20 mx-auto">
                                    <div className="flex flex-col w-full mx-auto">
                                        <div className="w-full mx-auto">
                                            <h2 className="xs:text-3xl text-2xl my-5 font-bold">
                                                Job Description
                                            </h2>
                                            <div>
                                                <p className="font-color">{jobData.description}</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </section>
                            <section className="text-gray-600 body-font mt-2">
                                <div className="container px-5 py-20 mx-auto">
                                    <div className="flex flex-col w-full mx-auto">
                                        <div className="w-full mx-auto">
                                            <h2 className="xs:text-3xl text-2xl my-5 font-bold">
                                                Job-Type
                                            </h2>
                                            <div>
                                                <p className="font-color">{jobData.jobType}</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </section>
                        </div>
                    </section>
                </>
            )}
        </>
    );
};

export default JobDetail;

Screenshot

Job Component

inside components > job > job.component.tsx
I created a helper func truncateString for text that's too long. If text reaches max length it shows ...

I get the job data from props, since I'm using typescript I defined what the data type of the prop should be, in my case JobData.

import React from 'react';
import { Link } from 'react-router-dom';
import { JobData } from '../../app/features/job/jobTypes';
import { truncateString } from '../../utils/truncateString';

interface JobProps {
     job: JobData;
}

UI

Job card with links to view details, apply for the job, and or view the company that posted it.

const Job: React.FC<JobProps> = ({ job }) => {
    return (
        <div className="py-8 flex flex-wrap md:flex-nowrap">
            <div className="md:w-64 md:mb-0 mb-6 flex-shrink-0 flex flex-col">
                <span className="font-semibold title-font text-indigo-500">
                    {job.companyName.toUpperCase()}
                </span>
                <span className="mt-1 font-color text-sm">{job.datePosted}</span>
            </div>
            <div className="md:flex-grow">
                <h2 className="text-2xl font-medium text-white title-font mb-2">
                    {job.position}{' '}
                    <span className="text-indigo-500 text-sm">
                        ({job.location}) - ({job.jobType})
                    </span>
                </h2>
                <p className="leading-relaxed font-color max-w-3xl">
                    {truncateString(job.description, 250)}
                </p>
                <a
                    href={job.applyUrl}
                    className="text-indigo-500 inline-flex items-center mt-4 mr-4"
                >
                    APPLY NOW
                    <svg
                        className="w-4 h-4 ml-2"
                        viewBox="0 0 24 24"
                        stroke="currentColor"
                        strokeWidth="2"
                        fill="none"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                    >
                        <path d="M5 12h14"></path>
                        <path d="M12 5l7 7-7 7"></path>
                    </svg>
                </a>
                <Link
                    to={`job/${job.id}`}
                    className="text-indigo-500 inline-flex items-center mt-4 mr-3"
                >
                    VIEW JOB
                    <svg
                        className="w-4 h-4 ml-2"
                        viewBox="0 0 24 24"
                        stroke="currentColor"
                        strokeWidth="2"
                        fill="none"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                    >
                        <path d="M5 12h14"></path>
                        <path d="M12 5l7 7-7 7"></path>
                    </svg>
                </Link>
                <Link
                    to={`company/${job.id}`}
                    className="text-indigo-500 inline-flex items-center mt-4"
                >
                    VIEW COMPANY
                    <svg
                        className="w-4 h-4 ml-2"
                        viewBox="0 0 24 24"
                        stroke="currentColor"
                        strokeWidth="2"
                        fill="none"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                    >
                        <path d="M5 12h14"></path>
                        <path d="M12 5l7 7-7 7"></path>
                    </svg>
                </Link>
            </div>
        </div>
    );
};

export default Job;

That's all for the UI/Job portion of the project, stay tuned!