-
AKA Personal Task Manager Application
-
AKA #joy-of-coding-internship-solo-project
DKF Completed @ 2024-03-30
- 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
- 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
- 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
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