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

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.

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.

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.

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.

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.

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)

Chat App

React chat room app where you can log in and chat.

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

Techs I Used

- react
- redux
- redux-thunk
- firebase realtime database
- firebase auth
- bootstrap
- create-react-app

Features

- You can see the sent messages and application works in real time.
- In left tab, you can see people who are already logged into app.
- People who have closed browser tab or logged out appear offline.
- You can send message after login with google auth
- Messages sent by you appear on right, and messages sent by other people appear on left.
- When a message arrives, you will automatically scroll down to last message.
- If you switch to a different tab or app is not visible on your screen, you will receive a notification sound when a message arrives and notification number is added to the title of app tab.
- responsive design

TodoApp-React

In this simple to-do application, the expression we get from the input is added to the todo list and is my part of course.

Click to view live demo (https://jubstaa-todoapp-react.netlify.app/)

Techs I Used

- react
- bootstrap
- scss
- babel
- webpack

Features

- add todo item
- remove todo item
- remove all items
- check item already exist
- responsive design

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

I'm a Frontend 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:

 

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

Music Player

This repo is the music player application I prepared in my JavaScript course.

Live Preview

https://jubstaa-musicplayer.netlify.app/

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

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.

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

KnowMe

Do you know me ?

Live Preview

https://jubstaa-knowme.netlify.app/

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/

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.

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'.

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)

Quizapp

This repo is the quiz application I prepared in my JavaScript course.

Live Preview

https://jubstaa-quizapp.netlify.app

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.

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.

TodoApp

This repo is the todo application I prepared in my JavaScript course.

Live Preview

https://jubstaa-todoapp.netlify.app/