React Projects

  • By John Smilga
  • Last update: Jan 1, 2023
  • Comments: 12

React Projects


Find the Content Useful? You can always buy me a coffee

Tutorial Video

(React Tutorial)[]

All Projects

Projects Site

Corresponding Tutorial Topics


  1. Birthday Reminder

useEffect and Conditional Rendering

  1. Tours
  2. Reviews
  3. Questions
  4. Menu
  5. Tabs
  6. Slider


  1. Lorem Ipsum Generator
  2. Color Shades Generator
  3. Grocery Bud


  1. Navbar


  1. Modal And Sidebar
  2. Stripe Submenus

useReducer and useContext

  1. Cart

React Router and useCallback

  1. Cocktails

Advanced Projects (Course Exclusive)

Course Link

  1. Markdown Preview
  2. Random Person
  3. Pagination
  4. Stock Photos
  5. Dark Mode
  6. Movie DB
  7. Hacker News
  8. Quiz



  • 1

    project 19 - stock photos displays first 10 photos twice after fetching additional photos on scroll

    Recreate issue by loading the first set of 10 photos, then scrolling down in order to fetch more photos. The first set of 10 photos are displayed twice, then the additional photos are added to the list.

    Initial load:

    initial load

    After scroll:

    after scroll
    As you can see, the car, bookshelf, camera, and portrait repeat on scroll.
  • 2

    Websites images In the above website, the websites are collectively shared. I wanted to know if the shared websites' images were taken manually or there is something going on in the backend that automatically takes the images and posts them here. Like in the image below, netlify is actually taking pictures automatically from the published websites:


  • 3

    Need clarification - 02: Tours

    While removing tours, I called {fetchTours()} on refresh button instead of {fetchTours}

    Then I see Loading.. and the list of tours displayed. It supposed to be Refresh button and text as "No Tours Left". If I click refresh then all tours has to be displayed.

    Can you explain difference between calling fetchTours vs fetchTours() onclick event of Refresh button?

  • 4

    on 15 project

    hi i am learning with your 15 projects . there i faced issue in render data using url's .

    for example in 6-tab , after loading nd setJobs . i print in console , i got empty array twice nd 4 times data . i ignore that after doing full 6-tab project similar way you did when i check data is empty while printing in console .

    kindly help me to clear my confusion and to go forward .. issue

  • 5

    npm start not working on react-scripts version 3.4.3

    I'm cloning this repository in February 2021 with react-scripts having been upgraded to version 4.0.2. When I ran npm install && npm start without updating react-scripts, meaning I'm using the version from the project's package.json, the dev server doesn't run. Updating react-scripts fixed the issue, but I had to run npm audit fix --force which npm doesn't recommend. npm-force I think there should be a more painless way to do this...

  • 6

    Fixed: After empty search no api call

    There is no valid pageNo as 0 . So changed to 1, And after searching in search bar and emptying the search and pressing enter, api was not getting called. Hence fixed that.

  • 7

    Fix button width in 4-Accordion

    In the Accordion project, the buttons become squished when the header text wraps in small screen sizes (less than 700px). The text header in the question component takes up as much space as possible in the flexbox, which causes the button to have a smaller width when the text wraps. By adding a min-width: 2rem rule to the btn class, the button will always have the required width.

    Screen Shot 2020-12-21 at 4 09 24 PM

    Small nitpick, great course! 🙂

  • 8 is not a function

    Running your second project (actually following you on youtube) whenever I pass tours={tours} to the Tours component and In Tours component whenever I try to make a map of the current array it say is not a function

  • 9

    Repo missing a license

    Hi @john-smilga!

    Thank you for the React tutorial. I almost finished it and even started building some of the related projects.

    I know the setups are meant to be used as starting point. But unless you add a license that grants us such permissions, we may not use, modify and/or share them.

    This is also the case of react-basics-2020 and react-advanced-2020.

  • 10

    How to tweak the slider code

    How can I tweak the slider so I can see 2-3 slides with 'nextSlide' class beside 'activeSlide'?

    For example:

    active slide | next slide 1 | next slide 2 and then slide 1 becomes active and new one comes in to view (next slide 3)

  • 11

    Project 9 - Color Generator setError(false)

    In the 9th project (Color Generator), should not be in the try branch code a 'setError(false);' as well? I can see that in the netlify demo app everything works well, the error state is resetted to false when we sumbit a valid input, but the code that you provided doesn't reflect that. Is there something that i am missing?

  • 12

    Practicing along

    This is my own part of the changes I was able to add as I was learning from the projects I did something differently in some of the projects but we got the same results still