Skip to content

sur-123-bhi/TodoApp

Repository files navigation

Next.js Todo Application with Drizzle ORM, PostgreSQL, and Material-UI This project implements a dynamic and user-friendly todo list application leveraging the power of:

Frontend: Next.js
Backend: Next.js
State Management: Redux
Database: PostgreSQL
ORM: Drizzle ORM
Cache: Redis (not currently active)
UI Framework: Material-UI (for enhanced styling and interactivity)

Getting Started:

Prerequisites:
Node.js and npm (or yarn) installed
PostgreSQL database server running

Clone the Repository:
Bash
git clone https://github.com/sur-123-bhi/TodoApp.git
Use code with caution.

Install Dependencies:
Bash
npm install
Use code with caution.

Environment Variables:
Create a .env.development.local file at the project root and define the following environment variables:

POSTGRES_URL="postgres://default:1tfwVlbJuZ6a@ep-gentle-hill-a4450v3q-pooler.us-east-1.aws.neon.tech:5432/verceldb?sslmode=require" POSTGRES_PRISMA_URL="postgres://default:1tfwVlbJuZ6a@ep-gentle-hill-a4450v3q-pooler.us-east-1.aws.neon.tech:5432/verceldb?sslmode=require&pgbouncer=true&connect_timeout=15" POSTGRES_URL_NO_SSL="postgres://default:1tfwVlbJuZ6a@ep-gentle-hill-a4450v3q-pooler.us-east-1.aws.neon.tech:5432/verceldb" POSTGRES_URL_NON_POOLING="postgres://default:1tfwVlbJuZ6a@ep-gentle-hill-a4450v3q.us-east-1.aws.neon.tech:5432/verceldb?sslmode=require" POSTGRES_USER="default" POSTGRES_HOST="ep-gentle-hill-a4450v3q-pooler.us-east-1.aws.neon.tech" POSTGRES_PASSWORD="1tfwVlbJuZ6a" POSTGRES_DATABASE="verceldb"


Start the Development Server:

Bash npm run dev Use code with caution. This will start the Next.js development server at http://localhost:3000.

Features:

Create new todo Edit any todo Delete todo Implement additional features as needed (e.g., edit task, due dates)


Folder Structure:

components: Contains Next.js page components for the application's routes (e.g., todoContainer.js for the main todo list page). api: Contains API routes for handling data requests (e.g., creating/deleting/fetching todos). lib/drizzle.js: Contains Drizzle ORM configuration and schema definition files for the todo table. utils: Contains utility functions for implementation of redis. .env.development.local: Stores environment variables for database connection.


Functionality Breakdown:

The todoContainer.js page component dynamically displays the current list of todos and provides input fields for adding new items. User interactions trigger functions that interact with API routes defined in the api directory. API routes utilize Drizzle ORM to perform CRUD operations (Create, Read, Update, Delete) on the todo table in the PostgreSQL database. Optional Redis Implementation:

While not currently active, comments or code might exist for integrating Redis as a cache layer. This could potentially improve performance by caching frequently accessed data like the todo list. However, setting up Redis and configuring the integration requires additional work.


Further Development:

Editing existing todo items Adding due dates and prioritizing tasks Leveraging Next.js data fetching and state management techniques for better user experience Utilizing Drizzle ORM's features and a robust PostgreSQL database for efficient data management and retrieval. Exploring UI libraries or frameworks (e.g., Material-UI) to enhance the application's style and interactivity