- Видео 44
- Просмотров 27 174
Dev Lawrence
Добавлен 11 дек 2023
What's up, guys! I'm Dev Lawrence, a freelance web developer with over 4 years of hands-on experience in the field. Welcome to my channel, my second brain, where I share everything I've learned (and am still learning!) in web development. Whether you're new to coding or looking to deepen your skills, this channel is here to help.
You'll find weekly videos on tutorials, real-world projects, Indie hacking adventures (like building SaaS apps or templates), and plenty of web dev insights to keep you inspired and growing. I believe in making learning engaging, practical, and down-to-earth. So, if you're ready to dive into the world of web development, hit subscribe, and let's build something awesome together 😉!
You'll find weekly videos on tutorials, real-world projects, Indie hacking adventures (like building SaaS apps or templates), and plenty of web dev insights to keep you inspired and growing. I believe in making learning engaging, practical, and down-to-earth. So, if you're ready to dive into the world of web development, hit subscribe, and let's build something awesome together 😉!
I Made My Portfolio Template EVEN BETTER (And It's FREE!)
What's up guys, so in this video, I will be showing you the update that I have made to my portfolio template.
Here is the link to the Website 👇🏼
portfoliokit.netlify.app/
Here is the Telegram link 👇🏼
t.me/+jz1ungK-s6Q2ZmE0
---
Website: devlawrence.netlify.app/
Blog: dev.to/devlawrence
Github: github.com/dev-lawrence
---
🌎 Follow me on social media
Twitter: Lawrence_sticks
LinkedIn: www.linkedin.com/in/lawrence-amrasakpare/
Instagram: dev_lawrence1
---
💼 Business Inquiries:
E-mail: lawrenceamrasakpare19@gmail.com
#html #css #frontend #typescript #netlify #githubactions #github #webdevelopment #javascript #CodingTips #howto #landingpage #herosection #design
Here is the link to the Website 👇🏼
portfoliokit.netlify.app/
Here is the Telegram link 👇🏼
t.me/+jz1ungK-s6Q2ZmE0
---
Website: devlawrence.netlify.app/
Blog: dev.to/devlawrence
Github: github.com/dev-lawrence
---
🌎 Follow me on social media
Twitter: Lawrence_sticks
LinkedIn: www.linkedin.com/in/lawrence-amrasakpare/
Instagram: dev_lawrence1
---
💼 Business Inquiries:
E-mail: lawrenceamrasakpare19@gmail.com
#html #css #frontend #typescript #netlify #githubactions #github #webdevelopment #javascript #CodingTips #howto #landingpage #herosection #design
Просмотров: 134
Видео
Build and Deploy a Responsive Portfolio Website with Astro
Просмотров 151День назад
What’s up guys, In today’s video, we are going to be building and deploying this portfolio website using Astro. Source Code: github.com/dev-lawrence/portfolio-website-yt Figma Link: www.figma.com/community/file/1316473715005604240/free-portfolio-landing-page-website ❤️ Support the channel & Suggest Future Videos: selar.co/showlove/devlawrence Timestamps: 0:00 - Intro 2:55 - Astro overview 4:48 ...
Here Is How I'm Adding Rate Limiting To My NextJs App
Просмотров 31614 дней назад
Whatsup guys, So in today's video, I'm going to show you how to implement Rate limiting to your nextjs project using a real world application. How Rate Limit Works 👇🏼 ruclips.net/video/8-B0aZA7RpU/видео.htmlsi=q7eyTjqwtjZWlrXG 🔗 Useful Links Website: devlawrence.netlify.app/ Blog: dev.to/devlawrence Github: github.com/dev-lawrence 🌎 Follow me on social media Twitter: Lawrence_sticks...
How to Protect your API | Rate Limiting (2024)
Просмотров 23221 день назад
What's up, guys! In this video, I'm going to show you how to add rate limiting to your API. This is crucial if you're building production apps and want to prevent users from racking up unnecessary bills due to abuse of your application. I have also written an article about it. Link will be in the description below. Link to article 👇🏼 dev.to/devlawrence/the-basics-of-rate-limiting-how-it-works-a...
Here is How to Simplify Data Fetching with a Custom Hook
Просмотров 76Месяц назад
Whatsup guys, so in today’s video, I’m going to show you how you can simplify data fetching in your react projects using a custom React Query hook. 🔗 Useful Links Website: devlawrence.netlify.app/ Blog: dev.to/devlawrence Github: github.com/dev-lawrence 🌎 Follow me on social media Twitter: Lawrence_sticks LinkedIn: www.linkedin.com/in/lawrence-amrasakpare/ Instagram: d...
I Built A Portfolio Template That Actually Makes Sense!
Просмотров 74Месяц назад
Whatsup guys! so in this video, I will be talking about something I've been working on for the past couples of weeks - well, it’s my very first portfolio template that built with Astro(for speed) and Sanity(manage your content) and I am now taking this to be my first product online. 🚀 Join my telegram channel for updates ➡️ t.me/ jz1ungK-s6Q2ZmE0 Timestamps: 0:00 - Intro 0:32 - Overview of the ...
How to Build an Airbnb-Style Image Carousel with React & TypeScript
Просмотров 290Месяц назад
What's up, guys? In this video, we’ll build an Airbnb-style image carousel using React, TypeScript, and an awesome library called React Splide! By the end of this video, you'll know exactly how to implement a sleek, professional-looking image carousel that’s perfect for showcasing photos in apps just like Airbnb does. Source Code: github.com/dev-lawrence/airbnb-slider 🔗 Useful Links Website: de...
Build a Responsive Product Preview Card with HTML and CSS
Просмотров 132Месяц назад
Whatsup guys, so in this video we are going to be building this preview card component challenge from frontend mentor with html and CSS. Source Code: github.com/dev-lawrence/product-preview-card-component Frontendmentor challenge: www.frontendmentor.io/challenges/product-preview-card-component-GO7UmttRfa Website: devlawrence.netlify.app/ Blog: dev.to/devlawrence Github: github.com/dev-lawrence ...
How to allow users download different files from your website
Просмотров 48Месяц назад
Whatsup guys, So in today's video, I’m going to show you how to allow users to download different types of files from your website. Whether it’s an APK, image, PDF, or a ZIP file, we’ll go over everything step by step. Dropbox Link www.dropbox.com/referrals/AAC9RVYC9G3OJw5keOtIvQsYd0bd9QCzVX4?src=global9 🔗 Useful Links Website: devlawrence.netlify.app/ Blog: dev.to/devlawrence Github: github.co...
Build an E-commerce Product Listing Page: React, TypeScript, Tailwind & Stripe
Просмотров 2,4 тыс.2 месяца назад
Whatsup guys, In this video you are going to learn how to build out this product listing page challenge from frontend mentor using react, typescript and tailwind css, and we also going to take it a step further by also implementing stripe payments using netlify serverless function. ❤️ Support the channel & Suggest Future Videos: selar.co/showlove/devlawrence Source code github.com/dev-lawrence/...
Here is How to Upload an Image to Sanity CMS
Просмотров 1602 месяца назад
Whatsup guys, so in this video we’re going to learn how to implement an image upload to your sanity studio. How to make a Post Request to sanity ruclips.net/video/9y7P_C1QaFA/видео.htmlsi=eGOjBxXnx2q-JrWS 🔗 Useful Links Website: devlawrence.netlify.app/ Blog: dev.to/devlawrence Github: github.com/dev-lawrence 🌎 Follow me on social media Twitter: Lawrence_sticks LinkedIn: www.linkedi...
How to Make a POST Request to Sanity CMS
Просмотров 2072 месяца назад
Whatsup guys, So in today's video, you'll learn how to send data to your sanity CMS with the help of Astro. How to Integrate sanity with Astro ruclips.net/video/Lnp2Vz4aypw/видео.htmlsi=92ilGc6ECqJMFVg4 🔗 Useful Links Website: devlawrence.netlify.app/ Blog: dev.to/devlawrence Github: github.com/dev-lawrence 🌎 Follow me on social media Twitter: Lawrence_sticks LinkedIn: www.linkedin....
Here is How to integrate Sanity with Astro in 10 minutes
Просмотров 5032 месяца назад
Whatsup guys, So in this video you will learn how to Integrate sanity with Astro in 10 minutes. Link to the article www.sanity.io/plugins/sanity-astro Website: devlawrence.netlify.app/ Blog: dev.to/devlawrence Github: github.com/dev-lawrence 🌎 Follow me on social media Twitter: Lawrence_sticks LinkedIn: www.linkedin.com/in/lawrence-amrasakpare/ Instagram: dev_lawrence1...
How to add Comments to your Blog Website with Sanity and Astro
Просмотров 1452 месяца назад
Whatsup guys, So in today's video, you'll how to add comments to your blog website using astro and sanity. First video: ruclips.net/video/LKxIv20UPfY/видео.htmlsi=pdUbWCcaOr4moyeA Source code for the comment branch github.com/dev-lawrence/astro-blog-yt/tree/comment Timestamps: 0:00 - Intro 1:24 - Create the comment schema 6:03 - Create the comment form 19:08 - Send data to api route 21:39 - Cre...
Here is how I Bypass TypeScript Errors during Deployment
Просмотров 1303 месяца назад
Whatsup guys, so in this video you'll learn how to ignore typescript when pushing to production for faster build and faster dev experience. Timestamps: 0:00 - Intro 1:42 - Overview of the project 3:51 - Creating a new branch 4:30 - Add check command 5:45 - Github actions 16:00 - Outro Website: devlawrence.netlify.app/ Blog: dev.to/devlawrence Github: github.com/dev-lawrence 🌎 Follow me on socia...
Here is the right way to add Pagination in Astro.
Просмотров 2543 месяца назад
Here is the right way to add Pagination in Astro.
How to Build a Responsive URL Shortener with React | Frontend Mentor Challenge
Просмотров 9953 месяца назад
How to Build a Responsive URL Shortener with React | Frontend Mentor Challenge
How to Build a Services Section | Astro
Просмотров 483 месяца назад
How to Build a Services Section | Astro
How to Add Pagination to your Astro Project
Просмотров 1833 месяца назад
How to Add Pagination to your Astro Project
Build an Article Preview Component | HTML, CSS, JavaScript | Frontend Mentor
Просмотров 2604 месяца назад
Build an Article Preview Component | HTML, CSS, JavaScript | Frontend Mentor
Build and Deploy a Responsive Blog Website with Astro and Sanity
Просмотров 3,3 тыс.4 месяца назад
Build and Deploy a Responsive Blog Website with Astro and Sanity
How to Build a Responsive Stats preview card component | Frontend Mentor
Просмотров 2394 месяца назад
How to Build a Responsive Stats preview card component | Frontend Mentor
Build and Deploy a Responsive Professional Landing Page Using Astro & Tailwind CSS | Frontend Mentor
Просмотров 2,2 тыс.4 месяца назад
Build and Deploy a Responsive Professional Landing Page Using Astro & Tailwind CSS | Frontend Mentor
Build a Responsive timeline Component in React
Просмотров 2405 месяцев назад
Build a Responsive timeline Component in React
Adding a maintenance page to your React app is easier than you’d think.
Просмотров 4255 месяцев назад
Adding a maintenance page to your React app is easier than you’d think.
Here is how to Deploy your React app on Github pages with Vite.
Просмотров 4725 месяцев назад
Here is how to Deploy your React app on Github pages with Vite.
Here are two ways I Integrate Videos on my Next.js Project
Просмотров 1375 месяцев назад
Here are two ways I Integrate Videos on my Next.js Project
Here Are 3 Ways I Deploy My Projects on Netlify
Просмотров 1005 месяцев назад
Here Are 3 Ways I Deploy My Projects on Netlify
Build a Countdown Timer from Scratch with HTML, CSS, and JavaScript | Frontend Mentor
Просмотров 2806 месяцев назад
Build a Countdown Timer from Scratch with HTML, CSS, and JavaScript | Frontend Mentor
You Won't Believe How Fast Next.js Development Can Be!
Просмотров 8586 месяцев назад
You Won't Believe How Fast Next.js Development Can Be!
Your voice is inaudible, speak louder in your next video
I'm a visual learner, I had to downgrade from NextJS to React, I learned that was a whole lot of new pain, thank you for making this because you really helped a lot! Considering Next is an SSR, the setup was way too easy like plug and play, React on the other hand is a true pain.
You're welcome. I'm glad you found it helpful.
nextjs project means fe focus only?
This was beautiful. Try dey blur sensitive info like name and email, when editing. Also, work on payments, like how to connect apps with say, the lightning network. Libraries like LDK et al exist. Check it out and good luck
Not even working in astro and this has all the info I have been searching tirelessly for. Could you drop a link to the sanity docs page where you got the API info
here it is www.sanity.io/docs/http-mutations
🚀 Join my telegram channel for updates ➡ t.me/+jz1ungK-s6Q2ZmE0
📢 Update: The --turbo flag is now officially released in Next.js 15!
Great job. Please continue to bring more videos like this. I'd love to see more astro videos from this channel.
thanks man. i'll try my best
what plugins that you are using on Visual Studio ?
plugins for what exactly?
I love your tutorials, it’s so easy to understand how it works. Can you please make a full stack food delivery using nextjs with clerk and stripe without tailwind?
I'm glad you liked them. I try to make one if I have the chance to.
Moore Jennifer Johnson Thomas Martin Margaret
Excellent 👌, thank you very much!
Glad I could help
bri your docs links not showing me any page giving error please do something and please also deploy it as well
the docs pages are working fine. maybe it's a network issue. and i also deployed it too if you watched to the end 3:09:28
@@DevLawrence1 no sir when I open it with my phone and even withlaptop after it gives error
This is nice, but the main problem of this kind of content is no one shows you how they design before they implement, and 90% of them are just memorizing the implementation ( general not specifying anyone).
Yea you're kinda right...but some people just want to save your time by implementing the design and sometimes they get the design somewhere else and just show you how to implement it 🤷
BTW this reply is from my other account 😂
@@lawrencestixx2394 oh, actually this is a good point
Lopez Sharon Perez Betty Wilson Thomas
Amazing video and thanks for sharing your repo, keep it up
Thanks man
Good content bro, how far i fit hit you up ?
thanks man. yea you can.
I really needed this men, which extension are you using for the autocomplete and why didn't you use the form from mailchimp?
i'm using tabnine and I just decided to create an actual form since I am working with their API
@@DevLawrence1 thank you soo much man
Well explained!!
Glad you liked it!
cool man!
I've reached 1:47:03, but for some reason I'm getting a blank page when I go to localhost:4321/admin I have added output: 'server' to the config file
Next video influencer hiring SaaS project
Hi Everyone! Thanks Lawrence for this tutorial. How you're storing the data on sign in. By following your code our data is stored on sign up and this logic is basically for sign up.
it works for both cases. if a users signs up the first time, the data gets saved to the database and if they try to login again the data does not get saved because it has already be stored on the database
Powerful 🚀
Thanks man
exactly what i was looking for ...thank you so much
You're welcome
Thank you broo
you are welcome man
@@DevLawrence1 I am creating a project in react for myself, in that project i need to create a services section in which I will show my services like(SEO, Designing, Website-performance-testing) can you please help me to create that section look good and nice.
@@tahayasir-tv6zf just to be clear, are you asking if I should do a video on it?
@@DevLawrence1 It's your own choice man.
Thanks, but do you have any examples of doing this on a live deployment rather than local? I'm using vercel and struggling to get it working live
I really don't have. but you should use vercel serverless function and just import the .env files and it should work.
Thanks man.
You are welcome man
Please I can't connect to clerk, is the website down?
not it's not. it's your isp. just try using a vpn like cloudfare warp
Thumbs up
Thank you
Stable or beta 😢
Lol...Beta for now...but it works very fine though
hey, how to redirect user to a specific route after signin or signup ?
You are awesome 👑👑
Also can we style it using css ? I want to make the userbutton to be a little larger please help
yea you can style it
@@DevLawrence1 how ? can you show how to make the UserButton larger ?
is it necessary to use vite ?
No it's not necessary...there are other build tools to use.
@@DevLawrence1 ERROR in ./node_modules/next/dist/compiled/gzip-size/index.js 184:18-31 Module not found: Error: Can't resolve 'fs' in 'C:\Users\parak\Desktop\Projects\Brogrammers 2.0\frontend ode_modules ext\dist\compiled\gzip-size'
hey, is there anything it returns after signup ? I need to save that user in my backend aswell.. so that I can refernce other db models.
@@ExpoDev_Dash it just takes you back to the home page..You can watch the next video for you to do that ruclips.net/video/c06fJp2-hpo/видео.html
Why the redirectUrl is not working? :(
does it work ?
hey if am using app(express.json()) then its saying no matching signature why ???
it's because there is already a bodyParser.raw({ type: 'application/json' }) middleware to parse the data that is being sent to server. so adding express.json() will cause a mismatch. so you just have to use only one.
@@DevLawrence1 oh yeah I figured it out last night, actually I didn't wanted to use bodyparser.raw() instead of express.json() and I found that svix uses raw request body to verify in their docs so using express.json() will not work rather I found - app.use( express.json({ verify: (req, res, buf) => { req.rawBody = buf.toString(); }, })); should work just fine!!!
Promo'SM 🤣
Hello Lawrence, I wanted to express my gratitude once again for providing such an insightful tutorial. It's incredibly helpful for us in ensuring that we apply the correct protocol for syncing our database with Clerk. Your guidance makes the process much easier to understand and implement effectively. Thank you for sharing your expertise with us.
You're very welcome!
Thank you Lawrence.
you are welcome
Getting a 404 Not Found error while making POST /api/webhooks request. What could be the possible reason? Anyone?
Incorrect URL: Double-check the URL you're using for the POST request (/api/webhooks). Ensure that it matches the route defined in your Express application. Server Configuration: Make sure that your Express server is properly configured to handle POST requests to the /api/webhooks route. Verify that the route is defined and that there are no typos or mistakes in the route definition. Middleware Ordering: Check the ordering of your middleware. Ensure that the bodyParser middleware for parsing JSON is applied before the route handler for the /api/webhooks route. Middleware ordering matters in Express. Route Handler Implementation: Verify that the route handler for the /api/webhooks route is correctly implemented. Ensure that it is actually capable of handling POST requests and responding appropriately. Path Mismatch: Ensure that the path specified in your client-side code matches the path defined in your server-side code. Even minor differences, such as trailing slashes, can cause a 404 error. Server Deployment: If you're deploying your server to a hosting service, ensure that the deployment was successful and that the server is running correctly. Check the server logs for any errors or warnings that might indicate why the route is not being found.
if I can get the user details by just req.body . so why do I need to create webhook constructor and verify payloadString to svix.....?
Yea you can also do that but using the webhook verification with Svix adds an essential layer of security, and authentication to your application, which is crucial for protecting your data and ensuring the reliability of your webhook integration. Plus it is what is recommended by the clerk team if you read the docs.
every time i shut down computer ngrok lost all its data. and when i restart it gives new domain. how to persist same url?
yea that is how ngrok works you can't persist the same url. You just need to use a backend service like cyclic to store your api
what about user.uptaded and deleted?
Hello Valeh, you can just put a an extra condition and check for the event type. Something like this: if (event.type === "user.created") { await createAndSaveNewUser(eventData); } else if (event.type === "user.updated") { await updateUser(eventData); } Hope it helps. Take care.
where to get type WebhookEvent (for TypeScript File)
bro do i need to set anything on the svix website?, like to create an account and stuff
No..you just have to install the package
Promo'SM 🔥
thankyou
You're welcome!