Forem: Nerdy Gedoni

[Boost]

Nerdy Gedoni — Fri, 16 May 2025 05:51:30 +0000

Coding With Patrik

May 13 '25

How to Build A CLI Todo App in Go

#cli #go #programming #tutorial

Comments

8 min read

[Boost]

Nerdy Gedoni — Tue, 29 Apr 2025 16:01:29 +0000

Nerdy Gedoni

Apr 29 '25

Building a Go Playground REPL from Scratch with Docker, AWS & Vue.js

#docker #go #aws #vue

Comments

3 min read

Building a Go Playground REPL from Scratch with Docker, AWS & Vue.js

Nerdy Gedoni — Tue, 29 Apr 2025 15:51:20 +0000

In this post, I’ll walk you through how I built a Go Playground REPL clone from scratch powered by a Go backend that compiles user-submitted code securely in Docker, deployed with GitHub Actions to AWS Elastic Beanstalk, and paired with a beautiful frontend using Vue.js, Pinia, Tailwind CSS, and Monaco Editor.

Tech Stack

Backend: Go (Golang), Docker, Gin, os/exec
Frontend: Vue 3, Pinia, Tailwind CSS, Monaco Editor
DevOps: GitHub Actions, DockerHub, AWS Elastic Beanstalk

What I Built

An interactive code editor for writing and executing Go programs.
A secure backend that:
Runs code inside a Docker container
Enforces timeouts to prevent infinite loops
Handles malicious input gracefully
A responsive frontend with live theme switching, program examples, and output panels.

Backend Setup

I used the os/exec package in Go to compile and run user code inside a Docker container, isolated from the host.

Sample Go run handler:

func RunCode(c *gin.Context) {
    var payload struct {
        Code string `json:"code"`
    }

    if err := c.ShouldBindJSON(&payload); err != nil {
        c.JSON(http.StatusBadRequest, gin.H{"error": "Invalid request format"})
        return
    }

    output, err := runInDocker(payload.Code)
    if err != nil {
        c.JSON(http.StatusInternalServerError, gin.H{"error": err.Error()})
        return
    }

    c.JSON(http.StatusOK, gin.H{"output": output, "error": ""})
}

Sample Dockerfile:

FROM golang:1.24-alpine
WORKDIR /app
COPY . .
RUN go build -o repl-server ./cmd
CMD [ "./repl-server" ]

GitHub Actions Deployment

I set up GitHub Actions to automatically build our Docker image, push to ECR, and deploy to AWS Elastic Beanstalk.

Key CI/CD steps:

- name: Build Docker Image
  run: docker build -t repl-api .

- name: Push to ECR
  run: |
    aws ecr get-login-password --region us-west-2 | docker login --username AWS --password-stdin ${{ secrets.ECR_URL }}
    docker tag repl-api:latest ${{ secrets.ECR_URL }}/repl-api:latest
    docker push ${{ secrets.ECR_URL }}/repl-api:latest

- name: Deploy to EBS
  run: |
    eb init -p docker go-repl --region us-west-2
    eb deploy

Frontend Setup

Used Vue 3 with Pinia to manage state and Monaco Editor for code editing.

Vue + Monaco Editor integration (sample):

<template>
  <MonacoEditor v-model="code" :theme="isDark ? 'vs-dark' : 'vs-light'" language="go" />
</template>

<script setup>
import MonacoEditor from '@monaco-editor/vue'
const code = ref(`package main\n\nimport "fmt"\n\nfunc main() {\n fmt.Println("Hello, world!")\n}`)
</script>

Sample UI with Tailwind CSS:

<div class="max-w-4xl mx-auto px-4 py-10">
  <h1 class="text-3xl font-bold">Go Playground REPL</h1>
  <div class="h-96 mt-4 border rounded bg-white">
    <CodeEditor v-model="code" />
  </div>
</div>

Program Examples Dropdown

Added dropdown support with built-in Go examples like

Fibonacci
Peano Integers
Prime Checker
Bubble Sort
Pi Calculation

Securing Execution

Used these techniques to sandbox the code:

Timeout using context.WithTimeout
Docker resource constraints (--memory, --cpus)
Output/error size limits
Validated JSON input structure

Future Improvements

This setup is built with extensibility in mind.

Add support for JavaScript, Java, Python, etc.
Enable stdin support in Docker for user input
Add user accounts and save session history
Use WebSocket for real-time compile streams

🌐 Live Demo

Go Playground

📝 Final Thoughts

This project was a fun blend of backend performance, frontend UX, and DevOps automation. It’s a perfect playground for experimenting with Go and building a polished, full-stack developer tool.

Feel free to fork and extend it further. Hope this helps you in your learning journey!

Repo
Github Repo

Hosting a Static HTML and Tailwind CSS Website Using Surge: A Step-by-Step Guide

Nerdy Gedoni — Mon, 22 May 2023 10:52:29 +0000

Introduction:
Welcome to this informative blog post where we will take you through the step-by-step process of hosting a static HTML and Tailwind CSS website. By carefully following these instructions, you will learn how to efficiently compile your HTML and CSS files, optimize your CSS using Tailwind CSS, and ultimately publish your website on a static site hosting service. Let's delve into the details!

Step 1: Project Setup
To begin, ensure that you have Node.js installed on your computer. Create a dedicated project folder and initiate a new Node.js project by executing the npm init command. This action will generate a package.json file to handle your project's dependencies.

Step 2: Tailwind CSS Installation
Next, install Tailwind CSS as a project dependency by executing the command npm install tailwindcss. This installation will provide you with the essential files and tools required to work effectively with Tailwind CSS.

Step 3: Tailwind CSS Configuration
Generate a configuration file for Tailwind CSS by executing npx tailwindcss init. This action will create a tailwind.config.js file within your project folder. You can later customize this file to adjust the default Tailwind CSS settings according to your preferences.

Step 4: Creation of HTML and CSS Files
Create your HTML file (e.g., index.html) and CSS file (e.g., styles.css) within your project folder. In your HTML file, make sure to link your CSS file using the appropriate <link> tag.

Step 5: Harnessing the Power of Tailwind CSS
Open your CSS file (e.g., styles.css) and import Tailwind CSS by adding the following lines at the top:

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

This will grant you access to the extensive range of utility classes offered by Tailwind CSS for use in your project.

Step 6: Compiling Your CSS
Using the terminal, navigate to your project folder and execute the following command to compile your CSS:

npx tailwindcss build styles.css -o output.css

This command will generate an optimized CSS file named output.css, which integrates your Tailwind CSS styles seamlessly.

Step 7: Linking the Compiled CSS
In your HTML file (e.g., index.html), update the <link> tag to point to the compiled CSS file:

<link rel="stylesheet" href="output.css">

By doing so, you ensure that your HTML file effectively utilizes the compiled and optimized Tailwind CSS.

Step 8: Publishing Your Website
After successfully compiling your HTML and CSS files, you can select a static site hosting service to publish your website. Some popular options include Surge, GitHub Pages, Netlify, and Vercel. Refer to the documentation provided by your chosen hosting service for detailed instructions on how to publish your static files.

Deploying Our Site Using Surge

Step 1: Install Surge
First, make sure you have Node.js installed on your computer. Open your terminal or command prompt and run the following command to install Surge globally:

npm install -g surge

Step 2: Navigate to Project Folder
Using the terminal or command prompt, navigate to the root folder of your project where your compiled HTML and CSS files are located.

Step 3: Log in or Sign up for Surge
If you haven't used Surge before, you'll need to create an account. Run the following command and follow the instructions to log in or sign up:

surge login

Step 4: Deploy Your Website
To deploy your website, run the following command:

surge

Surge will automatically detect the static files in your project folder and prompt you to confirm the deployment settings.

Step 5: Customize Domain (Optional)
If you want to use a custom domain for your website, Surge provides an option to do so. Follow the instructions provided by Surge to configure your custom domain.

Step 6: Access Your Hosted Website
Once the deployment process is complete, Surge will provide you with a URL where your website is hosted. You can access your website by opening that URL in a web browser.

Congratulations! You have successfully hosted your website on Surge. Enjoy sharing your website with others!

Conclusion:
By following the step-by-step instructions outlined in this comprehensive guide, you have acquired the necessary knowledge to set up your project, install and configure Tailwind CSS, create HTML and CSS files, compile and optimize your CSS, and finally publish your website using a static site hosting service. Enjoy the process of crafting visually appealing and high-performing websites using HTML and Tailwind CSS!

Customizing Authentication in Laravel: Building a Custom Guard

Nerdy Gedoni — Thu, 12 Jan 2023 11:52:56 +0000

Laravel Guards are used to authenticate users and control access to different parts of the application. Guards are classes that implement the guard interface and are responsible for checking the user's credentials and determining if they should be granted access to the application.
Laravel ships with several guards out of the box, such as the session guard and the token guard, but you can also create custom guards to meet your specific needs.

In this tutorial, I will show you how to implement a custom guard in laravel whereby creating an Admin guard that authenticates users to the admin Dashboard.

1. Environment Setup

First, You'll need to install laravel on your local machine or a development environment. here are a few resources you can use for the installations

If you already have laravel and composer running on your local machine then you can go ahead to create a new project.

composer create-project laravel/laravel example-app

Here is an image of how a running laravel project will look on your browser after all the installations have been done

2. Creating the Admin Model, Migration and Controller

With an up an running laravel project, the next step is to create the admin model, migration and controller.

Admin Model and Migration:

php artisan make:model Admin -m

the code above creates two files, the Admin model and the Admin migration

Admin Controller:

php artisan make:controller AdminController

3. Structure the Admin Table for Migration

After creating the admin migration class, the next step is to add the columns needed for the admin table. Your admin migration class should look like this:

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

return new class extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('admins', function (Blueprint $table) {
            $table->id();
            $table->string('name')->nullable();
            $table->string('email')->unique();
            $table->string('password');
            $table->rememberToken();
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('admins');
    }
};

Now you'll need to run the migrations:

php artisan migrate

4. Seed Data to the Admin Table

After your migrations have been executed successfully, A table called admins will be created in your database and we will have to seed data into the table.

Laravel includes the ability to seed your database with data using seed classes. All seed classes are stored in the database/seeders directory. By default, a DatabaseSeeder class is defined for you. From this class, you may use the call method to run other seed classes, allowing you to control the seeding order.
Read more about laravel seeding on Laravel's official Documentation:
Laravel Database Seeding

Admin Seeder:

php artisan make:seed AdminSeeder

The code above creates an Admin Seeder class which will be updated to look like this:

<?php

namespace Database\Seeders;

use Illuminate\Database\Console\Seeds\WithoutModelEvents;
use Illuminate\Database\Seeder;
use DB;

class AdminSeeder extends Seeder
{
    /**
     * Run the database seeds.
     *
     * @return void
     */
    public function run()
    {
         DB::table('admins')->delete();
        $adminRecords = [
            [
                'id'=>1,'name'=>'Nerdy Gedoni','email'=>'superadmin@admin.online','password'=>'$2y$10$IK0Vz4QUjPIRszOIjfRvJO9PlbHB7kY6fRhJGFUIKNdxf.I3iW/ry'
            ]
          ];

          DB::table('admins')->insert($adminRecords);
    }
}

Note: The admin password was hashed with laravel tinker : hash password with laravel tinker

For our seeding to work we have to call our AdminSeeder in the DatabaseSeeder.php file.

Head over to \database\seeder\DatabaseSeeder.php file and call our AdminSeeder like this:

<?php

namespace Database\Seeders;

// use Illuminate\Database\Console\Seeds\WithoutModelEvents;
use Illuminate\Database\Seeder;

class DatabaseSeeder extends Seeder
{
    /**
     * Seed the application's database.
     *
     * @return void
     */
    public function run()
    {
        $this->call(AdminSeeder::class);
    }
}

Seed Data:

php artisan db:seed

5. Create Admin Middleware And Guard

Laravel includes a middleware that verifies the user of your application is authenticated. If the user is not authenticated, the middleware will redirect the user to your application's login screen. However, if the user is authenticated, the middleware will allow the request to proceed further into the application.

Create Admin Middleware:

php artisan make:middleware Admin

Our Admin middleware will verify if a user(Admin) is authenticated. If the users is not it will redirect the user to the admin login route. Update your middleware to look like this:

<?php

namespace App\Http\Middleware;

use Closure;
use Illuminate\Http\Request;
use Auth;

class Admin
{
    /**
     * Handle an incoming request.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \Closure(\Illuminate\Http\Request): (\Illuminate\Http\Response|\Illuminate\Http\RedirectResponse)  $next
     * @return \Illuminate\Http\Response|\Illuminate\Http\RedirectResponse
     */
    public function handle(Request $request, Closure $next)
    {
        if (!Auth::guard('admin')->check()) {
            return Redirect('/admin');
        }
        return $next($request);
    }
}

Now head over to our kernel.php file app\http\kernel.php and plug in the admin middleware class:

    protected $routeMiddleware = [
        'auth' => \App\Http\Middleware\Authenticate::class,
        'auth.basic' => \Illuminate\Auth\Middleware\AuthenticateWithBasicAuth::class,
        'auth.session' => \Illuminate\Session\Middleware\AuthenticateSession::class,
        'cache.headers' => \Illuminate\Http\Middleware\SetCacheHeaders::class,
        'can' => \Illuminate\Auth\Middleware\Authorize::class,
        'guest' => \App\Http\Middleware\RedirectIfAuthenticated::class,
        'password.confirm' => \Illuminate\Auth\Middleware\RequirePassword::class,
        'signed' => \App\Http\Middleware\ValidateSignature::class,
        'throttle' => \Illuminate\Routing\Middleware\ThrottleRequests::class,
        'verified' => \Illuminate\Auth\Middleware\EnsureEmailIsVerified::class,
        'admin' => \App\Http\Middleware\Admin::class,
    ];

Next we have to create the Admin Guard in our config\auth.php file:

  'guards' => [
        'web' => [
            'driver' => 'session',
            'provider' => 'users',
        ],

        //guard for the admin login
           'admin' => [
            'driver' => 'session',
            'provider' => 'admins', //admin table
        ],
    ],


    'providers' => [
        'users' => [
            'driver' => 'eloquent',
            'model' => App\Models\User::class,
        ],

            'admins' => [
            'driver' => 'eloquent',
            'model' => App\Models\Admin::class,
        ],
    ],

6. Customize Routes

Our updated route routes\web.php will look like this:

<?php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\AdminController;


Route::get('/', function () {
    return view('welcome');
});

Auth::routes();

Route::prefix('/admin')->namespace('Admin')->group(function (){

    Route::get('/', [AdminController::class, 'login']);
    Route::post('login', [AdminController::class, 'loginAdmin'])->name('admin.login');

    Route::group(['middleware'=>['admin']],function ()
    {
        Route::get('dashboard', [AdminController::class, 'dashboard'])->name('admin.dashboard');
        Route::post('logout', [AdminController::class, 'logout'])->name('admin.logout');

    });
});

Route::get('/home', [App\Http\Controllers\HomeController::class, 'index'])->name('home');

7. Update the Admin Model And Controller

Now we have completed the routes in the web.php file we head over to the admin model and update it to something like this:

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
//imported
use Illuminate\Foundation\Auth\User as Authenticatable;

class Admin extends Authenticatable
{
    use HasFactory;

    protected $guard = 'admin';

    protected $fillable = [
        'name',
        'email',
        'password',
        'created_at',
        'updated_at',

    ];

    protected $hidden = [
        'password',
        'remember_token',
    ];

}

Finally update your AdminController to this:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\User;
use Auth;

class AdminController extends Controller
{
     public function login(){
        return view('admin.login');
    }

    public function loginAdmin(Request $request){

          if (Auth::guard('admin')->attempt(['email'=>$request['email'], 'password'=>$request['password']])) {
            return Redirect('admin/dashboard')->with('message', 'Logged In Successfully...');
        }
        else{
            return Redirect()->back()->with('message', 'Invalid Login Details');
        }
    }

    public function dashboard()
    {
        return view('admin.dashboard');
    }


    public function logout()
    {
        Auth::guard('admin')->logout();
        return Redirect('/admin')->with('message', 'Logged Out Successfully... ');
    }
}

The AdminController has four methods, login, loginAdmin, dashboard, logout.
login: returns the admin login view
loginAdmin: Authenticates and return the admin dashboard
dashboard: returns the admin dashboard
logout: log's out the admin

8. Creating the Login And Dashboard Views

Finally we will create the admin login and admin dashboard in thee views folder resources\views\admin\. Our structure should look like this:

Now update the respective views.

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- CSRF Token -->
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <title>{{ config('app.name', 'Laravel') }}</title>
        <!-- Fonts -->
        <link rel="dns-prefetch" href="//fonts.gstatic.com">
        <link href="https://fonts.bunny.net/css?family=Nunito" rel="stylesheet">
        <!-- Scripts -->
        @vite(['resources/sass/app.scss', 'resources/js/app.js'])
    </head>
    <body>
        <div id="app">
            <nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm">
                <div class="container">
                    <a class="navbar-brand" href="{{ url('/') }}">
                        {{ config('app.name', 'Laravel') }}
                    </a>
                    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="{{ __('Toggle navigation') }}">
                    <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="collapse navbar-collapse" id="navbarSupportedContent">
                        <!-- Left Side Of Navbar -->
                        <ul class="navbar-nav me-auto">
                        </ul>
                        <!-- Right Side Of Navbar -->
                        <ul class="navbar-nav ms-auto">

                        </ul>
                    </div>
                </div>
            </nav>
            <main class="py-4">
                <div class="container">
                    <div class="row justify-content-center">
                        <div class="col-md-8">
                            <div class="card">
                                <div class="card-header">{{ __('Admin Login') }}</div>
                                <div class="card-body">
                                    <form method="POST" action="{{ route('admin.login') }}">
                                        @csrf
                                        <div class="row mb-3">
                                            <label for="email" class="col-md-4 col-form-label text-md-end">{{ __('Email Address') }}</label>
                                            <div class="col-md-6">
                                                <input id="email" type="email" class="form-control" name="email" value="{{ old('email') }}" required autocomplete="email" autofocus>

                                            </div>
                                        </div>
                                        <div class="row mb-3">
                                            <label for="password" class="col-md-4 col-form-label text-md-end">{{ __('Password') }}</label>
                                            <div class="col-md-6">
                                                <input id="password" type="password" class="form-control" name="password" required autocomplete="current-password">

                                            </div>
                                        </div>

                                        <div class="row mb-0">
                                            <div class="col-md-8 offset-md-4">
                                                <button type="submit" class="btn btn-primary">
                                                {{ __('Login') }}
                                                </button>

                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </main>
        </div>
    </body>
</html>

Dashboard:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- CSRF Token -->
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <title>{{ config('app.name', 'Laravel') }}</title>
        <!-- Fonts -->
        <link rel="dns-prefetch" href="//fonts.gstatic.com">
        <link href="https://fonts.bunny.net/css?family=Nunito" rel="stylesheet">
        <!-- Scripts -->
        @vite(['resources/sass/app.scss', 'resources/js/app.js'])
    </head>
    <body>
        <nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm">
            <div class="container">
                <a class="navbar-brand" href="{{ url('/') }}">
                    {{ config('app.name', 'Laravel') }}
                </a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="{{ __('Toggle navigation') }}">
                <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <!-- Left Side Of Navbar -->
                    <ul class="navbar-nav me-auto">

                    </ul>
                    <!-- Right Side Of Navbar -->
                    <ul class="navbar-nav ms-auto">
                        <li>
                            <a class="nav-link"href="{{ route('admin.logout') }}"
                                onclick="event.preventDefault();
                                document.getElementById('logout-form').submit();">
                                {{ __('Logout') }}
                            </a>
                            <form id="logout-form" action="{{ route('admin.logout') }}" method="POST" class="d-none">
                                @csrf
                            </form>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
        <main class="py-4">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-md-8">
                        <div class="card">
                            <div class="card-header">Welcome Admin!!!</div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </body>
</html>

Finally, we are done. We've just created our custom guard that verifies if a user is authenticated and hereby navigates the authenticated user to the admin section of our application.

Url: localhost\admin:
Returns the admin login page for authentication

Url: localhost\admin\dashboard:
After user authenticated, returns dashboard

Where Next!

After this extensive tutorial, you might want to dive deeper into laravel authentications in order to secure your application in every possible way as well as implement more complex actions

Quick Links:
Laravel Documentaion
Authentication