All solutions

Multistep form project built using Next.JS v13 and Tailwind.

The project uses custom useContextHook to globally manage state. It has two components the FormHandler which is the Sidebar and Footer but also nests a second component FormDisplay.

FormDisplay shows the necessary data for each step and gets it's data from /lib/data.ts.

As such I have created the array of steps which contains each case of a special selection and styled it accordingly. For example if the step contains plans array it will render it from the FormDisplay.

All feedback is welcome. NextJS for this is probably overkill but it's easiest for me to use and I am most comfortable with it.

Nothing much mobile first workflow. Project done a long time ago, code is messy vanilla html css js. That's all.

This submision contains the code for a fully functional Job Listings With Filtering using NextJS and TypeScript.

The code uses the lib folder and the data.jsx for the data provided in the challange.

export function getAllData() {
  return data;
}

export function getDataByFilters(filters) {
  if (filters.length === 0) {
    return data;
  } else {
    return data.filter((listing) => {
      return filters.every((filter) => {
        return (
          listing.role === filter ||
          listing.level === filter ||
          listing.languages.includes(filter) ||
          listing.tools.includes(filter)
        );
      });
    });
  }
}

This is all the code for filtering it is pretty simple and easy to understand.

Any feedback is very much welcome.

This submision contains the code for a fully functional Advice generator app, built using Vanilla JS and HTML5 Semantic elements.

Feedback appreciated.

Welcome to my submission for the Shortly URL shortening API Challenge on Frontend Mentor!

This submision contains the code for a fully functional URL shortening web application, built using NextJs using TypeScript. The application utilizes the API to shorten user-provided URLs and displays the shortened URL in a clean, user-friendly interface and web accessible way. The application also includes form validation and error handling to ensure that the input can't contain and invalid url.

The most difficult thing while building this project was getting the margins and paddings correctly positioned. It also took some time to get the local storage to work without causing a Next.js hydration error.

My solution to this was as follows:

  if (typeof window !== "undefined" && window.localStorage) {
    initialValue = JSON.parse(localStorage.getItem("linksArray") ?? "[]") || [];
  }

  const [linksArray, setLinksArray] =
    useState<Array<{ shortLink: string; originalLink: string }>>(initialValue);

  useEffect(() => {
    if (typeof window !== "undefined" && window.localStorage) {
      localStorage.setItem("linksArray", JSON.stringify(linksArray));
    }
  }, [linksArray]);

And to prevent the Hydration error by waiting the dom to load in the UrlShortener component and rendering the links array when dom is loaded.

{domLoaded && (
          <div className={styles.links}>
            {linksArray.map((item) => (
              <div
                className={`${styles.linkItem} ${styles.flexLinks}`}
                key={item.shortLink}
              >
                <p className={styles.url}>{item.originalLink}</p>
                <div className={styles.seperator}></div>
                <div className={`${styles.ctaItems} ${styles.flexLinks}`}>
                  <p className={styles.shortenedUrl}>{item.shortLink}</p>
                  <button
                    type="submit"
                    className={`${styles.copyBtn} ${
                      lastClicked === item.shortLink ? styles.copied : ""
                    }`}
                    onClick={() => handleCopyClick(item.shortLink)}
                  >
                    {lastClicked === item.shortLink ? "Copied!" : "Copy"}
                  </button>
                </div>
              </div>
            ))}
          </div>
        )}

Also wanted to add some animations so the site was more smooth but was lazy.

Any feedback is appreciated.