- 64
- 191 492
Elite Byte Code
United States
Приєднався 18 січ 2021
My goal is to help self driven developers find clarity, perspective, and purpose in their careers.
Build a Full Stack URL Shortener with Next.js and MongoDB
In this course, you'll master Next.js, the official React framework, and learn essential concepts like routing, rendering, and full-stack features. Finally, you'll put your skills to the test by building your own enterprise-ready application, Task Management System, while optimizing performance and SEO. Get ready to impress potential employers with your new skills and real-world projects!
FULLSTACK FRAMEWORK
NextJs - nextjs.org/docs
GIVE A STAR
Source Code - github.com/mkasulecoder/Shrivel_URLShortener
DATABASE
MongoDB - www.mongodb.com/atlas
MODERN CSS STYLING
Tailwind CSS - tailwindcss.com/docs/installation
WHAT YOU'LL LEARN
In this video, you'll learn:
Next.js 15 App Folder Structure
Next.js 15 Client Components vs Server Components
Next.js 15 File-based Routing (including dynamic, nested routes and route groups)
Next.js 15 pages, layout, loading, and error Special Files
Next.js 15 Serverless Route Handlers (Next API, API Routes, Full Stack Apps)
Next.js 15 Metadata and Search Engine Optimization (SEO)
Multiple ways to fetch data in Next.js:
Server Side Rendering (SSR),
Static Site Generation (SSG)
Next.js 15 Server Actions
Next.js 15 Data Fetching, Architecture
Next.js 15 Parallel and sequential data fetching
Encoding strings into nanoid strings
URL Redirecting - custom URLs to the original
Got Any Questions?
Bluesky - bsky.app/profile/elitebytecode.bsky.social
Threads - www.threads.net/@elitebytecode
Instagram - elitebytecode
Twitter/ X - x.com/elitebytecode
Mastodon - mastodon.social/@elitemark
Tune in to the latest Tech News:
Spotify - Elite Byte Code
Apple Podcasts - Elite Byte Code
And all other podcast platforms
Chapters:
00:00:00 - Demo Intro
00:20:00 - Folder Structure
01:35:42 - Dynamic Routes
01:00:00 - Connect to MongoDB Database
01:42:50 Adding URLs to the Database
02:30:00 - Data Fetching
04:00:00 - Copying URLs to Clipboards
05:20:00 - Redirecting short custom URLs to original URLs
-
FULLSTACK FRAMEWORK
NextJs - nextjs.org/docs
GIVE A STAR
Source Code - github.com/mkasulecoder/Shrivel_URLShortener
DATABASE
MongoDB - www.mongodb.com/atlas
MODERN CSS STYLING
Tailwind CSS - tailwindcss.com/docs/installation
WHAT YOU'LL LEARN
In this video, you'll learn:
Next.js 15 App Folder Structure
Next.js 15 Client Components vs Server Components
Next.js 15 File-based Routing (including dynamic, nested routes and route groups)
Next.js 15 pages, layout, loading, and error Special Files
Next.js 15 Serverless Route Handlers (Next API, API Routes, Full Stack Apps)
Next.js 15 Metadata and Search Engine Optimization (SEO)
Multiple ways to fetch data in Next.js:
Server Side Rendering (SSR),
Static Site Generation (SSG)
Next.js 15 Server Actions
Next.js 15 Data Fetching, Architecture
Next.js 15 Parallel and sequential data fetching
Encoding strings into nanoid strings
URL Redirecting - custom URLs to the original
Got Any Questions?
Bluesky - bsky.app/profile/elitebytecode.bsky.social
Threads - www.threads.net/@elitebytecode
Instagram - elitebytecode
Twitter/ X - x.com/elitebytecode
Mastodon - mastodon.social/@elitemark
Tune in to the latest Tech News:
Spotify - Elite Byte Code
Apple Podcasts - Elite Byte Code
And all other podcast platforms
Chapters:
00:00:00 - Demo Intro
00:20:00 - Folder Structure
01:35:42 - Dynamic Routes
01:00:00 - Connect to MongoDB Database
01:42:50 Adding URLs to the Database
02:30:00 - Data Fetching
04:00:00 - Copying URLs to Clipboards
05:20:00 - Redirecting short custom URLs to original URLs
-
Переглядів: 398
Відео
Build and Deploy a Full Stack Task Management System with Next.js 15
Переглядів 1,7 тис.Місяць тому
In this course, you'll master Next.js, the official React framework, and learn essential concepts like routing, rendering, and full-stack features. Finally, you'll put your skills to the test by building your own enterprise-ready application, Task Management System, while optimizing performance and SEO. Get ready to impress potential employers with your new skills and real-world projects! Sourc...
Build a Housing Price Machine Learning Predictor with Linear Regression - SaaS
Переглядів 812 місяці тому
Today we build a complete a full machine learning project and we go through the full data science process, to predict housing prices in Python. This video is part 2 of the Machine Learning Series - ua-cam.com/play/PLSRfCvCBQPT_PiU0zF0j9gD2DD91wW3cm.html&si=OAqYFmypruofUpg3 Housing Price Dataset - www.kaggle.com/datasets/harishkumardatalab/housing-price-prediction Anaconda - www.anaconda.com/dow...
Build & Deploy Housing Price AI Machine Learning Predictor - SaaS
Переглядів 1432 місяці тому
Today we build a complete a full machine learning project and we go through the full data science process, to predict housing prices in Python. This video is part 2 of the Machine Learning Series - ua-cam.com/play/PLSRfCvCBQPT_PiU0zF0j9gD2DD91wW3cm.html&si=OAqYFmypruofUpg3 Housing Price Dataset - www.kaggle.com/datasets/harishkumardatalab/housing-price-prediction Anaconda - www.anaconda.com/dow...
Python for Machine Learning for Beginners | How to Become a Machine Learning Engineer
Переглядів 573 місяці тому
In this video, I'll walk you through how to become a Machine Learning Engineer. In the next video, we'll work together in building Machine Learning Models that predict data from files. We'll use real-world examples of patient data from files. Follow and Reach me at: Website: devmarkcodes.netlify.app/ Instagram: / elitebytecode X: / elitebytecode Dev Community: dev.to/casulemarc Github: github.c...
Deploy your SAAS APP IDEA on any Web Hosting platform for production | ReactJS Tutorial
Переглядів 2774 місяці тому
#React #ReactJS #JavaScript #ReactRouterDOM #100DaysOfCode # SharedWebHosting #cpanelhosting #cpanel #reactrouterdomserver For deploying a react app on a shared hosting you need to create a production build. Production build/dist is a pack of all your react code and its dependencies. In most shared hosting we put our site/app inside a public_html directory so if we hit www.yourdomain.com it ser...
RESTApi in Spring Boot & Java, Its actually easy
Переглядів 1369 місяців тому
Learn how to swiftly build a powerful RESTful API with ease using Spring Boot and Java. In this tutorial, we'll guide you through the process step by step, enabling you to create your own robust API in just minutes. Say goodbye to lengthy development cycles and hello to rapid API deployment! Follow and Reach me at: Instagram: / elitebytecode Twitter: / elitebytecode Dev Community: dev.to/casule...
Top 5 Java APIs for Web Scraping and JSON Querying | 2024
Переглядів 1,5 тис.10 місяців тому
Here are the top 5 Java APIs for Web Scraping and Testing 1. ZenRows www.zenrows.com/ 2. Selenium www.selenium.dev/ 3. Gecco github.com/xtuhcy/gecco 4. Jsoup - HTML Parser jsoup.org/ 5. Jaunt API - Web Scraping & JSON Querying jaunt-api.com/ Chapters 01:02 Jaunt API - Web Scraping & JSON Querying 02:09 Jsoup - HTML Parser 03:32 Gecco 04:09 Selenium 05:56 ZenRows Follow and Reach me at: - Get Ac...
Is Java worth Still Learning in 2024 | Software Engineering Jobs
Переглядів 63710 місяців тому
Land your Software Engineering Job in Java with minimal stress and quick interview invites. Java 21 will bring major improvements to the world's most popular enterprise programming language. Learn about unnamed classes, string templates, and other new features expected in the future. Java jobs are widely out there. Topics Covered - New Java features in version 21 - Java Jobs - Java Programming...
Introduction to Robotics with Arduino Nano ESP32
Переглядів 24110 місяців тому
Introduction to Robotics with Arduino Nano ESP32
How to Build Real World App in Astro Framework in 30 mins - #3
Переглядів 3,1 тис.Рік тому
How to Build Real World App in Astro Framework in 30 mins - #3
Let's Build A New's Blog - Astro Framework #2
Переглядів 769Рік тому
Let's Build A New's Blog - Astro Framework #2
How to Build an Astro Framework Crash Course - Beginner #1
Переглядів 459Рік тому
How to Build an Astro Framework Crash Course - Beginner #1
React Player: Creating Pop-Up Modals for Playing Videos with Next.JS 13 #6
Переглядів 7 тис.Рік тому
React Player: Creating Pop-Up Modals for Playing Videos with Next.JS 13 #6
React Modal: Create Pop Up Modals in NextJs 13 | #5
Переглядів 8 тис.Рік тому
React Modal: Create Pop Up Modals in NextJs 13 | #5
NextJs 13 Routing & Components - Build Dynamic Web Apps with Ease! | #2
Переглядів 520Рік тому
NextJs 13 Routing & Components - Build Dynamic Web Apps with Ease! | #2
NextJS 13 New features - Layouts, Fetching Data, Components Tutorial | #1
Переглядів 845Рік тому
NextJS 13 New features - Layouts, Fetching Data, Components Tutorial | #1
Web Scrapping in Java with Jsoup | Data Extraction
Переглядів 21 тис.Рік тому
Web Scrapping in Java with Jsoup | Data Extraction
Verify Passwords For Web Security | Java Tutorial
Переглядів 1,2 тис.Рік тому
Verify Passwords For Web Security | Java Tutorial
Using Axios API to Request data from an API Endpoint
Переглядів 2,6 тис.Рік тому
Using Axios API to Request data from an API Endpoint
Making sense of the useState hook ReactJs
Переглядів 1,3 тис.Рік тому
Making sense of the useState hook ReactJs
Master ReactJs from Beginner to Pro - Beginner's Tutorial
Переглядів 1,2 тис.Рік тому
Master ReactJs from Beginner to Pro - Beginner's Tutorial
Making sense of Functions in Javascript
Переглядів 1,2 тис.Рік тому
Making sense of Functions in Javascript
If, If-Else, & Else Statements in JavaScript 2023
Переглядів 1,1 тис.Рік тому
If, If-Else, & Else Statements in JavaScript 2023
Don't Do this with While Loops - JavaScript Guide 2023
Переглядів 1,2 тис.2 роки тому
Don't Do this with While Loops - JavaScript Guide 2023
Legendary For Loops in JavaScript 2023
Переглядів 1,2 тис.2 роки тому
Legendary For Loops in JavaScript 2023
Bruh stop imitating JsMastery, that's cringe
Sorry for the temporary audio issues at 2:30.
Is it possible to dockerize before deploying? Or do you have a tutorial about it?
Yes its possible to dockerize the app infact my next tutorial is about deploying nextjs applications and adding CI/CD pipelines for automation
Hey guys if your interested in adding authentication to your app, WATCH THIS - Build and Deploy a Full Stack Task Management System with Next.js 15, MongoDB, and Clerk Auth ua-cam.com/video/1GXcMjfFcNw/v-deo.html
Nice. Make a fullstack tutorial project with next ,mongo , and express for auth and api
Sure!! I’ll definitely make one with express for auth. Feel free to check out my previous video that uses Clerk for auth and let me know if it answers your auth questions. Build and Deploy a Full Stack Task Management System with Next.js 15 Mongo DB & Clerk Auth ua-cam.com/video/1GXcMjfFcNw/v-deo.html
WATCH NOW - Build and Deploy a Full Stack URL-Shortener with Next.js 15 ua-cam.com/video/HU2Gvj0uTcs/v-deo.html
WATCH NOW - Build and Deploy a Full Stack URL-Shortener with Next.js 15 ua-cam.com/video/HU2Gvj0uTcs/v-deo.html
WATCH NOW - Build and Deploy a Full Stack URL-Shortener with Next.js 15 ua-cam.com/video/HU2Gvj0uTcs/v-deo.html
WATCH NOW - Build and Deploy a Full Stack Task Management System with Next.js 15 ua-cam.com/video/1GXcMjfFcNw/v-deo.html
WATCH NEXT - Build and Deploy a Full Stack URL-Shortener with Next.js 15 ua-cam.com/video/HU2Gvj0uTcs/v-deo.html
WATCH NOW - Build and Deploy a Full Stack Task Management System with Next.js 15 ua-cam.com/video/1GXcMjfFcNw/v-deo.html
WATCH NOW - Build and Deploy a Full Stack Task Management System with Next.js 15 ua-cam.com/video/1GXcMjfFcNw/v-deo.html
WATCH NEXT - Build and Deploy a Full Stack URL-Shortener with Next.js 15 ua-cam.com/video/HU2Gvj0uTcs/v-deo.html
Deploy?
Check this out - Build and Deploy a Full Stack URL-Shortener with Next.js 15 ua-cam.com/video/HU2Gvj0uTcs/v-deo.html
Which application you are using
To write the code
VS Code
THANK YOU SO SO SO MUCH. How would you scrape a site like Goodreads? I tried it but it says to many redirect.
It could be blocking you from scrapping it. Some sites detect bots and immediately block you. Make sure you comply with the site’s policies.
I have a issue, when i add the dependency it tells me it can'y be found cound you help me with this : Dependency 'org. jsoup:jsoup:1.18.1' not found , i can't seem to find any information about this
Thoroughly Explained, 🔥
How can I connect my github repository for auto deployment on cpanel?
I will upload a video on how to add FTP services and ci/cd pipelines like github on a reactjs or nextjs app for cpanel deployment
If I use the this method on hostsoch hope it will work out perfectly as it did here ?
Why is it that Samsung users have Apple live rent free in their heads?
Don’t Apple users have the green bubble live rent free in their heads?
@@elitebytecode what’s that? Only blue ones we have
Your point ?
Its pretty obvious
I didn’t know that’s a thing😂
Imagine comparing phones. You must be the most boring person. Also you probably start most of the arguments
We found an angry iPhone fanboy y'all
@@maran.ath4 I don’t support Apple or any other phone brand. Anyone who compares phones is chronically brain dead. You buy what you like not what people tell you to like
@@DeltaSwiss I see, I disagree though, people don't buy what they "like", you buy what has value, if you love taking pictures you will obviously need to compare phones within your budget to know which will offer the best value, value is what products are built on. So making a comparison video is not to tell people what to like, it's to show people what value there is in different products, in this case, that android already has the value that apple is now trying to offer
@@maran.ath4are you retarded? This ain’t even a comparison video
Imagine being angry over a comparison
😂
nobody uses this feature bruh
Eu uso e muito ksksksksksksksks
I use it like every day UA-cam on top Duolingo on the bottom
I do as well speak
@@TheRealRivuletbro you have to have the attention span of 1 second
I use it way too much😅❤
Sad😅
thank you for the video, very well explained!
Thank you, glad you found it helpful
I am having a problem while navigating to a link through url. I can use buttons and so on, but when I edit the url and then enter, it gives 404 error.
Would you share more information about the urls? Are the new updated urls existing as pages in your app?
@@elitebytecode oh I solved the error. I had to put some code on .htaccess, which I got from cpanel. Actually, my spa would not find the page when I refreshed on pages other than home.
i wnat to extract the no of cookies i have in cookie clicker every 5 seconds, can i do it using this?
I believe Jsoup can manage cookies. Here is a resource that may be useful to you. It closely shows matches your question. You may instead just tinker around with the java DateTime in some sort of loop to track your cookies [Rough idea]
@@elitebytecode thats not really possible, because the rate of production of cookies will change all the time as the program buys stuff and all, so if i wanted to do that i would basically have to make my own implimentation of cookie clicker internally to keep track of cookies
@@zombiegamer8243 thank you for sharing this! I'll have to dig deeper into this as well and circle back with my findings. Please share any updates you come up with in your implementation
@@elitebytecode nvm leave it, i gave up
HOW TO DEPLOY A REACT APP WITH REACT ROUTER DOM TO A SHARED WEB HOSTING VIDEO - ua-cam.com/video/9wwdIyzX6cY/v-deo.html
Thank you sir
Thank you!!
Great work!!
Hello Uganda :D
Your laugh tracks are worse than my dying seal giggle😅 It definitely improved the video though!😂
thankyou 😇
Glad it helped
thank you so much!
The laugh tracks are so irritating and ruined the whole video
Thanks man! That was a cool one
Thank you
This has a problem. If you try and use React routing then visiting subdirectors on that site will return error 404.. this is the problem I am having right now and cannot get a working solution for
Please let me if you’re still running into issues. I’ll upload a video with React router dom
@@elitebytecode I think I found my problem. My host does not support react. So it was a me problem after all.
Here is a my new walk-through to fix your issue - HOW TO DEPLOY A REACT APP WITH REACT ROUTER DOM TO A SHARED WEB HOSTING VIDEO - ua-cam.com/video/9wwdIyzX6cY/v-deo.html
@@elitebytecode You gained a subscriber! an da like! Thank you, I an watching your new video now.
@@scriptles I hope this solves the problem you're running into. Please let me know if you still run into any issues.
Saved my day thank you so much!
Glad it helped!
Good content, would be better if you learned to use your IDE lol.
Thanks, noted
Hello, can you help me with one question please? I got a trouble while trying to get info from an 'option' blocks: <select id="cbxGroupNumber" onkeydown="window.document.onkeydown" name="cbxGroupNumber"> <option value="3031">09С31</option> <option value="3048">09С32</option> </select> If I use Jsoup.connect, 'seletct' block is empty as a result, as far as I know it might be happening because window.document.onkeydown attribute is creating 'options' dynamically. Do I have a way to somehow get 'option' values with jsoup?
create
i used vite, it made a dist not a build. are there any differences. also using react-router-dom.
vite runs on node 18, namecheap server only 14. i think
same, any suggestion?
It’s the same. Files in dist should be able to do the job. Make sure you zip it first before upload. Let me know if you run into any issues.
Great video !! Could also you please help me to fetch the image in this scenario ?
Wonderful you made it simple🤠
Thank you! 😊
For creating shared hosting required to buy any of the plane , nobady giving free..
Netlify gives frontend static applications for free. Here is tutorial on how to do this - ua-cam.com/video/6B4vgWYb0p4/v-deo.htmlsi=TF1-unocvOrBNvkW
Interesting fast tutorial. Would use with more in detail explanations. Interested in seeing the next episode! When's it coming out?
I’m releasing a full REST api video this week .
Thanks for the upload
Problem solved
Java 21 is a Game Change!!