- 42
- 24 973
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 😉!
Here Is How I'm Adding Rate Limit To My NextJs App
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 👇🏼
th-cam.com/video/8-B0aZA7RpU/w-d-xo.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
LinkedIn: www.linkedin.com/in/lawrence-amrasakpare/
Instagram: dev_lawrence1
---
💼 Need a custom website for your business? I'm available for freelance projects 👇🏼
E-mail: lawrenceamrasakpare19@gmail.com
#react #css #WebDevelopment #ratelimit #netlify #localstorage #deployment #html #CodingTips #howto #serverless #sanity #payment #stripe
How Rate Limit Works 👇🏼
th-cam.com/video/8-B0aZA7RpU/w-d-xo.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
LinkedIn: www.linkedin.com/in/lawrence-amrasakpare/
Instagram: dev_lawrence1
---
💼 Need a custom website for your business? I'm available for freelance projects 👇🏼
E-mail: lawrenceamrasakpare19@gmail.com
#react #css #WebDevelopment #ratelimit #netlify #localstorage #deployment #html #CodingTips #howto #serverless #sanity #payment #stripe
มุมมอง: 260
วีดีโอ
How to Protect your API | Rate Limiting (2024)
มุมมอง 200วันที่ผ่านมา
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
มุมมอง 7314 วันที่ผ่านมา
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!
มุมมอง 6621 วันที่ผ่านมา
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
มุมมอง 270หลายเดือนก่อน
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
มุมมอง 110หลายเดือนก่อน
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
มุมมอง 38หลายเดือนก่อน
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
มุมมอง 1.8Kหลายเดือนก่อน
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
มุมมอง 144หลายเดือนก่อน
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 th-cam.com/video/9y7P_C1QaFA/w-d-xo.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
มุมมอง 1822 หลายเดือนก่อน
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 th-cam.com/video/Lnp2Vz4aypw/w-d-xo.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
มุมมอง 4542 หลายเดือนก่อน
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
มุมมอง 1292 หลายเดือนก่อน
Whatsup guys, So in today's video, you'll how to add comments to your blog website using astro and sanity. First video: th-cam.com/video/LKxIv20UPfY/w-d-xo.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
มุมมอง 1212 หลายเดือนก่อน
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.
มุมมอง 2252 หลายเดือนก่อน
Whatsup guys. So I did a video a couple of weeks ago on how to add pagination to your astro project but the issue I had with it was that the data was not updating in time like I said in the video. So in this video, I want to show you a better approach. Link to the First video 👇🏼 th-cam.com/video/ZP2MN6q126I/w-d-xo.htmlsi=IeBevEqVu_L-Fh2V Website: devlawrence.netlify.app/ Blog: dev.to/devlawrenc...
How to Build a Responsive URL Shortener with React | Frontend Mentor Challenge
มุมมอง 9623 หลายเดือนก่อน
Whatsup guys, So in today's video, we're going to build and deploy a responsive URL shortening API landing page. This is a Frontend Mentor challenge, and I'll show you step-by-step how to create this project using React, vanilla CSS and Using the Many Apis to shorten the URL. Source code github.com/dev-lawrence/url-shortener-yt Manyapis manyapis.com/ Manyapis Docs docs.manyapis.com/#manyapis-co...
How to Build a Services Section | Astro
มุมมอง 463 หลายเดือนก่อน
How to Build a Services Section | Astro
How to Add Pagination to your Astro Project
มุมมอง 1673 หลายเดือนก่อน
How to Add Pagination to your Astro Project
Build an Article Preview Component | HTML, CSS, JavaScript | Frontend Mentor
มุมมอง 2263 หลายเดือนก่อน
Build an Article Preview Component | HTML, CSS, JavaScript | Frontend Mentor
Build and Deploy a Responsive Blog Website with Astro and Sanity
มุมมอง 3K4 หลายเดือนก่อน
Build and Deploy a Responsive Blog Website with Astro and Sanity
How to Build a Responsive Stats preview card component | Frontend Mentor
มุมมอง 2254 หลายเดือนก่อน
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.1K4 หลายเดือนก่อน
Build and Deploy a Responsive Professional Landing Page Using Astro & Tailwind CSS | Frontend Mentor
Build a Responsive timeline Component in React
มุมมอง 2204 หลายเดือนก่อน
Build a Responsive timeline Component in React
Adding a maintenance page to your React app is easier than you’d think.
มุมมอง 3844 หลายเดือนก่อน
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.
มุมมอง 4385 หลายเดือนก่อน
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
มุมมอง 1175 หลายเดือนก่อน
Here are two ways I Integrate Videos on my Next.js Project
Here Are 3 Ways I Deploy My Projects on Netlify
มุมมอง 965 หลายเดือนก่อน
Here Are 3 Ways I Deploy My Projects on Netlify
Build a Countdown Timer from Scratch with HTML, CSS, and JavaScript | Frontend Mentor
มุมมอง 2495 หลายเดือนก่อน
Build a Countdown Timer from Scratch with HTML, CSS, and JavaScript | Frontend Mentor
You Won't Believe How Fast Next.js Development Can Be!
มุมมอง 8275 หลายเดือนก่อน
You Won't Believe How Fast Next.js Development Can Be!
Here is how to Add an FAQ to your website with React | Frontend mentor
มุมมอง 956 หลายเดือนก่อน
Here is how to Add an FAQ to your website with React | Frontend mentor
How to fetch data from an API in React | Beginners Tutorial 2024 | Frontend Mentor
มุมมอง 1976 หลายเดือนก่อน
How to fetch data from an API in React | Beginners Tutorial 2024 | Frontend Mentor
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 th-cam.com/video/c06fJp2-hpo/w-d-xo.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!