Time To Program
Time To Program
  • 33
  • 354 297
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 building the UI components.
Get Source Code:
buymeacoffee.com/timetoprogram/e/304157
Frontend React Project Setup
00:00 - Demo of Travel Story App
04:50 - Frontend React app setup
08:41 - Tailwind CSS setup
11:33 - react-router-dom installation & setup
Backend
14:32 - Backend Node.js Express project setup
18:51 - MongoDB Atlas configuration
23:05 - Creating User schema
24:26 - Create Account API
31:10 - Login API
35:02 - Get User API and JWT token authentication
40:04 - Add Travel Story API
49:05 - Get All Travel Stories API
51:07 - Image Upload API using Multer
58:21 - Delete Image API
01:04:15 - Edit Travel Story API
01:09:53 - Delete Travel Story API
01:13:58 - Update isFavourite API
01:18:19 - Search Stories API
01:21:58 - Filter Stories by Date Range
Frontend
01:26:12 - Login screen UI
01:42:28 - Login API integration
01:54:14 - Sign-up screen UI
01:57:29 - Create Account API integration
02:01:57 - Home page UI
02:04:55 - Get User Info API integration
02:08:00 - Navbar Profile Card
02:14:20 - Get All Stories API integration
02:17:07 - Travel Story Card component
02:26:30 - Function to update isFavourite
02:34:14 - Add/Edit Travel Story
02:47:12 - Date Selector component
02:58:34 - Custom Image Picker component
03:22:10 - Function to add new Travel Story
03:24:34 - Utility function to upload image
03:31:43 - View Travel Story popup modal
03:45:11 - Function to update story
03:51:20 - Function to delete Travel Story image
03:58:37 - Function to delete story
04:09:54 - Search Bar component
04:14:05 - Search Stories API integration
04:17:59 - Date Range Picker component
04:21:31 - Filter Travel Stories by date range
04:25:35 - Filter Info Title component
Also, check out:
Responsive Portfolio Website Using React JS and Tailwind CSS
th-cam.com/video/TYWQFSNY7Hg/w-d-xo.html
Build a Responsive Website Using React
th-cam.com/video/3Qr6ahVXrj4/w-d-xo.html
#reactjs #mernstack #reactjstutorial #mernproject
Follow us on :
Instagram: timetoprogram
Facebook: TimetoProgram/​
Pinterest: pinterest.com/TimeToProgram/​
For more updates subscribe to your channel:
th-cam.com/channels/y6osK_bBJgvfeu8R1GGucw.html
Please Like | Share | Subscribe for more such videos.
Thank You.
มุมมอง: 35 120

วีดีโอ

Responsive Portfolio Website Using React JS and Tailwind CSS | Portfolio Website in React.Js
มุมมอง 5K6 หลายเดือนก่อน
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
มุมมอง 109K8 หลายเดือนก่อน
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
มุมมอง 6K11 หลายเดือนก่อน
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.7Kปีที่แล้ว
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
มุมมอง 15Kปีที่แล้ว
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
มุมมอง 122Kปีที่แล้ว
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.8Kปีที่แล้ว
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
มุมมอง 793ปีที่แล้ว
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 th-cam.com/video/F3W_lZzzA3c/w-d-xo.html Creating Increment Decrement Counter Button in React th-cam.com/...
How To Create Custom File Input Component in React JS
มุมมอง 2.5Kปีที่แล้ว
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 th-cam.com/video/s8qMfDPGKxo/w-d-xo.html Create Dark Mode Toggle Switch in HTML CSS th-cam.com/video/L0YlJ5KXW...
Creating Increment Decrement Counter Button in React | Quantity Selector Button in React
มุมมอง 1.6Kปีที่แล้ว
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 th-cam.com/video/L0YlJ5KXWqo/w-d-xo.html How To Create a Custom Accordion in React JS th-cam.com/video/uQj51j5Jb-w/w-d-xo.html Create a Simpl...
How To Create Dark Mode Toggle Switch in HTML CSS
มุมมอง 1.7Kปีที่แล้ว
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 th-cam.com/video/uQj51j5Jb-w/w-d-xo.html Create a Simpl...
How To Create a Custom Accordion in React JS
มุมมอง 581ปีที่แล้ว
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 th-cam.com/video/VQGDBbxDAYA/w-d-xo.html How to Create a Horizontal Scrolling Component with Buttons in React th-cam.com/video/1kVZEhg3Q_c/w-d-xo.html How To Gener...
How To Create Price Range Slider Using HTML, CSS and JavaScript
มุมมอง 1.5Kปีที่แล้ว
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 th-cam.com/video/T5eV6cNzzsU/w-d-xo.html How To Create Dynamic Input Fields in React th-cam.com/video/zZwprisnz6o/w-d-xo.html How to ...
How To Create Simple Image Carousel in HTML CSS and JavaScript
มุมมอง 978ปีที่แล้ว
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 th-cam.com/video/zZwprisnz6o/w-d-xo.html How to Create a Horizontal Scrolling Component with Buttons in React th-cam.com/video/1kV...
How To Create Dynamic Input Fields in React
มุมมอง 2.1Kปีที่แล้ว
How To Create Dynamic Input Fields in React
How to Create a Horizontal Scrolling Component with Buttons in React
มุมมอง 7Kปีที่แล้ว
How to Create a Horizontal Scrolling Component with Buttons in React
How To Generate Random Password in React JS
มุมมอง 450ปีที่แล้ว
How To Generate Random Password in React JS
How To Build Simple Audio Player in React JS | Music Player in React
มุมมอง 2.6Kปีที่แล้ว
How To Build Simple Audio Player in React JS | Music Player in React
How to Create Image Magnifier in React JS
มุมมอง 3.7Kปีที่แล้ว
How to Create Image Magnifier in React JS
How To Search Filter Array of Objects in React JS
มุมมอง 648ปีที่แล้ว
How To Search Filter Array of Objects in React JS
How to Validate File Type in React JS | Check File Type in React
มุมมอง 912ปีที่แล้ว
How to Validate File Type in React JS | Check File Type in React
How To Check Password Strength in React JS
มุมมอง 586ปีที่แล้ว
How To Check Password Strength in React JS
How To Create Checkbox List in React JS
มุมมอง 1Kปีที่แล้ว
How To Create Checkbox List in React JS
How To Create Horizontal Drag and Drop List in React JS
มุมมอง 881ปีที่แล้ว
How To Create Horizontal Drag and Drop List in React JS
How To Create a Simple Like Dislike Button in React JS
มุมมอง 1.1Kปีที่แล้ว
How To Create a Simple Like Dislike Button in React JS
How to Convert CSV File Data to JSON in React JS
มุมมอง 1Kปีที่แล้ว
How to Convert CSV File Data to JSON in React JS
How to Create Image Zoom In/Out Component in React JS
มุมมอง 4.2Kปีที่แล้ว
How to Create Image Zoom In/Out Component in React JS
Password And Confirm Password Validation in React JS
มุมมอง 6Kปีที่แล้ว
Password And Confirm Password Validation in React JS
How To Crop Image Before Upload in React JS
มุมมอง 7Kปีที่แล้ว
How To Crop Image Before Upload in React JS

ความคิดเห็น

  • @nitinverma1421
    @nitinverma1421 วันที่ผ่านมา

    no use of these tutorial as there's no explanation , hard to follow

  • @shwetakukade3684
    @shwetakukade3684 10 วันที่ผ่านมา

    During the create acc in postman its show could not send request plz solve this problem

  • @insightsAtDawn
    @insightsAtDawn 15 วันที่ผ่านมา

    Day 1 : 07:53

  • @musicargenta5281
    @musicargenta5281 15 วันที่ผ่านมา

    Thank you very much for this great project, without a doubt very complete and I have learned many things along the way. All the best!

  • @sjstudio5380
    @sjstudio5380 16 วันที่ผ่านมา

    your code has slight problem ; if we further go on clicking it will set the state to more pixels but wont scroll further and then if we scroll back using button click we must bring the state variable value back to the maximum scroll width then it will do back scrolling . eg if we clicked 20 tims on the right button then we will have to atleast click 15-17 times on left button and after that it will start working . A quick fix will be using { ref.current.getBoundingClientRect().width; }and similarly we can check if the width is less than zero we will stop updating the state variable . or we can simply disable the buttons as the scrolling reaches the end. please correct me if i am wrong.

  • @sherazasadkhan4063
    @sherazasadkhan4063 19 วันที่ผ่านมา

    Where is assets file in front end portion...?

  • @RonitRai-oo5hh
    @RonitRai-oo5hh 21 วันที่ผ่านมา

    1.6.31 , what was that access token ?? , please help

  • @parampatel6345
    @parampatel6345 26 วันที่ผ่านมา

    Great tutorial. But some things like the folder structure and state management could be better, like using redux and/or context API for managing state rather than prop drilling them from the app component. But all in all good coding practice, and thank you so much ❤😊

    • @chinmayagrawal9440
      @chinmayagrawal9440 5 วันที่ผ่านมา

      Hi bro, if possible could you please share the github repo link for the same. I will be very greatful.

  • @nayanikamukherjee7275
    @nayanikamukherjee7275 27 วันที่ผ่านมา

    Please show how to deploy this website on vercel or any other platform

  • @shashankojha7813
    @shashankojha7813 หลายเดือนก่อน

    Need svg files / assest that you have used in this project

  • @michisempaisamurai3632
    @michisempaisamurai3632 หลายเดือนก่อน

    Thanks you so much

  • @gyanaranjandas3631
    @gyanaranjandas3631 หลายเดือนก่อน

    Is it responsive

  • @madanmohan4916
    @madanmohan4916 หลายเดือนก่อน

    Why you are not using bootstrap 5 for navbar, used navbar css.

  • @witelfortgelin5377
    @witelfortgelin5377 หลายเดือนก่อน

    Hello sir! How some one can enter in contact with pls?

  • @vikustorm3411
    @vikustorm3411 หลายเดือนก่อน

    Thank you so much sir, i have completed this project within 5 days

  • @manuelvaal1257
    @manuelvaal1257 หลายเดือนก่อน

    The success message isn’t working on my side.

  • @manuelvaal1257
    @manuelvaal1257 หลายเดือนก่อน

    Great content!

  • @AfterHan
    @AfterHan หลายเดือนก่อน

    Thank you, it is very helpful

  • @abijopaul
    @abijopaul หลายเดือนก่อน

    Github link 🥲

  • @puskar2957
    @puskar2957 หลายเดือนก่อน

    1:27:16 where to get accessToken

    • @toskr-r4t
      @toskr-r4t หลายเดือนก่อน

      It's generated when you login. Use the previously created /login and the access token will be in the server response object.

  • @ErickOliverArt
    @ErickOliverArt หลายเดือนก่อน

    how can deploy this ?

  • @shivtejpisal4528
    @shivtejpisal4528 หลายเดือนก่อน

    Is it just me or is anyone getting an error while connecting to MongoDB

    • @umerrashid7687
      @umerrashid7687 17 วันที่ผ่านมา

      Resolved??

    • @aishwarya.18
      @aishwarya.18 10 วันที่ผ่านมา

      hey can tell the timestamp of where you got the error

  • @thaianhhoang5964
    @thaianhhoang5964 หลายเดือนก่อน

    friendly for beginner:)

  • @thala4_reason07
    @thala4_reason07 หลายเดือนก่อน

    how to get access_token_secret code??

  • @ritikgupta6662
    @ritikgupta6662 หลายเดือนก่อน

    add voice

  • @josebaezc.7709
    @josebaezc.7709 หลายเดือนก่อน

    great tutorials. Can you make a tutorial with tables? like a Point of sales.

  • @realg701
    @realg701 หลายเดือนก่อน

    great video really healpful, how can i magnify even closer?

  • @IndhujaV9505
    @IndhujaV9505 หลายเดือนก่อน

    Hi can I get the assets file??

  • @filmbuzz9419
    @filmbuzz9419 หลายเดือนก่อน

    where get access_token_secret

  • @zeyaurrahman7765
    @zeyaurrahman7765 หลายเดือนก่อน

    How to get source code

  • @pakchiechan4867
    @pakchiechan4867 หลายเดือนก่อน

    2:25:02

  • @WaqarAhmed-c4k
    @WaqarAhmed-c4k 2 หลายเดือนก่อน

    can anyone share the data.js source code with images please

  • @athulkrishnavs779
    @athulkrishnavs779 2 หลายเดือนก่อน

    Make a home page for it bro

  • @technoprime835
    @technoprime835 2 หลายเดือนก่อน

    finally !after so many days i have completed the project. thankyou! <3

    • @nishantverma194
      @nishantverma194 2 หลายเดือนก่อน

      plss give me source code

  • @shubhamrathod9249
    @shubhamrathod9249 2 หลายเดือนก่อน

    Thank you! Project Completed.

    • @nishantverma194
      @nishantverma194 2 หลายเดือนก่อน

      pls give me sourcew coodee :(

  • @shubhamrathod9249
    @shubhamrathod9249 2 หลายเดือนก่อน

    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); } };

  • @karanshah5075
    @karanshah5075 2 หลายเดือนก่อน

    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

    • @anilsonawane1925
      @anilsonawane1925 หลายเดือนก่อน

      means in token authentication secret we can add any random string? in this project

  • @shubhamrathod8106
    @shubhamrathod8106 2 หลายเดือนก่อน

    2:31:32

  • @tanujasharma1262
    @tanujasharma1262 2 หลายเดือนก่อน

    bro do you use google pay

    • @tanujasharma1262
      @tanujasharma1262 2 หลายเดือนก่อน

      I want source code but i can only pay using google pay.

  • @hri_clashofclans7105
    @hri_clashofclans7105 2 หลายเดือนก่อน

    Hello..Can u provide assets for this project?

  • @huynhat6252
    @huynhat6252 2 หลายเดือนก่อน

    This is awsome!

    • @huynhat6252
      @huynhat6252 หลายเดือนก่อน

      1:28:24

  • @nazgul4312
    @nazgul4312 2 หลายเดือนก่อน

    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?

    • @nazgul4312
      @nazgul4312 2 หลายเดือนก่อน

      resolved :) I had a mistake onfrontend/notes-app/src/utils/axiosInstance.js

  • @tanujasharma1262
    @tanujasharma1262 2 หลายเดือนก่อน

    hi, i want to buy source code from india, can i pay you through google pay?

  • @gamingwithgnxsahil
    @gamingwithgnxsahil 2 หลายเดือนก่อน

    Where can I find the images

  • @ĐỗLêHậu
    @ĐỗLêHậu 2 หลายเดือนก่อน

    how to geet the access token secret for env file ?

  • @NawafXRMFC
    @NawafXRMFC 2 หลายเดือนก่อน

    bro did not connect the nav links in their particular section 🥲🥲😂😂😂😂

  • @amritendunath5243
    @amritendunath5243 2 หลายเดือนก่อน

    Where to findth the source code of it ? Please response anyone

  • @sachinjamadar4925
    @sachinjamadar4925 2 หลายเดือนก่อน

    Login error Please enter Email! Failed to load resource: the server responded with a status of 400 (Bad Request)

  • @wanumair2719
    @wanumair2719 2 หลายเดือนก่อน

    bro you the greatest

  • @theodavidyani6514
    @theodavidyani6514 2 หลายเดือนก่อน

    Please explain at 1:06:25 how do you find that Access_Token_Secret? and what is mean by that?

    • @shubhamrathod9249
      @shubhamrathod9249 2 หลายเดือนก่อน

      did you find the answer

    • @theodavidyani6514
      @theodavidyani6514 2 หลายเดือนก่อน

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

    • @vikustorm3411
      @vikustorm3411 หลายเดือนก่อน

      you can type anything your name also. it is just a way to encode the token by using Access_Token_Secret.

    • @Goe-k5w
      @Goe-k5w 27 วันที่ผ่านมา

      ​This is an environment variable programmers prefer to write secret_keys in environment instead of hard coding it ​@@shubhamrathod9249

    • @RonitRai-oo5hh
      @RonitRai-oo5hh 21 วันที่ผ่านมา

      I also need help with that​@@shubhamrathod9249