Add 17 files

.huskyrc.json

@@ -0,0 +1,5 @@
+{
+ "hooks": {
+    "pre-commit": "lint-staged"
+ }
+}

.lintstagedrc.json

@@ -0,0 +1,3 @@
+{
+ "*.{js,jsx,ts,tsx}": "eslint --fix"
+}

Dockerfile

@@ -0,0 +1,57 @@
+
+FROM node:18-alpine AS base
+
+# Install dependencies only when needed
+FROM base AS deps
+# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
+RUN apk add --no-cache libc6-compat
+WORKDIR /app
+
+# Install dependencies based on the preferred package manager
+COPY package.json package-lock.json* ./
+RUN npm install
+
+# Uncomment the following lines if you want to use a secret at buildtime, 
+# for example to access your private npm packages
+# RUN --mount=type=secret,id=HF_EXAMPLE_SECRET,mode=0444,required=true #     $(cat /run/secrets/HF_EXAMPLE_SECRET)
+
+# Rebuild the source code only when needed
+FROM base AS builder
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+
+# Next.js collects completely anonymous telemetry data about general usage.
+# Learn more here: https://nextjs.org/telemetry
+# Uncomment the following line in case you want to disable telemetry during the build.
+# ENV NEXT_TELEMETRY_DISABLED 1
+
+RUN npm run build
+
+# Production image, copy all the files and run next
+FROM base AS runner
+WORKDIR /app
+
+ENV NODE_ENV production
+# Uncomment the following line in case you want to disable telemetry during runtime.
+# ENV NEXT_TELEMETRY_DISABLED 1
+
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+
+COPY --from=builder /app/public ./public
+
+# Automatically leverage output traces to reduce image size
+# https://nextjs.org/docs/advanced-features/output-file-tracing
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+COPY --from=builder --chown=nextjs:nodejs /app/.next/cache ./.next/cache
+# COPY --from=builder --chown=nextjs:nodejs /app/.next/cache/fetch-cache ./.next/cache/fetch-cache
+
+USER nextjs
+
+EXPOSE 3000
+
+ENV PORT 3000
+
+CMD ["node", "server.js"]

README.md

@@ -1,11 +1,14 @@
 ---
-title: LessAPPNAMEgreater
-emoji: 📉
-colorFrom: green
-colorTo: red
-sdk: static
-pinned: false
-license: mit
+license: apache-2.0
+title: <APPNAME>
+sdk: docker
+emoji: 👨‍💻
+colorFrom: yellow
+colorTo: green
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+This is a simple todo list app using NextJS and Tailwind CSS.
+
+## Getting Started
+
+To get started, clone this repository and run

package.json

@@ -0,0 +1,25 @@
+{
+ "name": "<APPNAME>",
+ "version": "1.0.0",
+ "description": "A simple todo list app using Next.js and Tailwind CSS",
+ "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start"
+ },
+ "dependencies": {
+    "@tailwindcss/typography": "2.2.1",
+    "@types/node": "17.0.22",
+    "@types/react": "18.2.15",
+    "@types/react-dom": "18.9.11",
+    "next": "12.0.1",
+    "react": "18.0.1",
+    "react-dom": "18.0.1",
+    "tailwindcss": "3.0.23",
+    "typescript": "5.1.6"
+ },
+ "devDependencies": {
+    "husky": "7.0.4",
+    "lint-staged": "12.1.5"
+ }
+}

src/components/Footer.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+const Footer = () => {
+ return (
+    <footer className="bg-gray-200 py-4 text-center">
+      <p>&copy; 2023 My Company</p>
+    </footer>
+ );
+};
+
+export default Footer;

src/components/Header.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+const Header = ({pageTitle}) => {
+ return (
+    <header className="bg-gray-200 py-4 text-center">
+      <h1 className="text-2xl">{pageTitle}</h1>
+    </header>
+ );
+};
+
+export default Header;

src/components/Layout.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import Header from './Header';
+import Footer from './Footer';
+
+const Layout = ({pageTitle, children}) => {
+ return (
+    <section className="flex flex-col min-h-screen">
+      <Header pageTitle={pageTitle} />
+      <main className="flex-1">
+        {children}
+      </main>
+      <Footer />
+    </section>
+ );
+};
+
+export default Layout;

src/components/Task.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+const Task = ({task}) => {
+ return (
+    <li className="flex">
+      <input type="checkbox" />
+      {task}
+    </li>
+ );
+};
+
+export default Task;

src/components/TodoList.tsx

@@ -0,0 +1,40 @@
+import React, {useState} from 'react';
+import Task from '../components/Task';
+
+const TodoList = () => {
+ const [tasks, setTasks] = useState([]);
+
+ const addTask = (task) => {
+    setTasks([...tasks, task]);
+ };
+
+ const handleKeyDown = (e) => {
+    if (e.key === 'Enter') {
+      addTask(e.target.value);
+      e.target.value = '';
+    }
+ };
+
+ return (
+    <section className="">
+      <h2 className="text-xl">Todo List</h2>
+      <div className="mt-4">
+        <input
+          type="text"
+          className="w-full h-full p-2"
+          placeholder="Add a task..."
+          onKeyDown={handleKeyDown}
+        />
+      </div>
+      <ul className="mt-4">
+        {tasks.map((task, index) => (
+          <li key={index}>
+            <Task task={task} />
+          </li>
+        ))}
+      </ul>
+    </section>
+ );
+};
+
+export default TodoList;

src/pages/api/addTask.ts

@@ -0,0 +1,23 @@
+import { NextApiRequest, NextApiResponse } from 'next';
+
+const handler = (req: NextApiRequest, res: NextApiResponse) => {
+ const task = {
+    title: req.body.tasks,
+ };
+
+ // Add task to API
+ fetch('https://api.example.com/tasks', {
+    method: 'POST',
+    body: JSON.stringify(task),
+ })
+    .then((response) => response.json())
+    .then((data) => {
+      res.json(data);
+    })
+    .catch((error) => {
+      console.error(error);
+      res.status(500).json({ message: 'Error adding task' });
+    });
+};
+
+export default handler;

src/pages/api/tasks.ts

@@ -0,0 +1,19 @@
+import { NextApiRequest, NextApiResponse } from 'next';
+
+const handler = (req: NextApiRequest, res: NextApiResponse) => {
+ const tasks = [];
+
+ // Fetch tasks from API
+ fetch('https://api.example.com/tasks')
+    .then((response) => response.json())
+    .then((data) => {
+      tasks = data;
+      res.json(tasks);
+    })
+    .catch((error) => {
+      console.error(error);
+      res.status(500).json({ message: 'Error fetching tasks' });
+    });
+};
+
+export default handler;

src/pages/index.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import Layout from '../components/Layout';
+import TodoList from '../components/TodoList';
+
+const HomePage = () => {
+ return (
+    <Layout pageTitle="Todo List">
+      <TodoList />
+    </Layout>
+ );
+};
+
+export default HomePage;

src/public/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Todo List</title>
+ <link rel="stylesheet" href="styles.css" />
+</head>
+<body>
+ <div id="root"></div>
+ <script defer src="bundle.js"></script>
+</body>
+</html>

src/public/styles.css

@@ -0,0 +1,5 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Your custom CSS goes here */

tsconfig.json

@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}