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.
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
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.
🌱 I’m currently learning Unity
👨💻 All of my projects are available at ilkerbalcilar.com
📫 How to reach me ilkerbalcilartr@gmail.com
yarn add telegram-message-send
npm install telegram-message-send
import {
telegramSendMessage,
telegramSendPhoto,
telegramSendAudio,
telegramSendDocument,
telegramSendLocation,
telegramSendContact,
telegramSendPoll,
telegramSendDice,
} from 'telegram-message-send'
const botKey = '#########'
const chatId = '#########'
telegramSendMessage(botKey, chatId, 'Hello World')
telegramSendPhoto(botKey, chatId, 'https://avatars.githubusercontent.com/u/100691616?s=200&v=4', 'Custom Caption')
telegramSendAudio(botKey, chatId, 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3', 'Custom Caption')
telegramSendDocument(
botKey,
chatId,
'https://s2.q4cdn.com/175719177/files/doc_presentations/Placeholder-PDF.pdf',
'Custom Caption',
)
telegramSendLocation(botKey, chatId, 41.084677113651814, 29.00455392606353)
telegramSendContact(botKey, chatId, 'Ilker Balcilar', '+905555555555')
telegramSendPoll(botKey, chatId, 'Which one would you prefer', ['Javascript', 'Typescript'])
telegramSendDice(botKey, chatId, 'dice')
Create a Telegram bot with BotFather before connecting your bot to Telegram.
In order to receive a message from the bot, you must first send a message to the bot and create a chat.
Prop | Required | Type | Example |
---|---|---|---|
botKey |
yes | string | ######### |
chatId |
yes | string | ######### |
text |
yes | string | Hello World |
Prop | Required | Type | Example |
---|---|---|---|
botKey |
yes | string | ######### |
chatId |
yes | string | ######### |
photoURL |
yes | string | https://avatars.githubusercontent.com/u/100691616?s=200&v=4 |
caption |
no | string | Custom Caption |
Prop | Required | Type | Example |
---|---|---|---|
botKey |
yes | string | ######### |
chatId |
yes | string | ######### |
audioURL |
yes | string | https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3 |
caption |
no | string | Custom Caption |
Prop | Required | Type | Example |
---|---|---|---|
botKey |
yes | string | ######### |
chatId |
yes | string | ######### |
documentURL |
yes | string | https://s2.q4cdn.com/175719177/files/doc_presentations/Placeholder-PDF.pdf |
caption |
no | string | Custom Caption |
Prop | Required | Type | Example |
---|---|---|---|
botKey |
yes | string | ######### |
chatId |
yes | string | ######### |
latitude |
yes | number | 41.084677113651814 |
longitude |
yes | number | 29.00455392606353 |
Prop | Required | Type | Example |
---|---|---|---|
botKey |
yes | string | ######### |
chatId |
yes | string | ######### |
name |
yes | string | Ilker Balcilar |
phone_number |
yes | string | +905555555555 |
Prop | Required | Type | Example |
---|---|---|---|
botKey |
yes | string | ######### |
chatId |
yes | string | ######### |
question |
yes | string | Which one would you prefer |
options |
yes | Array<string |
["Javascript", "Typescript"] |
Prop | Required | Type | Example |
---|---|---|---|
botKey |
yes | string | ######### |
chatId |
yes | string | ######### |
type |
no | string | dice / dart / bowling / basketball / football / slot |
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
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/ui
CLI.
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.
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
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
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://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 repo is the quiz application I prepared in my JavaScript course.
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
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
This repo is the music player application I prepared in my JavaScript course.
This repo is the todo application I prepared in my JavaScript course.
With this application, you can search countries and access their information and neighboring countries and is my part of course.
Click to view live demo (https://jubstaa-countries.netlify.app/)
- javascript
- bootstrap
- await
- search countries
- use your location
- click on neighboring countries to go to country information
- responsive design
(https://api.opencagedata.com/) (https://restcountries.com/v3.1)
React app to search Github profiles and see reposiotries and contents. This app uses the Context API along with the useContext and useReducer hooks for state management and is part of my course. Although it is a simple application in the course, new features have been added by me.
Click to view live demo (https://jubstaa-githubfinder.netlify.app/)
- react
- react-router-dom
- react-markdown
- axios
- prop-types
- rehype-raw
- bootstrap
- scss
- babel
- webpack
- make a user search
- show user, repo and readme info
- show repo details and files
- show repo language information
- show file, folder and readme details
- download files
- error catches
- responsive design