- Видео 33
- Просмотров 330 438
Time To Program
Индия
Добавлен 17 сен 2023
Welcome to TimeToProgram! Dive into web development with us as we explore HTML, CSS, JavaScript, and React JS. Join our community for tutorials, tips, and coding insights to elevate your skills.
Visit our blog for more info: timetoprogram.com
Follow us:
Facebook: TimetoProgram/
Twitter: TimetoProgram/
Pinterest: pinterest.com/TimeToProgram/
Subscribe to our RUclips channel for more updates.
Visit our blog for more info: timetoprogram.com
Follow us:
Facebook: TimetoProgram/
Twitter: TimetoProgram/
Pinterest: pinterest.com/TimeToProgram/
Subscribe to our RUclips channel for more updates.
Full Stack Travel Story App Using MERN Stack | MongoDB, Express, React, Node.js | MERN Project
In this video, we will build a Full Stack Travel Story App using the MERN stack (MongoDB, Express, React, Node.js). This app allows users to sign up, log in, and create personal travel stories with features like image uploads, and adding travel date. We also implement search functionality to find stories, filter by date range, and pin favorite stories to the top. Users can also edit or delete their stories..
The backend features secure JWT authentication, MongoDB for storing user data and travel stories, and APIs for adding, editing, deleting stories, and uploading images. This tutorial covers the entire development process, from setting up the frontend and backend to integrating APIs and...
The backend features secure JWT authentication, MongoDB for storing user data and travel stories, and APIs for adding, editing, deleting stories, and uploading images. This tutorial covers the entire development process, from setting up the frontend and backend to integrating APIs and...
Просмотров: 26 878
Видео
Responsive Portfolio Website Using React JS and Tailwind CSS | Portfolio Website in React.Js
Просмотров 5 тыс.5 месяцев назад
In this video, we will learn how to build a responsive portfolio website using React JS and Tailwind CSS. The website will include a navbar, hero section, skills section, work experience section, about me section, contact section, and a minimal footer. Get Source Code: buymeacoffee.com/timetoprogram/e/267577 🕚 Timestamps: 00:00 Demo: Responsive Portfolio Website 01:49 Project Setup 05:31 Tailwi...
Build a Full Stack Notes App using MERN | MongoDB, Express, React JS, Node JS
Просмотров 99 тыс.8 месяцев назад
In this video, we will build a Full Stack Notes App using MERN (MongoDB, Express, React JS, Node JS). Our Notes App contains functionalities like Authentication (Login & Sign Up), Adding/Edit Notes, Pin important notes to the top, and searching through the notes. Get Source Code: www.buymeacoffee.com/timetoprogram/e/242757 🕚 Timestamps: Frontend React Project Setup 00:00 Demo of Notes App 03:12...
Build a Responsive Website Using React JS & Tailwind CSS | Beginner React JS Project
Просмотров 6 тыс.10 месяцев назад
In this video, we will build a responsive website using React JS and Tailwind CSS. The website we are going to build in this tutorial is a construction landing page website. The website will consist of a navbar, hero section, stats section, services section, our work section, testimonials section, call to action section and a minimal footer. Get Source Code: www.buymeacoffee.com/timetoprogram/e...
Creating Animated Expandable Card Using Framer Motion and React JS
Просмотров 1,6 тыс.11 месяцев назад
In this video,In this video, we will learn how to create an animated expandable card using framer motion and React JS. When animated expandable card component is clicked we will reveals additional content smoothly including an image and description. Support me with a donation: www.buymeacoffee.com/timetoprogram Get source code from our website: timetoprogram.com 🕚 Timestamps: 00:00 Demo of Anim...
How to Upload File With Progress Bar in React JS
Просмотров 15 тыс.11 месяцев назад
In this video, we will learn how to upload a file with a progress bar in React JS. We will covered setting up the file upload component, handling file selection, displaying file information, and implementing the upload functionality. Support me with a donation: www.buymeacoffee.com/timetoprogram Get source code from our website: timetoprogram.com 🕚 Timestamps: 00:00 Demo of Uploading File With ...
Build a Responsive Portfolio Website Using React JS | Portfolio Website in React
Просмотров 119 тыс.11 месяцев назад
In this video, we will learn how to build a responsive portfolio website using React JS. The portfolio website we build in this tutorial will consist of a navbar, hero section, skills or technical proficiency section, work experience section, contact section, and a simple footer. Get Source Code: www.buymeacoffee.com/timetoprogram/e/197167 🕚 Timestamps: 00:00 Demo Responsive Portfolio Website 0...
How To Create a Custom Tooltip Component in React JS
Просмотров 2,6 тыс.11 месяцев назад
In this video, we will learn how to create a custom tooltip component from scratch in React JS, building a custom animated tooltip component in React #react #reactjs #reactjstutorial Get source code from our website: timetoprogram.com 🕚 Timestamps: 00:00 Demo of Custom Tooltip Component in React 00:10 Project setup 00:56 Creating Tooltip component 01:38 Using Tooltip component in App.jsx 02:27 ...
How To Create a Custom Reusable Modal Component in React JS
Просмотров 76711 месяцев назад
In this video, we will learn how to create a custom reusable modal component from scratch in React JS, building a modal component in React #react #reactjs #reactjstutorial Get source code from our website: timetoprogram.com Also, check out: How To Create Custom File Input Component in React ruclips.net/video/F3W_lZzzA3c/видео.html Creating Increment Decrement Counter Button in React ruclips.net...
How To Create Custom File Input Component in React JS
Просмотров 2,4 тыс.Год назад
In this video, we will implement a simple custom file input component in React JS, open the file input on the button click in React #react #reactjs #reactjstutorial Get source code from our website: timetoprogram.com Also, check out: Creating Increment Decrement Counter Button in React ruclips.net/video/s8qMfDPGKxo/видео.html Create Dark Mode Toggle Switch in HTML CSS ruclips.net/video/L0YlJ5KX...
Creating Increment Decrement Counter Button in React | Quantity Selector Button in React
Просмотров 1,5 тыс.Год назад
Learn how to create Increment Decrement Counter Button in React JS, create a quantity selector button in React #react #reactjs #reactjstutorial Get source code from our website: timetoprogram.com Also, check out: Create Dark Mode Toggle Switch in HTML CSS ruclips.net/video/L0YlJ5KXWqo/видео.html How To Create a Custom Accordion in React JS ruclips.net/video/uQj51j5Jb-w/видео.html Create a Simpl...
How To Create Dark Mode Toggle Switch in HTML CSS
Просмотров 1,7 тыс.Год назад
Learn how to create a custom dark mode toggle switch in HTML CSS, create a dark/light mode toggle switch button using HTML and CSS #htmlcsstutorial #javascript #css Support me with a donation: www.buymeacoffee.com/timetoprogram Get source code from our website: timetoprogram.com Also, check out: How To Create a Custom Accordion in React JS ruclips.net/video/uQj51j5Jb-w/видео.html Create a Simpl...
How To Create a Custom Accordion in React JS
Просмотров 561Год назад
Learn how to create a custom accordion in React JS, add a dynamic accordion in React JS #react #reactjs #reactjstutorial Get source code from our website: timetoprogram.com Also, check out: How To Create Price Range Slider Using HTML ruclips.net/video/VQGDBbxDAYA/видео.html How to Create a Horizontal Scrolling Component with Buttons in React ruclips.net/video/1kVZEhg3Q_c/видео.html How To Gener...
How To Create Price Range Slider Using HTML, CSS and JavaScript
Просмотров 1,4 тыс.Год назад
Learn how to create price range slider using HTML, CSS and JavaScript, Creating range slider in html css #htmlcsstutorial #javascript #css Get source code from our website: timetoprogram.com Also, check out: Create Simple Image Carousel in HTML CSS and JavaScript ruclips.net/video/T5eV6cNzzsU/видео.html How To Create Dynamic Input Fields in React ruclips.net/video/zZwprisnz6o/видео.html How to ...
How To Create Simple Image Carousel in HTML CSS and JavaScript
Просмотров 968Год назад
Learn how to create a simple image carousel in HTML CSS and JavaScript, an image slider using HTML, CSS, and Javascript #htmlcsstutorial #javascript #css Get source code from our website: timetoprogram.com Also, check out: How To Create Dynamic Input Fields in React ruclips.net/video/zZwprisnz6o/видео.html How to Create a Horizontal Scrolling Component with Buttons in React ruclips.net/video/1k...
How To Create Dynamic Input Fields in React
Просмотров 2 тыс.Год назад
How To Create Dynamic Input Fields in React
How to Create a Horizontal Scrolling Component with Buttons in React
Просмотров 7 тыс.Год назад
How to Create a Horizontal Scrolling Component with Buttons in React
How To Generate Random Password in React JS
Просмотров 418Год назад
How To Generate Random Password in React JS
How To Build Simple Audio Player in React JS | Music Player in React
Просмотров 2,4 тыс.Год назад
How To Build Simple Audio Player in React JS | Music Player in React
How to Create Image Magnifier in React JS
Просмотров 3,5 тыс.Год назад
How to Create Image Magnifier in React JS
How To Search Filter Array of Objects in React JS
Просмотров 624Год назад
How To Search Filter Array of Objects in React JS
How to Validate File Type in React JS | Check File Type in React
Просмотров 895Год назад
How to Validate File Type in React JS | Check File Type in React
How To Check Password Strength in React JS
Просмотров 558Год назад
How To Check Password Strength in React JS
How To Create Checkbox List in React JS
Просмотров 904Год назад
How To Create Checkbox List in React JS
How To Create Horizontal Drag and Drop List in React JS
Просмотров 848Год назад
How To Create Horizontal Drag and Drop List in React JS
How To Create a Simple Like Dislike Button in React JS
Просмотров 1 тыс.Год назад
How To Create a Simple Like Dislike Button in React JS
How to Convert CSV File Data to JSON in React JS
Просмотров 989Год назад
How to Convert CSV File Data to JSON in React JS
How to Create Image Zoom In/Out Component in React JS
Просмотров 3,9 тыс.Год назад
How to Create Image Zoom In/Out Component in React JS
Password And Confirm Password Validation in React JS
Просмотров 5 тыс.Год назад
Password And Confirm Password Validation in React JS
How To Crop Image Before Upload in React JS
Просмотров 7 тыс.Год назад
How To Crop Image Before Upload in React JS
Please show how to deploy this website on vercel or any other platform
Need svg files / assest that you have used in this project
Thanks you so much
Is it responsive
Why you are not using bootstrap 5 for navbar, used navbar css.
Hello sir! How some one can enter in contact with pls?
Thank you so much sir, i have completed this project within 5 days
The success message isn’t working on my side.
Great content!
Thank you, it is very helpful
Github link 🥲
1:27:16 where to get accessToken
It's generated when you login. Use the previously created /login and the access token will be in the server response object.
how can deploy this ?
Is it just me or is anyone getting an error while connecting to MongoDB
friendly for beginner:)
how to get access_token_secret code??
add voice
great tutorials. Can you make a tutorial with tables? like a Point of sales.
great video really healpful, how can i magnify even closer?
Hi can I get the assets file??
where get access_token_secret
How to get source code
2:25:02
can anyone share the data.js source code with images please
Make a home page for it bro
finally !after so many days i have completed the project. thankyou! <3
plss give me source code
Thank you! Project Completed.
pls give me sourcew coodee :(
Unpinning the notes** const updateIsPinned = async (noteData) => { const noteId = noteData._id; const currentPinStatus = noteData.isPinned; try { const response = await axiosInstance.put("/update-ispinned/" + noteId, { isPinned: !currentPinStatus, }); if (response.data && response.data.note) { getAllNotes(); } } catch (error) { console.log(error); } };
When testing in Postman, use req.user.user due to an extra layer added by JWT structure. With frontend integration, it simplifies to req.user. The access token itself is simply a random string of characters. You can add anything in access token string
means in token authentication secret we can add any random string? in this project
2:31:32
bro do you use google pay
I want source code but i can only pay using google pay.
Hello..Can u provide assets for this project?
This is awsome!
1:28:24
Hi. First of all, I want to thank you for your work <3 I have a question: at the moment of intergration login api (somewhere 1:55:00), you don't pass it to the getUserInfo function (component Home.jsx) header with authorization What I mean: const getUserInfo = async () => { try { const response = await axiosInstance.get("/get-user", { headers: { Authorization: `Bearer ${localStorage.getItem("token")}`, }, }); //.... } Unfortunately, I get an unauthorized 401 error without the header. Everything works correctly when adding the header. but I don't see that you added it and everything works. what the problem might be?
resolved :) I had a mistake onfrontend/notes-app/src/utils/axiosInstance.js
hi, i want to buy source code from india, can i pay you through google pay?
Where can I find the images
how to geet the access token secret for env file ?
bro did not connect the nav links in their particular section 🥲🥲😂😂😂😂
Where to findth the source code of it ? Please response anyone
Login error Please enter Email! Failed to load resource: the server responded with a status of 400 (Bad Request)
bro you the greatest
Please explain at 1:06:25 how do you find that Access_Token_Secret? and what is mean by that?
did you find the answer
@@shubhamrathod9249 yes... it is no specific thing. It can be any thing. Even your name. But better it be unpredictable and strong. Cus it is for secure and effective authentication.
you can type anything your name also. it is just a way to encode the token by using Access_Token_Secret.
This is an environment variable programmers prefer to write secret_keys in environment instead of hard coding it @@shubhamrathod9249
need help for deploying the website. Someone please tell me step by step process.
Great content ❤
atleast please add images in the description
its very simple app brother try something unique.
Thank you for doing these videos. They helped me a lot with my fullstack journey. 💌
Where can I take those pictures?
Thank you sir 😊
Hi can you share the assets file?