Simple grocery list react website

This is a simple project for my coding assignment. I want to do the following things for this app but will see how it goes.

• TypeScript

• GraphQL

• Tailwind CSS

• Jest

• Custom type in TypeScript

Resources

• https://tailwindcss.com/docs/guides/create-react-app

Create React App

Using TypeScript was easy with react. Just use create-react-app and give TypeScript template, like the below. I named the app client as the repository will have two directories, server and client.

npx create-react-app client --template typescript
cd client
yarn start

Install tailwind css

npm install -D tailwindcss @tailwindcss/forms
npx tailwindcss init

Configure template paths

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [require('@tailwindcss/forms')],
}

Add the Tailwind directives to the CSS file

@tailwind base;
@tailwind components;
@tailwind utilities;

The initial commit is to have a list page with canned data.

export default function List(
  { items }: { items: { name: string, done: boolean }[] }
) {

  const toggleDone = (name: string) => {
    console.log('toggleDone', name);
  }

  return (
    <ul>
      {items.map((item) => (
        <li
          key={item.name}
          onClick={() => toggleDone(item.name)}
          style=
        >
          {item.name}
        </li>
      ))}
    </ul>
  );
}

Follow the tailwindcss installation instruction for create-react-app

yarn add --dev tailwindcss postcss autoprefixer
yarn tailwindcss init -p

tailwind.config.js

/** @type {import('tailwindcss').Config} */ 
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

index.css

@tailwind base;
@tailwind components;
@tailwind utilities;