Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

Save User Recent Searches (Last 5)

Open
  • Is something wrong?
#183 0 comments 0 reactions 1 assignee View on GitHub

@manugallegob is already working on this.

Since Feb 27, 2026.

Assessment

This issue has not been assessed yet.

Description

Feature: Save User Recent Searches (Last 5)

Description

We want to persist the last five searches performed by the user using the browser’s localStorage, and display them when the user returns to the search page.

The recent searches list must be displayed right below the search form.

Requirements

useRecentSearches Hook

Create a new hook named useRecentSearches responsible for managing recent searches.

It must handle:

  • Auto-load on component mount
    • Read recent searches from localStorage when the hook/component initializes.
  • Saving searches (max 5)
    • Store searches in localStorage.
    • Keep only the latest 5.
  • De-duplication
    • If a search already exists, move it to the beginning (most recent).
  • localStorage error handling
    • Gracefully handle read/write errors (e.g. unavailable storage, JSON parsing issues).
    • In case of error, the app should not crash and should fallback safely (e.g. empty list).
RecentSearches Component

Create a new component named RecentSearches to render the recent searches.

Rules:

  • It receives the recent searches list via props.
  • UI requirements:
    • Title: "Búsquedas recientes"
    • Show a list of recent searches (max 5).
    • If there are no recent searches, render nothing (no title, no container).
  • Interaction:
    • When the user clicks a recent search, redirect them to the corresponding reservoir detail page.
Dominant language
TypeScript
Stars
16
Forks
2
No merged PRs in 30d

Getting set up

This project ships no dev container, Dockerfile or contributing guide, so setting up is up to you: start from its README, and see our first-contribution guide for the general steps.

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from Lemoncode/embalse-info

All issues in Lemoncode/embalse-info

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.