Joy of Coding Bootcamp 2024

Part 03 -- Web Dev Internship Training

Trello Ticket 07 - First Solo Full-Stack Web Project

• AKA Personal Task Manager Application

• AKA #joy-of-coding-internship-solo-project

DKF Completed @ 2024-03-30

todos-tus-todos.vercel.app

---

App Map

Pages

• Homepage: /app/page.tsx
• 404 Page: /app/not-found.tsx
• Add New To-Do: /app/add/page.tsx
• View All To-Dos: /app/todos/page.tsx
• View To-Dos by Category: /app/category/[category]/page.tsx
• View To-Dos by Status: /app/status/[status]/page.tsx
• View a Selected To-Do: /app/[id]/page.tsx
• Edit a Selected To-Do: /app/[id]/edit/page.tsx
• Delete a Selected To-Do: /app/[id]/delete/confirm-delete/page.tsx

Custom Components, Definitions & Other Assets

Back-End

• API Routing Configurations for GET & POST: /app/api/todos/route.ts
• API Routing Configurations for PUT & DELETE: /app/api/todos/[id]/route.ts
• Prisma Client Instance: /prisma/db.ts
• Prisma Database Schemas: /prisma/schema.prisma
• Zod Validation Schemas: /app/validationSchemas.ts

Front-End

• Favicon: /app/favicon.ico
• Image: /public/tackle-todos.png
• Constant Definitions: /app/definitions/constants.tsx
• Function Definitions: /app/definitions/functions.tsx
• Root Layout: /app/layout.tsx
• Navbar Component: /app/components/TopNav.tsx
• Page Title Component: /app/components/PageTitle.tsx
• Form to Add New To-Dos: /app/components/AddForm.tsx
• Form to Edit Existing To-Dos: /app/components/EditForm.tsx
• Client Component for Viewing All To-Dos: /app/components/ViewAll.tsx
• Client Component for Viewing To-Dos by Category: /app/components/ViewCat.tsx
• Client Component for Viewing To-Dos by Status: /app/components/ViewStat.tsx
• Client Component for Viewing a Selected To-Do: /app/components/ViewCat.tsx
• Client Component for Deleting To-Dos: /app/components/DeleteOne.tsx

---

Prompt:

Right now you have React/Next.js knowledge, some supporting tools like Prisma and Radix UI, all while building upon your knowledge of the web. This is the final web project before you move onto the internship. A solo project will help you apply your knowledge of React or Next.js, along with the tools you've learned (Tailwind CSS, Radix UI, and Prisma). You have 2 choices:

• Build your own custom full-stack React or Next.js task manager, OR
• Complete the RedwoodJS tutorial
• [I chose to do both with this repo being the former]

Create a Personal Task Manager Application. This project will help you manage your tasks, and it can serve as an excellent learning experience. Create a web application that allows users to add, edit, and delete personal tasks.

Key Features:

• Task List: Display a list of tasks, including the task name, description, and due date.
• Task Creation: Implement a feature to add new tasks, with fields for task name, description, and due date.
• Task Editing: Allow users to edit task details such as the name, description, and due date.
• Task Deletion: Enable users to delete tasks they no longer need.
• Task Organization: Implement task organization or filtering options, such as sorting by due date or categorizing tasks.
• Bonus: User Authentication: Add user registration and authentication to allow multiple users to manage their personal tasks. [I haven't implemented this (yet!)]

Tech Stack:

• Framework: React or Next.js
  • [I chose Next.js]
• Interface: Tailwind CSS for styling; Radix UI for accessibility
  • [I used Tailwind CSS and daisyUI]
• Database: mySql or Postgres with Prisma
  • [I chose PostgreSQL and Prisma (ORM)]

This project will give you an opportunity to apply your knowledge and encourage you to explore new concepts such as user authentication, state management, and more. It's a practical way to create something useful while continuing to expand your web development skills. Happy coding, and have fun building your Personal Task Manager!

---

DKF FUTURE IDEAS:

• Authentication
• Mobile optimization
• Increase accessibility
• Add confirmation modal for deletion
• Move table styling classes to definitions