This is a Next.js project bootstrapped with create-next-app.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Geist, a new font family for Vercel.

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

Pixelate Game

Pixelate Game is an interactive image guessing game developed using Next.js and Tailwind CSS. This project is designed for the website pixelguessgame.com, where users can guess pixelated images.

Features

• Next.js for a modern and fast web application
• Tailwind CSS for customizable and responsive design
• Prisma for database management
• Easy deployment and hosting with Vercel

Installation

To run the project locally, follow these steps:

1. Clone the repository:

   git clone https://github.com/Jubstaaa/pixelate-game.git
   

2. Install dependencies:

   cd pixelate-game
   npm install
   

3. Set up environment variables:

   Create a .env file in the root directory of the project and add the necessary configuration values.

4. Start the development server:

   npm run dev
   

   The application will run at http://localhost:3000.

Deployment

To deploy the application using Vercel:

1. Log in to Vercel and create a new project.
2. Connect the repository and configure the necessary settings.
3. Start the deploy process.

Alternatively, you can use the terminal:

vercel deploy

Contributing

Contributions are welcome! Please share your suggestions and bug reports as issues or create a pull request.

License

This project is licensed under the MIT License. See the LICENSE file for details.

Contact

For questions or feedback, please reach out to Jubstaaa.

This is a Next.js project bootstrapped with create-next-app.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Geist, a new font family for Vercel.

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

LoL Config Editor

LoL Config Editor is a simple and user-friendly tool built with modern web technologies to help League of Legends players customize, save, and switch between multiple game settings without launching the game. Perfect for players who use multiple accounts, share computers, or need different configurations for different game modes.

---

🚀 Features

• Edit Game Settings Without Launching the Game: Easily modify your League settings directly from the app.
• Save Multiple Configurations: Create and name different profiles for various scenarios (e.g., Ranked, ARAM, URF).
• Switch Between Profiles: Quickly apply saved settings with a single click.
• Account-Wide Consistency: Your settings are applied across all accounts on the same PC.
• Multi-User Support: Save separate settings for different users (e.g., if you share the computer with a sibling or friend).

---

📥 Installation

Follow these steps to download and use the tool:

1. Download the Tool

   • Go to the Releases page of this repository.
   • Download the latest version of the .exe file (e.g., lol-config-editor.exe).

2. Run the Application

   • Once downloaded, double-click on lol-config-editor.exe to launch the application.

3. Start Customizing

   • Use the clean and intuitive interface to edit, save, and apply your League of Legends settings.

---

🛠️ Built With

This project was built using modern web technologies to ensure a smooth and responsive experience:

• Electron.js: For building the cross-platform desktop application.
• NextUI: For a sleek and modern user interface.
• Tailwind CSS: For custom styling and responsiveness.
• JavaScript: Core programming language.

---

🖥️ How It Works

1. Save Configurations:

   • Customize your game settings (e.g., resolution, keybindings, chat settings) and save them as profiles with unique names.

2. Switch Between Profiles:

   • Select a saved profile and apply it with one click. Ideal for switching between different game modes or user preferences.

3. Multi-User Support:

   • Perfect for shared computers. Each user can have their own saved settings and switch between them easily.

4. Account-Wide Settings:

   • Once applied, your settings will remain consistent across all accounts you use on the same computer.

---

💡 Use Cases

• Shared Computers: If you share your PC with someone else, save separate profiles for each user (e.g., you and your sibling).
• Different Game Modes: Use specific settings for Ranked games (e.g., chat off) and different ones for casual modes like ARAM or URF (e.g., chat on).
• Multiple Accounts: Ensure consistent settings across all your accounts without manually reconfiguring each time.

---

📂 Repository

This project is open source and available on GitHub. Feel free to explore, contribute, or report issues!

• GitHub Repository: LoL Config Editor

---

🌟 Contributing

Contributions are welcome! If you have suggestions for new features, find a bug, or want to improve the code, feel free to:

• Open an issue.
• Submit a pull request.

---

❓ FAQ

Q: Does this tool modify game files?

A: No, it only edits configuration files that are safe and intended for user customization.

Q: Can I get banned for using this?

A: No, this tool only interacts with the configuration files and does not interfere with the game client or its processes.

Q: Is this tool free?

A: Yes, it’s completely free and open source!

---

📧 Contact

If you have any questions, feedback, or suggestions, feel free to reach out:

• Email: ilkerbalcilartr@gmail.com

---

📝 License

This project is licensed under the MIT License. See the LICENSE file for details.

My Pixel World

Real-time collaborative pixel art editor built with Next.js, Socket.IO, TypeScript, and MongoDB.

Project Structure

This project is split into two parts:

• client/: Next.js frontend application (deployed on Vercel)
• server/: Node.js + Socket.IO backend with MongoDB (deployed on Render.com)

Features

• 🎨 Real-time collaborative pixel drawing
• 🖌️ Multiple drawing tools (pen, eraser, hand)
• 🎨 Color picker with custom colors
• 🗺️ Large navigable canvas
• 👥 Multi-user collaboration
• 🏠 Room-based collaboration system
• 📱 Responsive design with loading screen
• ⚡ TypeScript support
• 🗄️ MongoDB persistence (no data loss on server restart)
• 🚀 Optimized for production

Quick Start

Development

1. Start the server:

cd server
npm install
cp env.example .env
npm run dev

2. Start the client:

cd client
npm install
cp env.local.example .env.local
npm run dev

3. Open http://localhost:3000 in your browser.

Production Deployment

Server (Render.com)

1. Create a new Web Service on Render.com

2. Connect your GitHub repository

3. Set build command: cd server && npm install && npm run build

4. Set start command: cd server && npm start

5. Add environment variables:

   • NODE_ENV=production
   • CLIENT_URL=https://your-vercel-app.vercel.app
   • CORS_ORIGIN=https://your-vercel-app.vercel.app
   • MONGODB_URI=your-mongodb-uri

6. Create a MongoDB instance on Render.com or use MongoDB Atlas and connect it to your server

Client (Vercel)

1. Push your code to GitHub
2. Connect your repository to Vercel
3. Set environment variables in Vercel dashboard:
   • NEXT_PUBLIC_SERVER_URL: Your Render.com server URL
   • NEXT_PUBLIC_APP_NAME: My Pixel World

Technologies

Frontend

• Next.js 14 (App Router)
• TypeScript
• Socket.IO Client
• HTML5 Canvas
• Material Design Icons
• Tailwind CSS

Backend

• Node.js
• TypeScript
• Socket.IO
• Express.js
• MongoDB
• Mongoose
• CORS

Environment Variables

Server (.env)

PORT=3001
NODE_ENV=development
CORS_ORIGIN=*
CLIENT_URL=http://localhost:3000
MONGODB_URI=mongodb://localhost:27017/pixel-world

Client (.env.local)

NEXT_PUBLIC_SERVER_URL=http://localhost:3001
NEXT_PUBLIC_APP_NAME=My Pixel World

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test locally
5. Submit a pull request

License

MIT License

Hi 👋, I'm I'm İlker Balcılar

I'm a Software Developer

• 🌱 I’m currently learning Unity

• 👨‍💻 All of my projects are available at ilkerbalcilar.com

• 📫 How to reach me ilkerbalcilartr@gmail.com

Connect with me:

Languages and Tools:

 

This is a Next.js project bootstrapped with create-next-app.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Geist, a new font family for Vercel.

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

Winniesoft

Bu repo şirketimiz için HTML,CSS,JS kullanarak hazırladığım responsive tanıtım sayfasıdır.

Live Preview

https://www.winniesoft.com/

Nesne Tabanlı Programlama

Bu repo İstanbul Gelişim Üniversitesi Nesne Tabanlı Programlama dersi eşliğinde Java programlama dili ile oluşturulmuş projeleri içerir.

Projeyi Reactjs ile kodladım, backend kısmı için firebase kullandım. Kullancılıların makale paylaşabildiği, profil sayfalarının bulunduğu ve belirli istatistiklerin paylaşıldığı bir proje geliştirdim. Firebase config bilgileri açık olarak paylaşıldı proje localde de çalıştırılabilir.

https://jubstaa-bilgi-bankasi.netlify.app/

Getting Started with Create React App

This project was bootstrapped with Create React App.

Available Scripts

In the project directory, you can run:

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in your browser.

The page will reload when you make changes.
You may also see any lint errors in the console.

npm test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

npm run build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

npm run eject

Note: this is a one-way operation. Once you eject, you can't go back!

If you aren't satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.

Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.

You don't have to ever use eject. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.

Learn More

You can learn more in the Create React App documentation.

To learn React, check out the React documentation.

Code Splitting

This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting

Analyzing the Bundle Size

This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size

Making a Progressive Web App

This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app

Advanced Configuration

This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration

Deployment

This section has moved here: https://facebook.github.io/create-react-app/docs/deployment

npm run build fails to minify

This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify

Winniesoft Web Site

This is a Next.js project bootstrapped with create-next-app.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying pages/index.js. The page auto-updates as you edit the file.

API routes can be accessed on http://localhost:3000/api/hello. This endpoint can be edited in pages/api/hello.js.

The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

Telegram Message Send

This library provides a simple class-based interface for sending messages and various media types to a Telegram bot.

Installation

With yarn

yarn add telegram-message-send

With NPM

npm install telegram-message-send

Getting Started

import { TelegramBot } from 'telegram-message-send';

const botKey = 'YOUR_BOT_KEY';
const chatId = 'YOUR_CHAT_ID';

const bot = new TelegramBot(botKey, chatId);

async function sendMessages() {
  await bot.sendMessage('Hello World');
  await bot.sendPhoto('https://avatars.githubusercontent.com/u/100691616?s=200&v=4', 'Custom Caption');
  await bot.sendAudio('https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3', 'Custom Caption');
  await bot.sendDocument('https://s2.q4cdn.com/175719177/files/doc_presentations/Placeholder-PDF.pdf', 'Custom Caption');
  await bot.sendLocation(41.084677113651814, 29.00455392606353);
  await bot.sendContact('Ilker Balcilar', '+905555555555');
  await bot.sendPoll('Which one would you prefer', ['Javascript', 'Typescript']);
  await bot.sendDice('dice'); // or 'dart', 'basketball', etc.
}


sendMessages();

Create a new Telegram bot with BotFather

Create a Telegram bot with BotFather before connecting your bot to Telegram.

1. Start a new conversation with the BotFather.
2. Send /newbot to create a new Telegram bot.
3. When asked, enter a name for the bot.
4. Copy and save the Telegram bot's access token (your botKey) for later steps.

Get Your Telegram Chat ID

1. In your Telegram account, search for “@myidbot” or open this link t.me/myidbot on your smartphone.
2. Start a conversation with that bot and type /getid. You will get a reply back with your user ID.
3. Note the user ID (your chatId).

In order to receive a message from the bot, you must first send a message to the bot and create a chat.

TelegramBot Class Methods

new TelegramBot(botKey, chatId)

• botKey (string, required): Your Telegram bot's access token.
• chatId (string, required): The ID of the chat to send messages to.

sendMessage(text)

• text (string, required): The message text to send.

sendPhoto(photoURL, caption?)

• photoURL (string, required): URL of the photo to send.
• caption (string, optional): Photo caption.

sendAudio(audioURL, caption?)

• audioURL (string, required): URL of the audio file to send.
• caption (string, optional): Audio caption.

sendDocument(documentURL, caption?)

• documentURL (string, required): URL of the document to send.
• caption (string, optional): Document caption.

sendVideo(videoURL, caption?)

• videoURL (string, required): URL of the video to send.
• caption (string, optional): Video caption.

sendGIF(gifURL, caption?)

• gifURL (string, required): URL of the GIF to send.
• caption (string, optional): GIF caption.

sendLocation(latitude, longitude)

• latitude (number, required): Latitude of the location.
• longitude (number, required): Longitude of the location.

sendContact(name, phoneNumber)

• name (string, required): Contact's name.
• phoneNumber (string, required): Contact's phone number.

sendPoll(question, options)

• question (string, required): Poll question.
• options (string[], required): Array of poll options.

sendDice(type?)

• type (string, optional): Type of dice to send ('dice', 'dart', 'basketball', 'football', 'bowling', 'slot'). Defaults to 'dice'.

Ev Bağışı

Evime sürekli gelip giden ziyaretçilerin ev ekonomisine katkı sağlaması açısından geliştirdiğim bir bağış uygulaması.

Canlı önizlemesini görmek için tıklayın. (https://jubstaa-house.netlify.app/)

Kullandığım Teknolojiler

- react
- firebase
- daisyui

Özellikler

- Bağışcı kendi profilini ekleyebilir.
- İhtiyaç listesine ürün ve fiyatı eklenebilir. (Ürün panelden admin tarafından satın alındı olarak işaretlenebilir.)
- Nakit veya havale ödeme bildirimi yapılabilir. (Ödemeler panelden admin tarafınca onaylanır.)
- Ödeme bildirimleri adminlere telegram üzerinden bildirim olarak gönderilir.
- Kullanıcı logları herkes tarafından görüntülenebilir.

Place Share

I published the project of my MERN course adding new features. An application where you can share the places you like.

Click to view live demo (https://jubstaa-place-share.netlify.app/)

Techs I Used

- react
- react-router-dom
- react-hot-toast
- axios
- expressjs
- mongoDB
- mongoose
- jsonwebtoken
- bcryptjs
- firebase storage bucket

Features

- You can see the users in the app and the places they have shared.
- You can register.
- You can add a new place.
- You can delete and edit your places.

Next13 Typescript Blog

Blog application developed with Nextjs version 13. Sanity.io was used for panel and backend operations

Click to view live demo (https://next13-ts-blog.vercel.app/)

Click to use panel (https://next13-ts-blog.vercel.app/studio/)

Email: nextjs13blog@gmail.com

Password: fm7#PTEscAiuT5L

Techs I Used

- nextjs
- tailwind
- sanity
- groq

Arbit Blog

Click to view live demo (https://jubstaa-arbit-blog.netlify.app/)

Techs I Used

- react
- tailwind
- redux
- redux-toolkit
- formik
- yup
- axios
- classnames
- react-icons
- react-hot-toast
- react-helmet

Blog API Source Link:

(https://jsonplaceholder.typicode.com/posts)

Disney Clone

Click to view live demo (https://dplus-clone.vercel.app/)

Techs I Used

- create-next-app
- next ssr
- next auth
- firestore
- tailwind
- heroicons
- react-responsive-carousel
- react-player
- react-indiana-drag-scroll
- html-react-parser

TMDB API Source Link:

(https://api.themoviedb.org)

Leave A Message To The World

React App where you can see the messages sent to the application and send a message after logging in.

Click to view live demo (https://jubstaa-leave-a-message-to-the-world.netlify.app/)

Techs I Used

- react
- react-router-dom
- redux
- redux-thunk
- firebase realtime database
- firebase auth
- PrivateRoute
- history
- bootstrap
- create-react-app

Features

- you can see sent messages
- you can see the profile picture, name, and date and time of the sender of the message.
- you can send message after login with google auth
- when you log in, your profile picture will appear in the navbar and you can log out
- after logging in, you can edit and delete your own messages.
- responsive design

Bayzat Frontend Test - Calculator

Overview

This project is a basic calculator application built using TypeScript and React.JS for the Bayzat Frontend Test assignment. The focus is on demonstrating TypeScript's static typing capabilities, handling JavaScript's calculation quirks, and implementing a clean, maintainable codebase with comprehensive testing.

Live Demo

🚀 Deployed on Vercel: https://bayzat-calculator-jubstaa.vercel.app

Features

✅ Core Requirements

• Basic Arithmetic Operations: Addition, subtraction, multiplication, and division
• Complex Expressions: Handles series of operations (e.g., 3 + 2 * 4 - 5) with proper operator precedence
• Edge Case Handling: Addresses JavaScript floating-point precision issues
• Responsive UI: Works seamlessly across desktop, tablet, and mobile devices
• Material-UI Integration: Clean, user-friendly interface using MUI components

🎯 Bonus Features

• Calculation Display: Shows full expression (e.g., 1 + 3 + 5) before showing result
• Keyboard Support: Full keyboard navigation and input support
• History Tracking: Maintains calculation history for reference
• Error Handling: User-friendly error messages for edge cases

Installation & Local Development

Prerequisites

• Node.js 18+ (or Docker)
• npm or yarn

Setup

Option 1: Local Development

# Clone the repository
git clone https://github.com/Jubstaaa/bayzat-calculator.git
cd calculator

# Install dependencies
npm install

# Start development server
npm run dev

Option 2: Docker (Recommended)

# Clone the repository
git clone https://github.com/Jubstaaa/bayzat-calculator.git
cd calculator

# Build Docker image
docker build -t calculator-app .

# Start development server
docker run -p 5173:5173 -v $(pwd):/app calculator-app

# Or use Docker Compose
docker-compose up app

The application runs at http://localhost:5173

Testing

Unit Tests (Jest)

# Run all unit tests
npm run test

# Run tests with coverage
npm run test:coverage

# Watch mode for development
npm run test:watch

E2E Tests (Cypress)

# Run E2E tests in headless mode
npm run test:e2e

# Open Cypress GUI for interactive testing
npm run cy:open

Note: E2E tests verify the accuracy of calculations and ensure the application's reliability across different scenarios.

Edge Cases Encountered & Solutions

1. JavaScript Floating-Point Precision Issues

Problem: 0.1 + 0.2 resulted in 0.30000000000000004 instead of 0.3 Solution: Implemented rounding to 10 decimal places to avoid floating-point precision issues.

2. Division by Zero Handling

Problem: JavaScript throws Infinity for division by zero, which isn't user-friendly Solution: Custom error handling with user-friendly "Division by zero is not allowed" message.

3. Large Number Display

Problem: Very large numbers could overflow UI or become unreadable Solution: Added wordBreak: 'break-all' CSS property to ensure large results wrap properly and remain readable.

4. Trailing Operators

Problem: Expressions ending with operators like 3+ would cause evaluation errors Solution: Pre-evaluation sanitization that removes trailing operators before parsing.

5. Multiple Decimal Points

Problem: Users could input invalid numbers like 1.2.3 Solution: Input validation that prevents multiple decimal points within the same number.

6. Operator Precedence

Problem: JavaScript's default operator precedence might not match user expectations Solution: JavaScript Function constructor automatically handles operator precedence correctly (multiplication/division before addition/subtraction).

Testing Approach

Unit Testing Strategy

• Jest Framework: Fast, reliable testing with excellent TypeScript support
• Component Testing: Isolated testing of Calculator component logic
• Utility Testing: Comprehensive testing of evaluation logic
• Edge Case Coverage: 50+ test cases covering all calculation scenarios

E2E Testing Strategy

• Cypress Framework: Real browser testing for authentic user interactions
• Calculation Accuracy: Validates that all arithmetic operations produce correct results
• UI Responsiveness: Ensures calculator works across different screen sizes
• Keyboard Support: Tests full keyboard navigation and input handling
• Error Scenarios: Verifies proper error handling for edge cases

Test Coverage Areas

• ✅ Basic arithmetic operations (+, -, ×, ÷)
• ✅ Complex expressions with operator precedence
• ✅ Parentheses handling and nested expressions
• ✅ Error handling (division by zero, invalid expressions)
• ✅ UI interactions and keyboard support
• ✅ Responsive design across devices

CI/CD Pipeline

GitHub Actions Workflow

The project uses GitHub Actions for automated testing, building, and deployment:

Workflow Trigger

• Automatic: On every push to main branch
• Manual: Can be triggered manually via GitHub Actions tab

Pipeline Stages

1. 🔄 Checkout & Setup

   • Repository checkout
   • Node.js 20 setup with npm caching

2. 🧪 Testing Phase

   • Unit Tests: Jest framework with TypeScript support
   • E2E Tests: Cypress for browser-based testing
   • Development Server: Auto-starts for E2E test environment

3. 🏗️ Build Phase

   • TypeScript compilation (tsc -b)
   • Vite production build (vite build)
   • Output: dist/ folder with optimized assets

4. 🚀 Deployment Phase

   • Vercel Deploy Hook: Automatic deployment on successful build
   • Environment: Production deployment
   • Branch: main branch only

Workflow File

.github/workflows/deploy.yml

Deployment Process

• Tests pass → Build succeeds → Auto-deploy to Vercel
• Failed tests prevent deployment (quality gate)
• Manual deployment available via GitHub Actions

Benefits

• ✅ Automated Quality Control: Tests run on every commit
• ✅ Consistent Deployments: Same process every time
• ✅ Rollback Capability: Vercel provides deployment history
• ✅ Team Collaboration: All team members can trigger deployments
• ✅ Cost Effective: No manual deployment overhead

Code Quality & Maintainability

TypeScript Implementation

• Strict Mode: Full TypeScript strict mode enabled for compile-time error catching
• Static Typing: Comprehensive type definitions for all calculator operations
• Interface Design: Clean interfaces for button definitions and state management
• Error Handling: Typed error handling with enum-based error messages

React Best Practices

• Functional Components: Modern React with hooks (useState, useCallback, useMemo)
• Performance Optimization: Memoized calculations and event handlers
• State Management: Clean state management with proper separation of concerns
• Component Structure: Modular, reusable component architecture

Code Organization

• Separation of Concerns: UI logic separated from calculation logic
• Modular Architecture: Clear separation between components, utilities, and tests
• Consistent Naming: Descriptive variable and function names
• Documentation: Comprehensive inline comments and JSDoc

Tools & Libraries Used

Core Technologies

• TypeScript: Chosen for static typing to catch calculation errors at compile time and improve code maintainability
• React 19: Latest React version for modern hooks and performance optimizations
• Vite: Fast build tool that provides excellent development experience with HMR

UI Framework

• Material-UI (MUI): Selected for consistent, accessible design system and responsive components that work across all devices
• Emotion: CSS-in-JS solution that MUI uses, providing better performance than styled-components

Testing

• Jest: Unit testing framework with excellent TypeScript support
• Cypress: E2E testing for real browser validation of calculator functionality
• eslint-plugin-cypress: Enforces Cypress best practices and prevents anti-patterns

Build & Development

• ESLint: Configured with TypeScript and React rules for code quality
• ts-jest: TypeScript support for Jest testing

Deployment Instructions

Vercel Deployment (Recommended)

1. Install Vercel CLI:

   npm i -g vercel
   

2. Build the project:

   npm run build
   

3. Deploy to Vercel:

   vercel --prod
   

4. Environment Variables: No additional environment variables required

Alternative: Netlify Deployment

1. Build the project:

   npm run build
   

2. Drag and drop the dist folder to Netlify dashboard

3. Set build command: npm run build

4. Set publish directory: dist

Improvements If Had More Time

1. Memory Functions: Add M+, M-, MR, MC buttons for storing and recalling values
2. Scientific Calculator: Implement square root, power, percentage, and trigonometric functions
3. History Persistence: Save calculation history to localStorage for persistence across sessions
4. Theme Switching: Dark/light mode toggle for better user experience
5. Accessibility: Add ARIA labels, screen reader support, and keyboard navigation improvements
6. Performance: Implement virtual scrolling for very long calculation histories
7. Internationalization: Support for different number formats and locales
8. Undo/Redo: Add undo/redo functionality for calculation steps
9. Export: Allow users to export calculation history as CSV or PDF
10. Mobile Optimization: Touch-friendly interface improvements for mobile devices

Project Structure

src/
├── components/
│   └── Calculator.tsx          # Main calculator component
├── lib/
│   └── evaluator.ts            # Simple calculator engine with enum-based error handling
├── __tests__/
│   └── evaluator.test.ts       # Unit tests for arithmetic logic
├── assets/                     # Static assets
└── main.tsx                    # Application entry point

Docker Development

Docker Environment

This project comes with a Docker environment that's fully compatible with GitHub Actions. Using Docker provides:

• Consistent Development Environment: All developers work in the same environment
• GitHub Actions Compatibility: Identical to the environment tested in CI/CD pipeline
• Easy Setup: No need to install Node.js or npm locally
• Isolated Test Environment: All dependencies for Cypress tests included

Docker Services

# Development server
docker-compose up app

# Unit tests
docker-compose run --rm test

# E2E tests
docker-compose run --rm e2e

# Production build
docker-compose run --rm build

Docker Compose Configuration

• app: Development server (port 5173)
• test: Unit test environment
• e2e: E2E test environment (Cypress + Xvfb)
• build: Production build environment

Contributing

This is a take-home assignment for Bayzat Frontend Test. For questions or clarifications, please contact the development team.

License

This project is created for Bayzat Frontend Test assignment purposes.

League of Legends Daily Lore Video Bot

This Node.js project automatically generates and uploads a daily League of Legends champion lore video, complete with audio narration, splash art images, and animated subtitles. The video is posted to Instagram Reels and hosted via Catbox.moe, all orchestrated by GitHub Actions.

Features

• Random Champion: Selects a random champion daily from Riot's Data Dragon API.
• Latest Data: Fetches the latest Data Dragon version and champion lore.
• Audio Narration: Uses ElevenLabs API for high-quality TTS narration, with word-level timestamps for subtitle alignment.
• Splash Art Slideshow: Downloads all splash arts for the champion and creates a vertical (1080x1920) video.
• Animated Subtitles: Generates stylized, top-aligned, yellow ASS subtitles with black outline and fade-in/out animation.
• Video Optimization: Outputs a 720x1280, 24fps, size-optimized video for Instagram/Catbox.moe.
• Automated Upload: Uploads the video to Catbox.moe (for public hosting) and posts to Instagram Reels via the Graph API.
• Fully Automated: Runs daily via GitHub Actions, with all secrets managed via GitHub Secrets.

Prerequisites

• Node.js (v14 or higher)
• ffmpeg installed on your system
• ElevenLabs API key
• Instagram Graph API credentials (Long-Lived Access Token, User ID)

Installation

1. Clone this repository
2. Install dependencies:

   npm install
   

3. Create a .env file in the root directory and add your secrets:

   ELEVENLABS_API_KEY=your_elevenlabs_api_key
   IG_ACCESS_TOKEN=your_long_lived_instagram_access_token
   IG_USER_ID=your_instagram_user_id
   

Usage (Manual)

1. Make sure ffmpeg is installed
2. Run the script:

   npm start
   

3. The final video will be saved as output/final_video.mp4 and uploaded to Catbox.moe/Instagram automatically.

Automation (GitHub Actions)

• The workflow in .github/workflows/daily.yml runs the script daily, handles all secrets, and uploads the video.
• Video is hosted on Catbox.moe for public access and posted to Instagram Reels.

Output

• Video: output/final_video.mp4 (vertical, optimized for Reels)
• Temporary files: stored in temp/ and auto-cleaned

Instagram Long-Lived Access Token: Creation & Renewal

1. Create a Short-Lived Access Token

• Go to Facebook Graph API Explorer
• Select your app and user, and add these permissions: pages_show_list, business_management, instagram_basic, instagram_content_publish
• Click "Generate Access Token" and copy the token

2. Exchange for a Long-Lived Token

Use the following cURL command (replace values with your own):

curl -X GET "https://graph.facebook.com/v19.0/oauth/access_token?grant_type=fb_exchange_token&client_id=YOUR_APP_ID&client_secret=YOUR_APP_SECRET&fb_exchange_token=YOUR_SHORT_LIVED_TOKEN"

• YOUR_APP_ID: Your Facebook App ID
• YOUR_APP_SECRET: Your Facebook App Secret
• YOUR_SHORT_LIVED_TOKEN: The token you copied from the Explorer

The response will include a new access_token valid for about 60 days. Use this as IG_ACCESS_TOKEN in your .env and GitHub Secrets.

3. Refresh the Long-Lived Token

Before the token expires, refresh it with:

curl -X GET "https://graph.instagram.com/refresh_access_token?grant_type=ig_refresh_token&access_token=YOUR_LONG_LIVED_TOKEN"

• Replace YOUR_LONG_LIVED_TOKEN with your current token
• The response will include a new token and expiration

Note: If you ever get an "invalid_token" or "expired" error, repeat the steps above to generate a new token.

Notes

• All unused files and legacy code have been removed for clarity and maintainability.
• For troubleshooting, check GitHub Actions logs and Instagram/Catbox.moe API responses.

Buildog

1. Getting started
   • Install dependencies
2. Local development
   • Fork the repo
   • Clone the repo
   • Running turborepo
     • Environment variables
     • Shared components
     • Adding new component on @repo/ui
     • Installing packages
3. Create a pull request

Getting started

Thank you for your interest in Buildog and your willingness to contribute!

Install dependencies

You will need to install and configure the following dependencies on your machine to build Buildog:

• Git
• Node.js v18.x (LTS)
• pnpm version 8.x.x

Local development

This repo uses Turborepo.

Fork the repo

To contribute code to Buildog, you must fork the Buildog repo.

Clone the repo

1. Clone your GitHub forked repo:

git clone https://github.com/<github_username>/buildog.git

2. Go to the Buildog directory:

cd buildog

Install dependencies

1. Install the dependencies in the root of the repo.

pnpm install # install dependencies

2. After that you can run the apps simultaneously with the following.

pnpm dev

Directory	Description	Local development server
/apps/buildog	The main web application.	http://localhost:3000
/apps/api	The main backend application.	http://localhost:3010

Environment variables

Auth0 - How to setup Auth0

Shared components

The monorepo has a set of shared components under /packages:

• /packages/ui: shadcn/ui components.
• /packages/typescript-config: Shared Typescript settings
• /packages/eslint-config: Shared eslint settings

Adding new component on @repo/ui

Use the pre-made script:

pnpm ui:add <shadcn/ui-component-name>

This works just like the add command in the shadcn/ui CLI.

Installing packages

Installing a package with pnpm workspaces requires you to add the --filter flag to tell pnpm which workspace you want to install into. Do not install dependencies in their local folder, install them from the route using the --filter flag.

pnpm add <package> --filter <workspace>
pnpm uninstall <package> --filter <workspace>

For example:

• pnpm add react --filter buildog installs into ./apps/buildog

Create a pull request

After making any changes, open a pull request. Once your PR has been merged, you will be proudly listed as a contributor.

Twitter Clone

Click to view live demo (https://tw-clone-liart.vercel.app/)

Techs I Used

- typescript
- next-ssr
- next-auth
- firestore
- firebase cloud storage
- tailwind
- heroicons
- react-timeago
- react-twitter-embed
- react-hot-toast

Features

- You can see all previous tweets, comments and likes.
- You can't tweet, comment or like without logging in.
- People who have closed browser tab or logged out appear offline.
- You can add images to your tweet.
- You can refresh tweets with the refresh button at top.
- You can delete your own tweets.
- responsive design

Instagram Clone

React clone project that includes most of Instagram’s features. (Register, Login, Forgot Password, Feed, Profile, Edit Profile, Direct Chat, Post, Follow, Unfollow, Like, Comment etc.)

Click to view live demo (jubstaa-igclone-myproject.netlify.app)

Techs I Used

- react
- redux
- react-router
- tailwind
- firebase auth
- firestore
- firebase realtime database
- firebase cloud storage
- classnames
- axios
- formik
- yup
- emoji-picker-react
- react-drag-drop-file
- react-helmet
- react-hot-toast
- react-share
- react-icons
- react-timeago
- react-twitter-embed
- react-hot-toast
- uuid

Features

UI

- I worked on UI based on the Instagram design.
- According to the page you are on, the title is dynamically updated with react-helmet.
- Responsive Design

Login Page

- You can login with your registered account.
- You can login with Facebook(Soon)
- You can sign up for app.
- You can use the forgot password option. You will receive a password change link in your email address.

Header

- You can search registered users with search bar.
- Available buttons on the right. Home, Direct, Notifications, Add Post, Profile, Saved, Settings, Logout. 

Main Page (Feed & Sidebar)

- Shows you and your followers posts by posting date.
- Your profile appears on sidebar, you can click and go to your profile.

Post

- You can like, comment, send to your friend via direct message and save post.
- You can go to url of post by clicking on 3 dots, copy url and share post on your social media accounts.
- If the post belongs to you, you can delete or edit the post as an extra. 
- You can translate the post title to your language by clicking on "See translation" text below the post.
- You can add emoji to your comment using the emoji box.

Add Post

- You can select post you want to share from your computer or use drag and drop method.
- You can add title, location, alt text information to your post and share it.

Notifications

- Follower, like and comment notifications are displayed in this section in time order.
- If notifications are not read, they are displayed with an extra marker.

Direct

- In this section, you can chat with user you want in realtime.
- Chats are sorted by date of most recent message.
- Unread chats appear in bold with a blue dot next to them. Number of unread chats is displayed on direct icon in header
- You can use emoji, send picture and heart in the message section.
- If a url is detected in message it will turn it into a clickable link.

Notifications

- You can see likes, comments and follow notifications.
- Red dot appears when there are unread notifications.

Profile

- In this section you can see your profile information.
- You can see posts you have shared and posts you have saved.
- You can see users of followers and users you follow.

Settings(Edit Profile & Change Password)

- In this section you can change or remove your profile photo.
- You can update your name, username, website, bio and email information.
- You can deactive your account temporarily.
- You can change your password.

Place Share

I published the project of my MERN course adding new features. An application where you can share the places you like.

Click to view live demo (https://jubstaa-place-share.netlify.app/)

Techs I Used

- react
- react-router-dom
- react-hot-toast
- axios
- expressjs
- mongoDB
- mongoose
- jsonwebtoken
- bcryptjs
- firebase storage bucket

Features

- You can see the users in the app and the places they have shared.
- You can register.
- You can add a new place.
- You can delete and edit your places.

QR Menu Management System

Modern, scalable QR Menu Management System built with a monorepo architecture and microfrontend approach.

🚧 Development Status: In Progress 🚧

This project is currently under active development. Core features are implemented, but some advanced functionality is still being built.

🏗️ Project Architecture

This project follows a monorepo structure using Turborepo and pnpm workspaces, with microfrontend architecture for the tenant applications.

📁 Project Structure

qr-menu/
├── apps/                          # Application packages
│   ├── backend/                   # NestJS API server
│   ├── landing/                   # Marketing landing page
│   ├── tenant/                    # Customer-facing menu app (microfrontend)
│   └── tenant-dashboard/          # Restaurant management dashboard (microfrontend)
├── packages/                      # Shared packages
│   ├── shared-components/         # Reusable React components
│   ├── shared-config/            # Configuration and environment variables
│   ├── shared-styles/            # Global styles and design system
│   ├── shared-types/             # TypeScript type definitions
│   ├── shared-utils/             # Utility functions and API clients
│   └── shared-validation/        # Zod validation schemas

🚀 Applications

Backend API (apps/backend)

• Framework: NestJS with TypeScript
• Database: Supabase (PostgreSQL)
• Features: RESTful API, authentication, file uploads, menu management
• Port: Configurable (default: 3000)
• Status: ✅ Core API Complete

Landing Page (apps/landing)

• Framework: Next.js 15 with React 19
• Styling: Tailwind CSS + HeroUI
• Features: Marketing site, authentication, restaurant registration
• Port: 3000
• Status: ✅ Complete

Tenant App (apps/tenant)

• Framework: Next.js 15 with React 19
• Architecture: Microfrontend (Vercel Microfrontends)
• Features: Customer-facing QR menu display
• Port: 3001 (microfrontend proxy)
• Status: 🔄 In Development

Tenant Dashboard (apps/tenant-dashboard)

• Framework: Next.js 15 with React 19
• Architecture: Microfrontend (Vercel Microfrontends)
• Features: Restaurant management, menu editing, drag & drop
• Port: 3002 (microfrontend proxy)
• Status: 🔄 In Development

🎯 Development Roadmap

✅ Completed Features

• Monorepo architecture setup
• Backend API with authentication
• Landing page with marketing content
• Shared packages and utilities
• Database schema and migrations
• Basic menu management

🔄 Currently In Development

• Tenant app UI/UX improvements
• Dashboard drag & drop functionality
• Image upload and management
• Real-time menu updates
• Advanced form validation

🚀 Upcoming Features (Q1 2025)

• Analytics Dashboard: Restaurant performance metrics
• Multi-language Support: Internationalization
• Advanced QR Code Features: Custom QR designs
• Mobile App: React Native companion app
• Payment Integration: Stripe/PayPal integration
• Inventory Management: Stock tracking
• Customer Reviews: Rating and feedback system
• Push Notifications: Real-time updates

🔮 Future Enhancements (Q2-Q3 2025)

• AI-Powered Menu Suggestions: ML-based recommendations
• Advanced Analytics: Customer behavior insights
• Multi-location Support: Chain restaurant management
• API Marketplace: Third-party integrations
• White-label Solutions: Custom branding options
• Advanced Security: 2FA, audit logs
• Performance Optimization: CDN, caching strategies

📦 Shared Packages

@qr-menu/shared-types

• TypeScript type definitions
• API response/request types
• Database schema types
• Status: ✅ Complete

@qr-menu/shared-components

• Reusable React components
• Form components with validation
• UI primitives
• Status: 🔄 Expanding

@qr-menu/shared-config

• Environment configuration
• API endpoints
• Feature flags
• Status: ✅ Complete

@qr-menu/shared-utils

• API client utilities
• Helper functions
• Subdomain handling
• Status: 🔄 In Development

@qr-menu/shared-validation

• Zod validation schemas
• Form validation rules
• API request validation
• Status: 🔄 Expanding

@qr-menu/shared-styles

• Global CSS styles
• Design system tokens
• Hero section animations
• Status: ✅ Complete

🛠️ Technology Stack

Core Technologies

• Node.js: >=18.0.0
• TypeScript: ^5.0.0
• pnpm: >=8.0.0 (Package Manager)

Frontend

• React: 19.1.0
• Next.js: 15.4.6+
• Tailwind CSS: ^4.0.0
• HeroUI: ^2.8.0
• Framer Motion: ^12.23.12

Backend

• NestJS: ^10.x
• Supabase: ^2.56.0
• PostgreSQL: Database
• Multer: File uploads
• Sharp: Image processing

Development Tools

• Turborepo: ^1.10.0 (Monorepo build system)
• ESLint: Code linting
• Prettier: Code formatting

🚀 Getting Started

Prerequisites

• Node.js >=18.0.0
• pnpm >=8.0.0
• Supabase account and project

Installation

1. Clone the repository

   git clone <repository-url>
   cd qr-menu
   

2. Install dependencies

   pnpm install
   

3. Set up environment variables

   # Copy environment files
   cp apps/backend/.env.example apps/backend/.env
   cp apps/landing/.env.example apps/landing/.env
   cp apps/tenant/.env.example apps/tenant/.env
   cp apps/tenant-dashboard/.env.example apps/tenant-dashboard/.env
   

4. Configure Supabase

   • Create a new Supabase project
   • Run migrations from supabase/migrations/
   • Update environment variables with your Supabase credentials

Development

Start all applications

pnpm dev

Start specific applications

# Backend (NestJS) only
pnpm --filter @qrmenu/backend dev

# Landing page only
pnpm --filter @qrmenu/landing dev

# Tenant app with microfrontend proxy
pnpm --filter tenant dev

# Tenant dashboard with microfrontend proxy
pnpm --filter tenant-dashboard dev

Microfrontend Development

# Start microfrontend proxy
pnpm dev:proxy

# This will start both tenant apps with proper routing

Building

Build all packages and applications

pnpm build

Build specific packages

pnpm --filter @qr-menu/shared-types build
pnpm --filter @qrmenu/backend build

🔧 Available Scripts

Root Level

• pnpm dev - Start all applications in development mode
• pnpm build - Build all packages and applications
• pnpm test - Run tests across all packages
• pnpm lint - Lint all packages
• pnpm clean - Clean build artifacts
• pnpm type-check - Type check all packages
• pnpm format - Format code with Prettier

Package Level

• pnpm --filter <package-name> dev - Start specific package
• pnpm --filter <package-name> build - Build specific package
• pnpm --filter <package-name> lint - Lint specific package

🌐 Microfrontend Architecture

The tenant applications use Vercel's Microfrontends framework for seamless integration:

Configuration

• tenant: Customer-facing menu app
• tenant-dashboard: Restaurant management interface
• Routing: Automatic route handling between microfrontends
• Development: Local development with proxy for seamless integration

Benefits

• Independent development and deployment
• Technology agnostic
• Scalable team structure
• Better performance through code splitting

🗄️ Database Schema

The system uses Supabase (PostgreSQL) with the following main entities:

• menus: Restaurant menu configurations
• categories: Menu categories
• items: Menu items with pricing and descriptions
• subscriptions: Restaurant subscription plans
• users: Restaurant owners and staff

🔐 Authentication & Security

• Supabase Auth: User authentication and management
• JWT Tokens: Secure API access
• Role-based Access: Different permissions for different user types
• CORS Protection: Secure cross-origin requests
• Helmet: Security headers

📱 Features

Restaurant Owners

• Create and manage menus
• Upload images and manage content
• Track analytics and performance
• Manage subscription plans

Customers

• Scan QR codes to view menus
• Browse categories and items
• View pricing and descriptions
• Access restaurant information

Technical Features

• Real-time updates
• Responsive design
• SEO optimization
• Performance monitoring
• Type safety with TypeScript

🚀 Deployment

Production Build

pnpm build

Environment Variables

Ensure all required environment variables are set:

• SUPABASE_URL
• SUPABASE_ANON_KEY
• SUPABASE_SERVICE_ROLE_KEY
• NODE_ENV

Deployment Platforms

• Vercel: Frontend applications
• Railway/Render: Backend API
• Supabase: Database and authentication

🤝 Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Run tests and linting
5. Submit a pull request

Development Guidelines

• Follow TypeScript best practices
• Use shared packages for common functionality
• Maintain consistent code style
• Write meaningful commit messages

🎯 Contributing to In-Progress Features

We welcome contributions! Here are some areas you can help with:

• UI/UX Improvements: Help polish the tenant apps
• Testing: Add comprehensive test coverage
• Documentation: Improve docs and examples
• Performance: Optimize loading and rendering
• Accessibility: Ensure inclusive design

📄 License

This project is licensed under the MIT License.

🆘 Support

For support and questions:

• Create an issue in the repository
• Check the documentation
• Review the code examples

🔄 Version History

• v1.0.0: Initial release with monorepo structure
• v1.1.0: Added microfrontend architecture
• v1.2.0: Enhanced shared packages and validation
• v1.3.0: 🚧 In Development - Advanced features and UI improvements

---

💡 Want to contribute? Check out our Contributing Guide and join our development community!

🚀 Stay updated on our progress by watching this repository or joining our discussions.

Built with ❤️ using modern web technologies and best practices.