ProdAI

• 

  the hompage

• 

  the notes service

• 

  the todolist service

• 

  GitHub Universe Learning Challenge

Inspiration

The inspiration for ProdAI came from the need to merge productivity tools and AI-driven insights into a single, user-friendly platform. While working with various task management apps, I noticed they often lacked integration with AI capabilities or were too generic. This project was an opportunity to create something tailored to personal productivity, with seamless navigation and visually appealing UI components. Additionally, exploring and learning from Hendrixer's GitHub repository provided an initial direction for building this platform.

What it does

ProdAI serves as a productivity-enhancing tool that combines a to-do list app with AI-driven notes. It includes:

A task management interface with ShadCN UI components for a modern, responsive design.

A service-switching sidebar that allows users to toggle between the to-do and notes services.

A visually cohesive UI with persistent navbar and sidebar elements for consistent navigation.

How we built it

Frontend: Built with Next.js and styled using TailwindCSS, leveraging ShadCN UI components for a polished and dynamic design.

Backend: Prisma was integrated for database management to persist data for tasks and notes.

Learning Resources: Hendrixer’s “fullstack-ai-nextjs” repository provided foundational knowledge, while Azure tools were considered for future authentication integration.

Tools & Frameworks: React was the core library for creating the UI, with a strong emphasis on modular components to ensure reusability.

Challenges we ran into

Design Consistency: Ensuring that the sidebar and navbar behaved uniformly across different services required careful planning and implementation.

Database Integration: Integrating Prisma into the project while managing schema updates and migrations was a learning curve.

Balancing Features: Deciding which features to prioritize, especially when juggling multiple services (to-do and notes).

Learning Curve: Working with ShadCN UI for the first time involved understanding its component system and how to customize it effectively.

Accomplishments that we're proud of

Successfully integrating Prisma for data persistence in the to-do app.

Creating a user-friendly and visually appealing interface with ShadCN UI.

Building a responsive sidebar for service switching, improving usability.

Gaining hands-on experience with a modern tech stack (Next.js, TailwindCSS, and Prisma).

What we learned

How to build modular React components for a scalable and maintainable codebase.

Best practices for integrating Prisma into a Next.js application.

The importance of user experience in designing productivity tools.

Managing project scope while incorporating new libraries like ShadCN UI.

What's next for ProdAI

Authentication Integration: Adding Azure tools for user authentication.

AI Enhancements: Leveraging AI for task recommendations and notes analysis.

Feature Expansion: Including reminders, priority settings, and collaborative features.

Polishing UI: Further refining the design for mobile and desktop views.

Deployment: Launching the app for public use and gathering user feedback to iterate on future versions.

Built With

• next.js
• node.js
• react
• shadcn-ui
• sqlite
• tailwind-css
• typescript