Click to view live demo (https://dplus-clone.vercel.app/)
- create-next-app
- next ssr
- next auth
- firestore
- tailwind
- heroicons
- react-responsive-carousel
- react-player
- react-indiana-drag-scroll
- html-react-parser
This is a Next.js project bootstrapped with create-next-app.
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.
To learn more about Next.js, take a look at the following resources:
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
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 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.
To run the project locally, follow these steps:
Clone the repository:
git clone https://github.com/Jubstaaa/pixelate-game.git
Install dependencies:
cd pixelate-game
npm install
Set up environment variables:
Create a .env file in the root directory of the project and add the necessary configuration values.
Start the development server:
npm run dev
The application will run at http://localhost:3000.
To deploy the application using Vercel:
Alternatively, you can use the terminal:
vercel deploy
Contributions are welcome! Please share your suggestions and bug reports as issues or create a pull request.
This project is licensed under the MIT License. See the LICENSE file for details.
For questions or feedback, please reach out to Jubstaaa.
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.
npm install
.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
npm start
output/final_video.mp4 and uploaded to Catbox.moe/Instagram automatically..github/workflows/daily.yml runs the script daily, handles all secrets, and uploads the video.output/final_video.mp4 (vertical, optimized for Reels)temp/ and auto-cleanedpages_show_list, business_management, instagram_basic, instagram_content_publishUse 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 IDYOUR_APP_SECRET: Your Facebook App SecretYOUR_SHORT_LIVED_TOKEN: The token you copied from the ExplorerThe response will include a new access_token valid for about 60 days. Use this as IG_ACCESS_TOKEN in your .env and GitHub Secrets.
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"
YOUR_LONG_LIVED_TOKEN with your current tokenNote: If you ever get an "invalid_token" or "expired" error, repeat the steps above to generate a new token.
🌱 I’m currently learning Unity
👨💻 All of my projects are available at ilkerbalcilar.com
📫 How to reach me ilkerbalcilartr@gmail.com
Bu repo şirketimiz için HTML,CSS,JS kullanarak hazırladığım responsive tanıtım sayfasıdır.
Bu repo İstanbul Gelişim Üniversitesi Nesne Tabanlı Programlama dersi eşliğinde Java programlama dili ile oluşturulmuş projeleri içerir.
This is a Next.js project bootstrapped with create-next-app.
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.
To learn more about Next.js, take a look at the following resources:
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
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.
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/
This project was bootstrapped with Create React App.
In the project directory, you can run:
npm startRuns 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 testLaunches the test runner in the interactive watch mode.
See the section about running tests for more information.
npm run buildBuilds 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 ejectNote: 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.
You can learn more in the Create React App documentation.
To learn React, check out the React documentation.
This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting
This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration
This section has moved here: https://facebook.github.io/create-react-app/docs/deployment
npm run build fails to minifyThis section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify
This library provides a simple class-based interface for sending messages and various media types to a Telegram bot.
yarn add telegram-message-send
npm install telegram-message-send
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 Telegram bot with BotFather before connecting your bot to Telegram.
/newbot to create a new Telegram bot.botKey) for later steps./getid. You will get a reply back with your user ID.chatId).In order to receive a message from the bot, you must first send a message to the bot and create a chat.
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'.
Thank you for your interest in Buildog and your willingness to contribute!
You will need to install and configure the following dependencies on your machine to build Buildog:
This repo uses Turborepo.
To contribute code to Buildog, you must fork the Buildog repo.
git clone https://github.com/<github_username>/buildog.git
cd buildog
pnpm install # install dependencies
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 |
Auth0 - How to setup Auth0
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 settingsUse the pre-made script:
pnpm ui:add <shadcn/ui-component-name>
This works just like the add command in the
shadcn/uiCLI.
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/buildogAfter making any changes, open a pull request. Once your PR has been merged, you will be proudly listed as a contributor.
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/)
- react
- react-router-dom
- react-hot-toast
- axios
- expressjs
- mongoDB
- mongoose
- jsonwebtoken
- bcryptjs
- firebase storage bucket
- 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.
Click to view live demo (https://jubstaa-arbit-blog.netlify.app/)
- react
- tailwind
- redux
- redux-toolkit
- formik
- yup
- axios
- classnames
- react-icons
- react-hot-toast
- react-helmet
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/)
- react
- react-router-dom
- react-hot-toast
- axios
- expressjs
- mongoDB
- mongoose
- jsonwebtoken
- bcryptjs
- firebase storage bucket
- 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.
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/)
- react
- firebase
- daisyui
- 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.
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)
- 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
- 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
- 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.
- You can search registered users with search bar.
- Available buttons on the right. Home, Direct, Notifications, Add Post, Profile, Saved, Settings, Logout.
- Shows you and your followers posts by posting date.
- Your profile appears on sidebar, you can click and go to your profile.
- 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.
- 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.
- 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.
- 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.
- You can see likes, comments and follow notifications.
- Red dot appears when there are unread notifications.
- 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.
- 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.
Click to view live demo (https://tw-clone-liart.vercel.app/)
- typescript
- next-ssr
- next-auth
- firestore
- firebase cloud storage
- tailwind
- heroicons
- react-timeago
- react-twitter-embed
- react-hot-toast
- 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
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/)
- react
- react-router-dom
- redux
- redux-thunk
- firebase realtime database
- firebase auth
- PrivateRoute
- history
- bootstrap
- create-react-app
- 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
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
- nextjs
- tailwind
- sanity
- groq
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.
Follow these steps to download and use the tool:
Download the Tool
.exe file (e.g., lol-config-editor.exe).Run the Application
lol-config-editor.exe to launch the application.Start Customizing
This project was built using modern web technologies to ensure a smooth and responsive experience:
Save Configurations:
Switch Between Profiles:
Multi-User Support:
Account-Wide Settings:
This project is open source and available on GitHub. Feel free to explore, contribute, or report issues!
Contributions are welcome! If you have suggestions for new features, find a bug, or want to improve the code, feel free to:
A: No, it only edits configuration files that are safe and intended for user customization.
A: No, this tool only interacts with the configuration files and does not interfere with the game client or its processes.
A: Yes, it’s completely free and open source!
If you have any questions, feedback, or suggestions, feel free to reach out:
This project is licensed under the MIT License. See the LICENSE file for details.
React chat room app where you can log in and chat.
Click to view live demo (https://jubstaa-chatapp.netlify.app/)
- react
- redux
- redux-thunk
- firebase realtime database
- firebase auth
- bootstrap
- create-react-app
- 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
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/)
- react
- bootstrap
- scss
- babel
- webpack
- add todo item
- remove todo item
- remove all items
- check item already exist
- responsive design