Encode

Encode is a web application that allows users to write, edit, and preview HTML, CSS, and JavaScript code in real-time. With this tool, users can quickly test and refine their code, without having to set up a local development environment.

Table of contents

• Overview
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Useful resources

Overview

Screenshot

Links

• Live Site URL: https://encode-rahul.vercel.app/

My process

Built with

• React.js - JS library
• Tailwind CSS - For styles

What I learned

• Custom Hooks

import { useEffect, useState } from "react";

export function useLocalStorage(key, initialValue) {
  const keyName = "ENCODE-" + key;
  const [storedValue, setStoredValue] = useState(() => {
    const item = localStorage.getItem(keyName);
    return item ? JSON.parse(item) : initialValue;
  });

  useEffect(() => {
    localStorage.setItem(keyName, JSON.stringify(storedValue));
  }, [keyName, storedValue]);

  return [storedValue, setStoredValue];
}

Useful resources

• React.js
• Tailwind CSS