Elite Byte Code
Elite Byte Code
  • 64
  • 191 492
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
-
Переглядів: 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
Is This The Best MacBook?
Переглядів 1,2 тис.Рік тому
Is This The Best MacBook?
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
So, I Tried Astro, Wow!
Переглядів 2 тис.Рік тому
So, I Tried Astro, Wow!
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
Fetching Data in NextJs13 - #4
Переглядів 3,3 тис.Рік тому
Fetching Data in NextJs13 - #4
Making Sense of NextJS Layouts #3
Переглядів 359Рік тому
Making Sense of NextJS Layouts #3
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

КОМЕНТАРІ

  • @tonyvito5062
    @tonyvito5062 3 години тому

    Bruh stop imitating JsMastery, that's cringe

  • @elitebytecode
    @elitebytecode 10 днів тому

    Sorry for the temporary audio issues at 2:30.

  • @latlov
    @latlov 10 днів тому

    Is it possible to dockerize before deploying? Or do you have a tutorial about it?

    • @elitebytecode
      @elitebytecode 10 днів тому

      Yes its possible to dockerize the app infact my next tutorial is about deploying nextjs applications and adding CI/CD pipelines for automation

  • @elitebytecode
    @elitebytecode 11 днів тому

    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

  • @MohamadHachem-ps3wv
    @MohamadHachem-ps3wv 11 днів тому

    Nice. Make a fullstack tutorial project with next ,mongo , and express for auth and api

    • @elitebytecode
      @elitebytecode 11 днів тому

      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

  • @elitebytecode
    @elitebytecode 12 днів тому

    WATCH NOW - Build and Deploy a Full Stack URL-Shortener with Next.js 15 ua-cam.com/video/HU2Gvj0uTcs/v-deo.html

  • @elitebytecode
    @elitebytecode 12 днів тому

    WATCH NOW - Build and Deploy a Full Stack URL-Shortener with Next.js 15 ua-cam.com/video/HU2Gvj0uTcs/v-deo.html

  • @elitebytecode
    @elitebytecode 12 днів тому

    WATCH NOW - Build and Deploy a Full Stack URL-Shortener with Next.js 15 ua-cam.com/video/HU2Gvj0uTcs/v-deo.html

  • @elitebytecode
    @elitebytecode 12 днів тому

    WATCH NOW - Build and Deploy a Full Stack Task Management System with Next.js 15 ua-cam.com/video/1GXcMjfFcNw/v-deo.html

    • @elitebytecode
      @elitebytecode 12 днів тому

      WATCH NEXT - Build and Deploy a Full Stack URL-Shortener with Next.js 15 ua-cam.com/video/HU2Gvj0uTcs/v-deo.html

  • @elitebytecode
    @elitebytecode 12 днів тому

    WATCH NOW - Build and Deploy a Full Stack Task Management System with Next.js 15 ua-cam.com/video/1GXcMjfFcNw/v-deo.html

  • @elitebytecode
    @elitebytecode 12 днів тому

    WATCH NOW - Build and Deploy a Full Stack Task Management System with Next.js 15 ua-cam.com/video/1GXcMjfFcNw/v-deo.html

    • @elitebytecode
      @elitebytecode 12 днів тому

      WATCH NEXT - Build and Deploy a Full Stack URL-Shortener with Next.js 15 ua-cam.com/video/HU2Gvj0uTcs/v-deo.html

  • @Praskand_Upadhyay
    @Praskand_Upadhyay 22 дні тому

    Deploy?

    • @elitebytecode
      @elitebytecode 12 днів тому

      Check this out - Build and Deploy a Full Stack URL-Shortener with Next.js 15 ua-cam.com/video/HU2Gvj0uTcs/v-deo.html

  • @technolearning-kz7ig
    @technolearning-kz7ig Місяць тому

    Which application you are using

  • @LeonC0704
    @LeonC0704 Місяць тому

    THANK YOU SO SO SO MUCH. How would you scrape a site like Goodreads? I tried it but it says to many redirect.

    • @elitebytecode
      @elitebytecode Місяць тому

      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.

  • @g0d_sh0t_28
    @g0d_sh0t_28 2 місяці тому

    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

  • @rcn96
    @rcn96 2 місяці тому

    Thoroughly Explained, 🔥

  • @meshackpangas-q7x
    @meshackpangas-q7x 2 місяці тому

    How can I connect my github repository for auto deployment on cpanel?

    • @elitebytecode
      @elitebytecode 10 днів тому

      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

  • @EmmanuelChidiebere-t8n
    @EmmanuelChidiebere-t8n 3 місяці тому

    If I use the this method on hostsoch hope it will work out perfectly as it did here ?

  • @gregpilkington5843
    @gregpilkington5843 3 місяці тому

    Why is it that Samsung users have Apple live rent free in their heads?

    • @elitebytecode
      @elitebytecode 3 місяці тому

      Don’t Apple users have the green bubble live rent free in their heads?

    • @gregpilkington5843
      @gregpilkington5843 3 місяці тому

      @@elitebytecode what’s that? Only blue ones we have

  • @LeoKennedy1993
    @LeoKennedy1993 3 місяці тому

    Your point ?

    • @ast9052
      @ast9052 3 місяці тому

      Its pretty obvious

  • @YWYeeeeeee290
    @YWYeeeeeee290 3 місяці тому

    I didn’t know that’s a thing😂

  • @DeltaSwiss
    @DeltaSwiss 3 місяці тому

    Imagine comparing phones. You must be the most boring person. Also you probably start most of the arguments

    • @maran.ath4
      @maran.ath4 3 місяці тому

      We found an angry iPhone fanboy y'all

    • @DeltaSwiss
      @DeltaSwiss 3 місяці тому

      @@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

    • @maran.ath4
      @maran.ath4 3 місяці тому

      @@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

    • @Smogi_5267
      @Smogi_5267 3 місяці тому

      @@maran.ath4are you retarded? This ain’t even a comparison video

    • @SwiffyDK
      @SwiffyDK 3 місяці тому

      Imagine being angry over a comparison

  • @TheRealRivulet
    @TheRealRivulet 3 місяці тому

    😂

  • @elytro1949
    @elytro1949 3 місяці тому

    nobody uses this feature bruh

    • @Edward_Schiffer
      @Edward_Schiffer 3 місяці тому

      Eu uso e muito ksksksksksksksks

    • @Brrrrr18
      @Brrrrr18 3 місяці тому

      I use it like every day UA-cam on top Duolingo on the bottom

    • @TheRealRivulet
      @TheRealRivulet 3 місяці тому

      I do as well speak

    • @DeltaSwiss
      @DeltaSwiss 3 місяці тому

      @@TheRealRivuletbro you have to have the attention span of 1 second

    • @leonfrans1757
      @leonfrans1757 3 місяці тому

      I use it way too much😅❤

  • @Shamika-nt7gd
    @Shamika-nt7gd 3 місяці тому

    Sad😅

  • @eddyxc1697
    @eddyxc1697 3 місяці тому

    thank you for the video, very well explained!

    • @elitebytecode
      @elitebytecode 3 місяці тому

      Thank you, glad you found it helpful

  • @shashankpandey8346
    @shashankpandey8346 4 місяці тому

    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.

    • @elitebytecode
      @elitebytecode 4 місяці тому

      Would you share more information about the urls? Are the new updated urls existing as pages in your app?

    • @shashankpandey8346
      @shashankpandey8346 4 місяці тому

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

  • @zombiegamer8243
    @zombiegamer8243 4 місяці тому

    i wnat to extract the no of cookies i have in cookie clicker every 5 seconds, can i do it using this?

    • @elitebytecode
      @elitebytecode 4 місяці тому

      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]

    • @zombiegamer8243
      @zombiegamer8243 4 місяці тому

      @@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

    • @elitebytecode
      @elitebytecode 3 місяці тому

      @@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

    • @zombiegamer8243
      @zombiegamer8243 3 місяці тому

      @@elitebytecode nvm leave it, i gave up

  • @elitebytecode
    @elitebytecode 5 місяців тому

    HOW TO DEPLOY A REACT APP WITH REACT ROUTER DOM TO A SHARED WEB HOSTING VIDEO - ua-cam.com/video/9wwdIyzX6cY/v-deo.html

  • @joaovictorserra3837
    @joaovictorserra3837 5 місяців тому

    Thank you sir

  • @mrckameeta9777
    @mrckameeta9777 5 місяців тому

    Great work!!

  • @johnmahugu3527
    @johnmahugu3527 5 місяців тому

    Hello Uganda :D

  • @LogicSammm
    @LogicSammm 5 місяців тому

    Your laugh tracks are worse than my dying seal giggle😅 It definitely improved the video though!😂

  • @jaideepsingh11
    @jaideepsingh11 6 місяців тому

    thankyou 😇

  • @Eva-kt3tu
    @Eva-kt3tu 6 місяців тому

    thank you so much!

  • @AdamBottomJeanesGaming
    @AdamBottomJeanesGaming 6 місяців тому

    The laugh tracks are so irritating and ruined the whole video

  • @michaels.mentel9633
    @michaels.mentel9633 7 місяців тому

    Thanks man! That was a cool one

  • @scriptles
    @scriptles 7 місяців тому

    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

    • @elitebytecode
      @elitebytecode 5 місяців тому

      Please let me if you’re still running into issues. I’ll upload a video with React router dom

    • @scriptles
      @scriptles 5 місяців тому

      @@elitebytecode I think I found my problem. My host does not support react. So it was a me problem after all.

    • @elitebytecode
      @elitebytecode 5 місяців тому

      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

    • @scriptles
      @scriptles 5 місяців тому

      @@elitebytecode You gained a subscriber! an da like! Thank you, I an watching your new video now.

    • @elitebytecode
      @elitebytecode 5 місяців тому

      @@scriptles I hope this solves the problem you're running into. Please let me know if you still run into any issues.

  • @chandrakethans5835
    @chandrakethans5835 7 місяців тому

    Saved my day thank you so much!

  • @donwald3436
    @donwald3436 7 місяців тому

    Good content, would be better if you learned to use your IDE lol.

  • @Daniel-ye6xw
    @Daniel-ye6xw 8 місяців тому

    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?

  • @bassamshahoud673
    @bassamshahoud673 8 місяців тому

    create

  • @gnorpflorbsen8665
    @gnorpflorbsen8665 9 місяців тому

    i used vite, it made a dist not a build. are there any differences. also using react-router-dom.

    • @georgeluther1903
      @georgeluther1903 9 місяців тому

      vite runs on node 18, namecheap server only 14. i think

    • @jesfrancisacedillo8906
      @jesfrancisacedillo8906 7 місяців тому

      same, any suggestion?

    • @elitebytecode
      @elitebytecode 5 місяців тому

      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.

  • @SanthoshKumar-ll6qj
    @SanthoshKumar-ll6qj 9 місяців тому

    Great video !! Could also you please help me to fetch the image in this scenario ?

  • @KudzaiSamuel-hw6wd
    @KudzaiSamuel-hw6wd 9 місяців тому

    Wonderful you made it simple🤠

  • @rohithn-76
    @rohithn-76 9 місяців тому

    For creating shared hosting required to buy any of the plane , nobady giving free..

    • @elitebytecode
      @elitebytecode 4 місяці тому

      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

  • @vregile
    @vregile 9 місяців тому

    Interesting fast tutorial. Would use with more in detail explanations. Interested in seeing the next episode! When's it coming out?

    • @elitebytecode
      @elitebytecode 9 місяців тому

      I’m releasing a full REST api video this week .

  • @benitalove8130
    @benitalove8130 10 місяців тому

    Thanks for the upload

  • @yetanotheredition
    @yetanotheredition 10 місяців тому

    Problem solved

  • @elitebytecode
    @elitebytecode 10 місяців тому

    Java 21 is a Game Change!!