- Видео 71
- Просмотров 3 110 435
Coding With Dawid
Швеция
Добавлен 8 апр 2021
Build a Fullstack Job Board App with Next.js 14 (react.js, mongo, tailwind)
In this tutorial, You will learn how to build a simple fullstack job board app using latest Next.js (with server components) and mongo database.
This tutorial is beginners-friendly and will teach you how to build a small job portal website using latest tech. By the end of this tutorial, your will have a simple but nice looking app that you can use in your portfolio
Code: github.com/dejwid/job-board
Timestamps
00:00:00 - intro
00:04:00 - homepage
01:07:34 - authentication
01:37:06 - creating companies
02:42:59 - job form
03:21:47 - image upload to s3
04:10:03 - saving job to our mongo db
05:11:28 - edit & delete job
06:17:52 - single job page
06:31:27 - outro
This tutorial is beginners-friendly and will teach you how to build a small job portal website using latest tech. By the end of this tutorial, your will have a simple but nice looking app that you can use in your portfolio
Code: github.com/dejwid/job-board
Timestamps
00:00:00 - intro
00:04:00 - homepage
01:07:34 - authentication
01:37:06 - creating companies
02:42:59 - job form
03:21:47 - image upload to s3
04:10:03 - saving job to our mongo db
05:11:28 - edit & delete job
06:17:52 - single job page
06:31:27 - outro
Просмотров: 15 436
Видео
Build a Fullstack Marketplace Clone with Next.js and ImageKit
Просмотров 9 тыс.Месяц назад
In this tutorial, You will learn how to build a fullstack marketplace clone using Typescript, latest Next.js (with server components and server acitons), MongoDB and ImageKit for image upload and storage. This ~10-hours tutorial is designed for beginners and will teach you how to build a fb marketplace clone. By the end of this tutorial you will have a really nice looking project that will stan...
Build a fullstack Buymeacoffee clone with Next.js
Просмотров 10 тыс.Месяц назад
In this tutorial, You will learn how to build a fullstack buymeacoffee/patreon clone using Typescript, latest Next.js (with server components and server acitons), MongoDB and Cryptomus for payment processing (both crypto and credit cards!) This tutorial is designed for beginners and will teach you how to build a patreon / buymeacoffee type of service where users can create public profiles to re...
Build a Fullstack Trello Clone with Next.js, Typescript and Liveblocks
Просмотров 14 тыс.5 месяцев назад
In this tutorial, You will learn how to build a fullstack trello clone using Typescript, Next.js, Mongo and Liveblocks. This 9-hours tutorial is designed for beginners and will teach you how to build a trello clone. Every change on cards, columns and boards is live and shows immediately for all other users that have access to the same board. By the end of this tutorial you will have a really ni...
Build fullstack Linktree clone with Next.js, tailwind and mongodb
Просмотров 59 тыс.6 месяцев назад
In this 12-hours-long tutorial, you will learn how to build a fullstack landing page service app using next.js and mongo database. This type of service is often used on platforms like instagram to allow users to put several links in one place. This tutorial is designed for beginners and will teach you the basics of building a linktree clone with next.js 14. By the end of this tutorial, you will...
Build a Fullstack Food Ordering App with Next.js 14 (react.js, mongo, tailwind)
Просмотров 354 тыс.7 месяцев назад
In this tutorial, You will learn how to build a fullstack food ordering app using next.js and mongo database. This tutorial is designed for beginners and will teach you the basics of building a food ordering style of apps with next.js 14. By the end of this tutorial, you will have a working restaurant page that you can use for your portfolio. Part 2 (deployment etc): ruclips.net/video/jaMJnbRjU...
Build Captions Generator with Next.js and React
Просмотров 16 тыс.8 месяцев назад
In this tutorial I am going to show you how to build captions generator that takes a video, transcribes it and than applies captions on it. The captions will be adjustable with a nice editor and the app will have more options like colors, margins, etc. This is a cool and unique app if you want to have a project that stands out from the crowd and will be useful during any interview. I am sure it...
Build a Fullstack SEO Rank Tracker App with Next.js 13 and Bright Data
Просмотров 14 тыс.8 месяцев назад
Build & deploy a unique project: SEO Rank Tracker App with Next.js 13, React, Mongo and Tailwind. This is a step by step tutorial where we build this cool portfolio project without any starter code using latest next.js and other new libs. With this beginner friendly tutorial you will learn about server and client components, how to use a headless browser (puppeteer) and how to implement 3rd par...
Build Bitcoin Price Tracker with React.js, Typescript and AirCode.io
Просмотров 11 тыс.9 месяцев назад
In this tutorial we are going to build a price comparison app for bitcoin that finds the cheapest price across 4 different exchanges. For this project we are going to use React.js with Typescript, tailwind.css for styling and AirCode.io for our simple backend functionality. This is a cool react.js project that will help you to learn some typescript, and how to implement simple backend api funct...
Build a Feedback Board with Next.js 13 (react.js, mongo, tailwind.css)
Просмотров 29 тыс.10 месяцев назад
In this tutorial, You will learn how to build a fullstack feedback board app using next.js 13, tailwind.css and mongo database. This feedback app tutorial is designed for beginners and will teach you the basics of building a full stack apps with next.js. By the end of this tutorial, you will have a working feedback board app that you can use for your portfolio. Extended course / SaaS version: d...
Build a Fullstack E-commerce using Next.js (react.js, mongo, tailwind, styled components)
Просмотров 776 тыс.Год назад
In this tutorial, You will learn how to build a fullstack ecommerce app using next.js and mongo database. It will be 2 projects with a lot of cool functionality. This ecommerce tutorial is designed for beginners and will teach you the basics of building a ecommerce shops with next.js. By the end of this tutorial, you will have a working ecommerce / webshop that you can use for your portfolio. S...
Deploy MERN Apps to Vercel
Просмотров 16 тыс.Год назад
In this video i am going to show you how to deploy mern apps we built to vercel and host them there for free. After deploying the apps to vercel you can put them on your resume and share on your portfolio. Airbnb clone / booking app tutorial: ruclips.net/video/MpQbwtSiZ7E/видео.html Blog app tutorial: ruclips.net/video/xKs2IZZya7c/видео.html 00:00 - intro 00:35 - upload to s3 (aws) 34:09 - allo...
Build a Fullstack CHAT App using MERN (mongo, express, react, node)
Просмотров 180 тыс.Год назад
In this beginner friendly tutorial, I'm going to show you how to build a fullstack chat app using MERN (mongo, express, react, node). It will be a chat app with a lot of cool features like online indicator, uploads/attachments, auto-scrolling and many others This chat app tutorial is designed for beginners and will teach you the basics of building a chat system app using MERN and websockets. By...
Build a Fullstack Booking App using MERN (mongo, express, react, node)
Просмотров 520 тыс.Год назад
In this beginner friendly tutorial, I'm going to show you how to build a fullstack booking app using MERN (mongo, express, react, node). It will be an airbnb clone with all the main functionality This booking app tutorial is designed for beginners and will teach you the basics of building a booking system app using MERN. By the end of this tutorial, you will have a working booking system app th...
Build a Fullstack Blog App using MERN (mongo, express, react, node)
Просмотров 337 тыс.Год назад
In this tutorial, I'm going to show you how to build a fullstack blog app using MERN (mongo, express, react, node). This blog app tutorial is designed for beginners and will teach you the basics of building a blog app using MERN. By the end of this tutorial, you will have a working blog app that you can use to publish your blog content. Code: github.com/dejwid/mern-blog Timestamps: 00:00:00 - I...
Host your MERN apps for FREE using vercel
Просмотров 11 тыс.Год назад
Host your MERN apps for FREE using vercel
Build a MERN Money Tracker App | Simple mern app tutorial for beginners
Просмотров 37 тыс.Год назад
Build a MERN Money Tracker App | Simple mern app tutorial for beginners
Social Media App Tutorial (React.js, Supabase, Tailwind, Next.js)
Просмотров 39 тыс.Год назад
Social Media App Tutorial (React.js, Supabase, Tailwind, Next.js)
React Social Media App Design with Tailwind.css
Просмотров 28 тыс.Год назад
React Social Media App Design with Tailwind.css
Build a Todo App with React.js | Beginner React Project using hooks
Просмотров 23 тыс.Год назад
Build a Todo App with React.js | Beginner React Project using hooks
Spacex clone with HTML, CSS and JS (tutorial for beginners)
Просмотров 6 тыс.Год назад
Spacex clone with HTML, CSS and JS (tutorial for beginners)
Build your own Captcha with Next.js/React [Tutorial]
Просмотров 10 тыс.Год назад
Build your own Captcha with Next.js/React [Tutorial]
Tip Calculator App Tutorial with React.js
Просмотров 2,3 тыс.Год назад
Tip Calculator App Tutorial with React.js
Call Child Component Function in React.js
Просмотров 7 тыс.Год назад
Call Child Component Function in React.js
Build 3 Beginner Javascript Projects in 40 mins Tutorial (HTML, CSS & JS)
Просмотров 2,8 тыс.Год назад
Build 3 Beginner Javascript Projects in 40 mins Tutorial (HTML, CSS & JS)
E-Commerce tutorial with Next.js, React, Tailwind, MongoDB and Stripe
Просмотров 81 тыс.Год назад
E-Commerce tutorial with Next.js, React, Tailwind, MongoDB and Stripe
Twitter clone with React.js, MongoDB and tailwind css
Просмотров 142 тыс.Год назад
Twitter clone with React.js, MongoDB and tailwind css
Learn HTML+CSS by building 10 websites! Part 2/2
Просмотров 4,5 тыс.Год назад
Learn HTML CSS by building 10 websites! Part 2/2
Hi , please need your advice, is Next.js a must learn today, is it worthy ? thx
what to do to create buckets in another way ,as while(image upload to s3) ,,they ask us for bank credentials so ,,is their any another free way
You mean they ask for a credit card?
@@CodingWithDawid yes ,,is their any free way?
Great now I can build a platform to look for jobs I get rejected from 😭
Thank you Dawid really enjoyed learning a New skill with you
Hey David , Can you make a short tutorial that how to deploy this on Vercel or Netlify
is teaching your full time job ?
which extensions did you use in this video to check height,padding etc
Can you give me an exact timestamp? (hh:mm:ss)
5:10 how did you know how much padding you have to give Is it by inspecting element or something else
Thank you so much. You are the best teacher in the world
Thank you 😊
Great
What platform are you using for this project
For deployment? Vercel
workos auth doesnt work for production for free. CMON man i cant deploy it anywhere. so then whats the use of the project?
thanks Dawid!
Why not to use lucide icons or react icons instead of fontawesome? a very complicated installation process.
leaving book mark 2:09:53
Thanks a lot for your sharing. You are amazing.
please use mongoDB and Postgres also for your future project.Appreciate your awesome content mate.
thanks <3 you're one of the best coders here in yt, we will support you 'til the end <3
Thank you ❤️
did you follow best practices in this one? i saw the blog website video and you didn't care about the folder structure at all
I always care about about folder structure when it becames a problem (if there are many files)
Absolute treasure.. Great job😊
it's amazing ,,new bunch in my project section now ,,Thanks david
were you able to complete it, bro?
@@HONOREDONE-hk7pt it will take me another 5 days to complete
👏👏👏
👑👑
👑👍
Next.js not running background while is I get errors
Make a React project with Context Api For better understanding
yes
What's happening, People came on YT, make lengthy video building xyz clone. Build their audience on discord, launch their paid courses, then suddenly make the code repos private. This is livelihood.
Bloody 😂
What happen if you are not the owner of the job portal? Let's say you want to apply for Job, will the delete and edit button still show?
No, of course not. It shows only for company admins
Thank you for this amazing tutorial. For deployment, can we use Vercel?
Yes
thank you david! don’t know what to say but thank you!
I am glad to head you liked it!
Can you please make a video for single sign on, like centralised authentication website using next-auth, without any workos or any paid library for multiple saas website
Yeah I would love that too
Thank you
I'm learning React from a month Didn't know anything about next js or tailwind Can I watch this video and learn? Is this a beginner friendly video??
Yes it is beginner friendly! You gonna love because Next.js is a fullstack react.js framework
I just subscribed, The way you explain is amazing and also your ui design is amazing, please can you make a project using mern stack with shadcn/ui ?
Awsome 👍
thanks dawid sir ! Can u make a saas app for nextjs
Which code editor are you using?
webstorm
@@CodingWithDawid thank you for anwser
Do we need to pay for any of the services that you have used here
No, all of the services i used are for free or have a free tier 😎
Thank you very much... Please can you help with tutorial on web 3.0(block chain) development. Node j.s for backend and react for front?
Thanks, Dawid, your projects are just awesome, but could you create something more real-time?
Check my trello clone, or chat app. Also, if you have any ideas for a project you want to see on my channel - just let me know
If i want to run this project on my machine, what'd i have to do, please provide a .env file in in the source code in which we can just enter our own keys.
Awesome bruda.. Can we go for more complex one next time❤
thanks, this project is very helpful
Great.
Great tutorial, well structured and clean explained 👍thanks, Bro
How to use marker and selection using mouse cursor like you is there any tool?
That is a Saas??
Great hero' s back
run in to a bit of a problem my app directory has no api folder, anyone able to tell me whats going on and how to fix it?
Amazing project and big thanks Sir
please can you add somthing liike canva image editor or video editor with fabric js?