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
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;
Comments