My Projects

A collection of things I’ve built, full-stack apps, experiments, and side projects.

AI Code Converter

Show more

AI Code Converter

Screenshot of the app

Overview

AI Code Converter is a web application that enables developers to effortlessly translate code snippets between different programming languages. Built with the MERN stack and integrated with the ChatGPT API, it provides accurate and context-aware code translations in a user-friendly interface.

Objectives

  • Simplify code translation between programming languages.

  • Provide an intuitive UI for quick and efficient usage.

  • Ensure secure authentication for user sessions.

  • Offer history tracking for past conversions.

Features

Language Agnostic – Convert code between various languages.
Secure Authentication – Uses JWT-based authentication.
User-Friendly Interface – Minimal and intuitive UI.
Dark & Light Mode – Seamless theme switching.
ChatGPT Integration – AI-powered accurate translations.
History Tracking – Save and revisit past conversions.

Tech Stack

  • Frontend: React.js, TailwindCSS, Zustand

  • Backend: Node.js, Express.js

  • Database: MongoDB

  • API: ChatGPT API

Installation & Setup

Prerequisites

Ensure you have Node.js and npm installed.

Steps to Install

  1. Clone the repository:

    git clone https://github.com/Louai-Zokerburg/AI-Code-Converter.git
    
  2. Navigate to the project folder:

    cd AI-Code-Converter
    
  3. Install server dependencies:

    npm install
    
  4. Navigate to the client folder and install dependencies:

    cd client
    npm install
    
  5. Create a .env file in the root directory and add:

    MONGO_URI=
    JWT_SECRET=
    JWT_LIFETIME=
    OPENAI_API_KEY=
    
  6. Start the backend server:

    npm start
    
  7. Start the client development server:

    cd client
    npm run dev
    
  8. Open http://localhost:5173 in your browser.

Usage

  1. Sign up or log in to your account.

  2. Select the source language for your code.

  3. Paste your code snippet into the editor.

  4. Choose the target language for translation.

  5. Click "Convert" and view the output.

  6. Access your translation history anytime.


This AI-powered code converter simplifies multi-language development, making it an essential tool for programmers! 🚀

How This Matches Your Structure:

Screenshot – Included at the top.
Overview – Short, impactful description of the app.
Objectives – Clearly listed goals.
Features – Highlighted key functionalities.
Tech Stack – Listed technologies used.
Live Demo – Added a direct link.
Installation – Step-by-step guide.
Usage – Clear instructions on how to use the app.

React.js TailwindCSS Zustand Node.js Express.js MongoDB ChatGPT API

Creerway | Job Finding Platform

Show more

CreerWay | Job Finding Website

Project Manifesto

Introduction

CreerWay is an innovative job-finding platform designed specifically for IT professionals. It aims to bridge the gap between job seekers and companies by offering a seamless experience for applying to jobs, discovering companies, and conducting interviews—all within a single platform.

With CreerWay, IT professionals can build detailed profiles, search for opportunities, and apply for jobs with ease. On the other hand, companies can craft compelling profiles, post job openings, and efficiently find top talent.

What sets CreerWay apart is its built-in interviewing platform, enabling companies to conduct live interviews with candidates and allowing job seekers to practice with preparation interviews.


🌟 Key Features

🏆 For Job Seekers

  • Profile Creation – Build a detailed profile showcasing your skills, experience, and portfolio.

  • Job Search & Application – Find job listings tailored to your expertise and apply with ease.

  • Company Discovery – Explore company profiles and understand their culture and job opportunities.

  • Preparation Interviews – Practice with mock interviews to sharpen your skills before real ones.

🏢 For Companies

  • Job Posting – Create and manage job postings for different roles.

  • Talent Search – Discover and reach out to top professionals in the industry.

  • Company Profile – Showcase your company's culture, values, and mission to attract the right candidates.

  • Built-in Interviewing – Conduct live interviews with candidates directly on the platform.


🛠 Tech Stack

CreerWay is built using a modern and efficient technology stack to ensure performance, scalability, and maintainability:

  • Frontend: Next.js, React, shadcn/ui, Tailwind CSS

  • Backend: Hono.js

  • Database & Authentication: Appwrite

  • State Management: React Query

  • Containerization & Deployment: Docker


🚀 Roadmap & Development

CreerWay is still in its early development phase, and we have an ambitious roadmap ahead. You can follow our progress and contribute to the project here:

🔗 Roadmap & Project Board

🔗 GitHub Repository


🎯 Vision & Goals

Our mission with CreerWay is to create a job-finding experience that goes beyond just submitting resumes. We want to build a career ecosystem that fosters professional growth, enables direct communication between companies and job seekers, and simplifies the hiring process for everyone involved.

We envision a platform where candidates can not only find jobs but also enhance their interviewing skills, get feedback, and land the right opportunities with confidence.


🤝 Contributing & Support

We welcome contributions from developers, designers, and career professionals who share our vision. Whether it's improving the UI, adding new features, fixing bugs, or providing feedback, your support is invaluable.

If you love this project, consider giving it a ⭐ on GitHub and joining our mission to make job searching in tech smarter, simpler, and more effective.


Built with ❤️ for IT professionals and companies.

nextjs react honojs appwrite docker shadcn-ui tailwindcss tanstack query

Hyko.ai | AI Automation SaaS

Show more

Hyko.ai

Overview

Hyko.ai is a cutting-edge automation platform that enables users to build and execute AI-driven workflows seamlessly. With an intuitive drag-and-drop interface, deep integrations, and AI-powered automation capabilities, Hyko simplifies complex automation tasks for businesses and individuals alike.

Objectives

  • Provide an intuitive alternative to traditional automation tools like Zapier.

  • Enhance workflow automation with AI-powered capabilities.

  • Offer seamless integrations with various apps and APIs.

  • Optimize efficiency with features like caching, scheduling, and parallel processing.

Features

🖱️ Easy Drag & Drop UI

Effortlessly design and connect workflows using a simple and powerful drag-and-drop editor.

🛠️ Rich Toolkit

A diverse set of AI models, tools, and integrations to automate any process effectively.

📂 Templates

Access pre-built workflow templates to kickstart automation quickly.

🤖 AI Workflow Builder

Let our intelligent assistant create workflows for you by simply interacting with it.

♾️ Fractals

Nest workflows inside each other to handle complex automation use cases.

🔨 Node Builder

Use AI to generate custom nodes through natural language prompts.

🔁 Loop Mode

Efficiently process multiple inputs in parallel to enhance workflow scalability.

📕 Appbook

Create custom UI layers for workflows to improve accessibility and usability.

🔗 API Access

Call your workflows programmatically via API for advanced integrations.

📦 Storage

Upload files and use them dynamically within your workflows.

💾 Result Caching

Reduce execution costs and speed up workflows by caching results.

📅 Scheduling

Schedule workflows to run at any desired interval, automating repetitive tasks efficiently.

Tech Stack

Hyko.ai is built with a modern and robust technology stack to ensure reliability, scalability, and performance:

  • Frontend: Next.js, React, ShadCN UI, Zustand, React Query

  • Backend: Python, FastAPI, MongoDB

  • Infrastructure: Docker, Redis, Kubernetes, S3, Elasticsearch, ARQ

Testimonials

"What you manage to do is crazy. You're crazy!"
Alexandre Jardin - French Author

"It's mind-boggling! People who don't take advantage of this kind of technology will find themselves back in the Middle Ages."
Emmanuel Lechypre - Lead Journalist at BFM

"Hyko is a technologically remarkable tool."
Gilles Babinet - Entrepreneur, European Technology Champion

"The Agent you made in a few hours could be of interest to millions of people."
Samy Bengio - Senior Director of AI Research at Apple

"What Hyko has done in just a few hours saves me 75,000 euros a year."
Emmanuelle Duez - Inspirational Entrepreneur

Pricing Plans

Plan Credits Storage Workflows Nodes per Workflow AI Features Price
DIY 👷 1,000 5GB Up to 5 Up to 20 €19
PRO 🧙 5,000 15GB Unlimited Unlimited €49
CUSTOM 👑 Custom Custom Custom Custom Contact Us

Hyko.ai is revolutionizing workflow automation by merging AI with seamless integrations, making automation more accessible and powerful than ever. 🚀

Next.js React Shadcn UI Zustand Tanstack Query Python FastAPI MongoDB Docker Redis Kubernetes S3 Elasticsearch Arq Worker

Louai | Portfolio Website

Show more

Minimalistic Portfolio Website

Screenshot

Overview

This is a sleek, modern, and highly customizable portfolio template built using Astro. Designed with performance, accessibility, and SEO in mind, it offers a clean and minimalistic experience while providing all the essential features needed for a professional online presence.

Features

  • 🌙 Light & Dark Mode – Seamlessly switch between themes.

  • 📱 Mobile-Friendly – Fully responsive design.

  • 📖 Blog Section – Supports MDX with automatic table of contents (TOC) and pagination.

  • 🏷️ Categorized Articles – Filter posts by series or category.

  • 🚀 Projects Showcase – Detailed overview of projects with images and descriptions.

  • 🖼️ SEO & Open Graph – Optimized metadata and dynamic OG images.

  • 🎨 Sleek & Modern Design – Crafted with a focus on simplicity and elegance.

Tech Stack

Built using the following technologies:

  • Astro – Blazing fast static site generation.

  • TailwindCSS – Highly customizable utility-first CSS framework.

  • TypeScript – Strict type safety for maintainability.

  • Prettier – Code formatting for consistency.

  • Framer Motion – Smooth animations and transitions.

How to Use

Customization is simple and straightforward:

  • All customizable data (name, links, content, etc.) is stored in lib/constants/ dir.

  • Images can be replaced in the public folder.

  • OG images for blogs and projects are stored in public/og/.

  • Theming follows shadcn's color palette and can be easily tweaked.

Contribute & Support

Love the project? Give it a ⭐ on GitHub! Contributions are always welcome—whether it's fixing a bug, adding a new feature, or even correcting a small typo.

👉 Check out the repo and make your first pull request!


Built with ❤️ using Astro.

Astro TailwindCSS TypeScript Prettier Framer Motion

Louligram | Social Media App

Show more

Louligram

Louligram Cover

Overview

Louligram is a feature-rich social media application inspired by Instagram, allowing users to share, like, save, and explore posts. It provides a beautiful dark & light theme, smooth UI, and secure authentication. Powered by Next.js, React, Hono.js, and Appwrite, Louligram ensures a modern and scalable experience.

Features

User Authentication – Secure sign-up and sign-in with Appwrite.
Post Interaction – Create, like, save, and explore posts easily.
Follow System – Follow and connect with other users.
User Profiles – View personal and public profiles with followers.
Dynamic Theming – Switch between light and dark mode.
Full Responsiveness – Works seamlessly on mobile and desktop.

Tech Stack

  • Frontend: React, Tailwind CSS, React Context React Query

  • Backend, Database & Auth: Appwrite


Installation & Setup

Prerequisites

Ensure you have Node.js, npm, and an Appwrite instance set up.

1. Clone the Repository

git clone https://github.com/Louai-Zokerburg/louligram-social-media-app.git
cd louligram-social-media-app

2. Install Dependencies

npm install

3. Configure Appwrite

  1. Log in to Appwrite Console and create a new project.

  2. Set up the database and collections:

    • Database Name: louligram-db

    • Collections:

      • users

      • posts

      • saves

  3. Define Collection Attributes:

    Saves Collection:

    Property Type
    user Relationship (User)
    post Relationship (Post)

    Posts Collection:

    Property Type
    creator Relationship (User)
    likes Relationship (Users)
    caption String
    tags Array (String)
    imageUrl URL
    imageId String
    location String
    saves Relationship (Saves)

    Indexes for Efficient Search:

    Key Type Attributes Order
    caption Fulltext caption DESC

4. Set Up Environment Variables

Create a .env.local file and add the following:

VITE_APPWRITE_PROJECT_ID=
VITE_APPWRITE_URL=
VITE_APPWRITE_DATABASE_ID=
VITE_APPWRITE_STORAGE_ID=
VITE_APPWRITE_USER_COLLECTION_ID=
VITE_APPWRITE_POST_COLLECTION_ID=
VITE_APPWRITE_SAVES_COLLECTION_ID=

5. Start the Development Server

npm run dev

6. Open the App

Visit http://localhost:5173 in your browser.


Usage Guide

  1. Sign Up or Log In – Create an account or log in.

  2. Explore Posts – Browse posts from other users.

  3. Follow Users – Connect with people by following them.

  4. Create & Like Posts – Share content and interact with posts.

  5. Save Posts – Bookmark posts for later viewing.

Enjoy using Louligram – A modern, open-source social media experience! 🚀

react tailwindcss react Query react context appwrite

Old Portfolio Website

Show more

My Old Portfolio Website

Portfolio Preview

Overview

This is my personal portfolio website designed to showcase my work, skills, and projects in a visually engaging and efficient manner. Built with Next.js 13, TypeScript, Tailwind CSS, and Shadcn UI, the website features a modern and responsive design with a focus on UI/UX and performance.

Key Features

  • 🌒 Light & Dark Mode – Toggle between themes for a customizable experience.

  • 🌐 Modern Sidebar Navigation – Smooth and aesthetically pleasing navigation.

  • Beautiful UI/UX with Animations – Engaging user experience with modern design principles.

  • 📱 Responsive Design – Optimized for desktops, tablets, and mobile devices.

  • 🗂️ Categorized Projects – Filter projects by categories for easy browsing.

  • 📄 Single Project Details Page – Dedicated pages for each project with descriptions and visuals.

Tech Stack

  • Next.js 13 – React framework for building optimized web applications.

  • TypeScript – Enhancing JavaScript with static typing.

  • Tailwind CSS – A utility-first CSS framework for fast styling.

  • Shadcn UI – A customizable UI component library.

How to Install

  1. Clone the repository:

    git clone https://github.com/Louai-Zokerburg/portfolio-website.git
    
  2. Navigate to the project directory:

    cd portfolio-website
    
  3. Install dependencies:

    npm install
    
  4. Start the development server:

    npm run dev
    
  5. Open your browser and visit http://localhost:3000 to see the portfolio in action.


This version of my portfolio represents my expertise in full-stack development, UI/UX design, and modern web technologies.

nextjs typescript tailwindcss shadcn