Add 12 files

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,26 @@
----
-title: Sf B5f
-emoji: 🏢
-colorFrom: indigo
-colorTo: pink
-sdk: static
-pinned: false
-license: mit
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+{{< TOC >}}
+
+# {{< Warning >}}
+`<APPNAME>` is a simple todo list app built using NextJS and Progressive Web Apps. The app is designed to work on
+Android devices and has a minimalistic design to provide a clean and easy-to-use interface.
+
+## Features
+
+* Create new tasks with a title, deadline, and description
+* View tasks in a list with sorting options
+* Mark tasks as complete or incomplete
+* Delete tasks
+
+## Future Plans
+
+* Implement a dark mode theme
+* Add more advanced features such as reminders, notifications, and a calendar view
+* Optimize the app for better performance on mobile devices
+
+## Contributing
+
+Contributions are welcome! If you have any ideas or suggestions, feel free to open an issue or pull request.
+
+## License
+
+MIT

cypress/fixtures/seedData.json

@@ -0,0 +1,20 @@
+[
+ {
+    "id": 1,
+    "title": "First task",
+    "deadline": "2024-01-01",
+    "description": "A task"
+ },
+ {
+    "id": 2,
+    "title": "Second task",
+    "deadline": "2023-01-01",
+    "description": "Another task"
+ },
+ {
+    "id": 3,
+    "title": "Third task",
+    "deadline": "2023-01-02",
+    "description": "A third task"
+ }
+]

cypress/integration/index.spec.js

@@ -0,0 +1,50 @@
+describe("Complete App", () => {
+ beforeEach(() => cy.visit("/"));
+
+ it("displays the title", () => {
+    cy.get("h1").should("have.text", "Todo List");
+ });
+
+ it("displays the create task form", () => {
+    cy.get("form").should("have.attr", {
+      "method": "POST",
+      "action": "/task/create",
+    });
+    cy.get("input[name=title]").should("be.visible");
+    cy.get("input[name=deadline]").should("be.visible");
+    cy.get("textarea[name=description]").should("be.visible");
+    cy.get("button[type=submit]").should("be.visible");
+ });
+
+ it("allows the user to create a new task", () => {
+    const newTask = {
+      title: "New task",
+      deadline: "2024-01-01",
+      description: "A new task"
+    };
+    cy.get("input[name=title]").type(newTask.title);
+    cy.get("input[name=deadline]").type(newTask.deadline);
+    cy.get("textarea[name=description]").type(newTask.description);
+    cy.get("button[type=submit]").click();
+
+    cy.get("h2").should("have.text", "Tasks");
+    cy.get("li").should("have.length", 1);
+    cy.get("li:first").should("contain.text", newTask.title);
+    cy.get("li:first").should("contain.text", newTask.deadline);
+    cy.get("li:first").should("contain.text", newTask.description);
+ });
+
+ it("allows the user to mark a task as complete", () => {
+    cy.get("input[type=checkbox]").should("be.visible");
+    cy.get("input[type=checkbox]").click();
+    cy.get("input[type=checkbox]").should("be.checked");
+ });
+
+ it("allows the user to delete a task", () => {
+    cy.get("li:first").should("contain.text", "New task");
+    cy.get("li:first").find("button.delete-task").click();
+    cy.get("li:first").find("button.delete-task").should("have.text", "Delete");
+    cy.get("li:first").should("contain.text", "Task deleted");
+    cy.get("li").should("have.length", 0);
+ });
+});

package.json

@@ -0,0 +1,26 @@
+{
+ "name": "<APPNAME>",
+ "version": "1.0.0",
+ "description": "A simple todo list app using nextjs with progressive web app that can be installed on Android",
+ "main": "index.js",
+ "scripts": {
+    "start": "next dev",
+    "build": "next build",
+    "test": "jest",
+    "eject": "next eject"
+ },
+ "dependencies": {
+    "@types/next": "12.3.5",
+    "@types/node": "20.4.2",
+    "@types/react": "18.2.15",
+    "@types/react-dom": "18.2.7",
+    "next": "12.3.5",
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
+ },
+ "devDependencies": {
+    "@types/jest": "28.2.2",
+    "jest": "28.2.2",
+    "tsc": "5.1.5"
+ }
+}

public/manifest.json

@@ -0,0 +1,56 @@
+{
+ "short_name": "<APPNAME>",
+ "name": "<APPNAME> - A simple todo list app using nextjs with progressive web app that can be installed on Android",
+ "description": "A simple todo list app using nextjs with progressive web app that can be installed on Android",
+ "icons": [
+    {
+      "src": "icons/icon-72x72.png",
+      "sizes": "72x72",
+      "type": "image/png"
+    },
+    {
+      "src": "icons/icon-96x96.png",
+      "sizes": "96x96",
+      "type": "image/png"
+    },
+    {
+      "src": "icons/icon-128x128.png",
+      "sizes": "128x128",
+      "type": "image/png"
+    },
+    {
+      "src": "icons/icon-144x144.png",
+      "sizes": "144x144",
+      "type": "image/png"
+    },
+    {
+      "src": "icons/icon-152x152.png",
+      "sizes": "152x152",
+      "type": "image/png"
+    },
+    {
+      "src": "icons/icon-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "icons/icon-256x256.png",
+      "sizes": "256x256",
+      "type": "image/png"
+    },
+    {
+      "src": "icons/icon-384x384.png",
+      "sizes": "384x384",
+      "type": "image/png"
+    },
+    {
+      "src": "icons/icon-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+ ],
+ "start_url": "/",
+ "display": "standalone",
+ "theme_color": "#000000",
+ "background_color": "#ffffff"
+}

src/index.css

@@ -0,0 +1,69 @@
+html,
+body {
+ margin: 0;
+ padding: 0;
+ font-family: Arial, sans-serif;
+ background-color: var(--background-color);
+}
+
+.container {
+ margin: 0;
+ padding: 0;
+ display: flex;
+ flex-flow: row wrap;
+ justify-content: space-evenly;
+}
+
+.task-container {
+ background-color: var(--primary-lightgray-color);
+ box-shadow: 0px 0px 10px 0px rgba(167, 167, 167, 0.2);
+ border-radius: 0.25rem;
+ padding: 1rem;
+ margin-bottom: 1rem;
+}
+
+.task-title {
+ font-weight: bold;
+ font-size: 1.25rem;
+ line-height: 1.5;
+ color: var(--text-color);
+}
+
+.task-deadline {
+ font-size: 0.75rem;
+ line-height: 1.25;
+ color: var(--text-color);
+}
+
+.task-description {
+ font-size: 0.875rem;
+ line-height: 1.25;
+ color: var(--text-color);
+}
+
+.task-field {
+ width: 100%;
+ outline: none;
+ background-color: var(--primary-beige-color);
+ padding: 0.5rem;
+ border: none;
+ border-radius: 0.25rem;
+ text-align: center;
+}
+
+.task-button {
+ display: inline-block;
+ width: 100%;
+ font-size: 1.25rem;
+ background-color: var(--primary-color);
+ color: #fff;
+ border: none;
+ cursor: pointer;
+ padding: 1rem;
+ transition: background-color 0.3s ease;
+}
+
+.task-button:hover {
+ background-color: var(--primary-color);
+ color: #fff;
+}

src/pages/index.tsx

@@ -0,0 +1,29 @@
+import styles from "../styles.module.css";
+
+const Home = () => {
+ return (
+    <div className="text-gray-900 text-center">
+      <h1 className="text-6xl m-20 mb-6 font-bold">Todo List</h1>
+      <div className="min-h-$screen-2 bg-white px-6 py-4">
+        <h2 className="text-5xl font-medium">Create a New Task:</h2>
+        <form className="mx-auto w-full md:w-3/4">
+          <input
+            type="text"
+            className="block bg-white text-gray-900 font-medium text-xl mb-2 mt-4"
+            placeholder="Task Title"
+          />
+          <input
+            type="date"
+            className="block bg-white text-gray-900 font-medium text-sm mb-2 mt-4"
+            placeholder="Task Deadline"
+          />
+          <button className="block font-medium text-sm text-white transition duration-150 ease-in-out bg-blue-500 hover:bg-blue-600 border-blue-500 hover:border-blue-600 font-logo rounded px-2 mt-6 py-2">
+            Create Task
+          </button>
+        </form>
+      </div>
+    </div>
+ );
+};
+
+export { Home };

src/styles.module.css

@@ -0,0 +1,53 @@
+@import "./variables.css";
+
+.container {
+ display: grid;
+ grid-template-columns: repeat(12, 1fr);
+ gap: 2rem;
+}
+
+.task-container {
+ border-radius: 0.25rem;
+ background-color: #fff;
+ padding: 1rem;
+}
+
+.task-title {
+ font-weight: bold;
+ font-size: 1.25rem;
+}
+
+.task-deadline {
+ font-size: 0.875rem;
+}
+
+.task-description {
+ font-size: 0.875rem;
+}
+
+.task-field {
+ width: 100%;
+ outline: none;
+ background-color: #f5f5f5;
+ padding: 0.5rem;
+ border: none;
+ border-radius: 0.25rem;
+ text-align: center;
+}
+
+.task-button {
+ display: inline-block;
+ width: 100%;
+ font-size: 1.25rem;
+ background-color: #3498db;
+ color: #fff;
+ border: none;
+ cursor: pointer;
+ padding: 1rem;
+ transition: background-color 0.3s ease;
+}
+
+.task-button:hover {
+ background-color: #555;
+ color: #fafafa;
+}

src/variables.css

@@ -0,0 +1,10 @@
+@tailwind base;
+@tailwind components;
+
+:root {
+ --text-color: #4e4c4d;
+ --primary-color: #159969;
+ --primary-lightgray-color: #f1f1f1;
+ --primary-beige-color: #f7f7f7;
+ --background-color: #ffffff;
+}

test/test.js

@@ -0,0 +1,10 @@
+import React from "react";
+import renderer from "react-test-renderer";
+import MyComponent from "../components/MyComponent";
+
+describe("MyComponent", () => {
+ it("renders correctly", () => {
+    const tree = renderer.create(<MyComponent />).toJSON();
+    expect(tree).toMatchSnapshot();
+ });
+});

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"]
+}