Just todo it is a simple todo web application that allows users to easily keep track of their daily tasks. The app features a clean and minimalistic UI, with a simple and intuitive user experience. Users can create, read, update, and delete (CRUD) tasks, as well as share tasks with others, fostering collaboration and teamwork. Additionally, the app includes user authentication and authorization, ensuring that users can only view and share their own tasks with authorized individuals. The app is designed to be as simple as possible, with no extraneous features or distractions, making it perfect for users who want a straightforward,easy-to-use todo list app.
Follow these instructions to set up and run the project locally.
- Node.js (>= 20.x)
- npm (>= 10.x)
git clone https://github.com/Junk-debug/next-todo-app
cd next-todo-appCreate a .env file in the root directory by copying the provided .env.example file:
cp .env.example .envEdit the .env file to match the structure provided in .env.example.
One option is to generate a secret using the following command:
openssl rand -base64 32
One option is to use Vercel’s free storage to create a PostgreSQL database.
You can obtain it by registering at Brevo and retrieving the SMTP key.
Next, create a link following the structure provided in .env.example.
After editing the .env file, run:
npm installTo set up your database, run the following setup script:
npm run setupThis command will:
- Generate Prisma client files.
- Apply database migrations using
npx prisma migrate deploy.
If you want to populate your database with mock data, run:
npm run seednpm run devYour application will be available at http://localhost:3000.
To test this app, you will need to log in. You have the option to create an account (note that we do not have roles like Admin), but it's not mandatory. Below is an example user you can use to log in:
- Email: [email protected]
- Password: password
Make sure to populate your database with mock data by running:
npm run seedThe project includes several npm scripts to streamline development:
| Script | Description |
|---|---|
npm run dev |
Start the development server |
npm run build |
Build the project for production |
npm run start |
Start the production server |
npm run lint |
Check for linting errors |
npm run format |
Format all source files |
npm run setup |
Generate Prisma client and deploy database migrations |
npm run build:seed |
Compile the seed script |
npm run seed |
Seed the database with mock data (optional) |
npm run admin |
Open the Prisma Studio (database GUI with all schema and models) - admin panel |
The project is built using the following technologies:
- Next.js (v15.0.1): React framework for server-side rendering and static site generation.
- React (v19.0.0): Core library for building user interfaces.
- Tailwind CSS: Utility-first CSS framework for styling.
- shadcn/ui: Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.
- Lucide Icons: Icon library for SVG icons.
- Framer Motion: A production-ready motion library for React, used for creating animations and transitions.
- NextAuth.js (v5.0.0-beta.25): Authentication library for Next.js.
- Prisma: ORM for database management and migrations.
- PostgreSQL: Database used for storing application data.
- bcryptjs: Library for hashing and comparing passwords.
- TanStack React Query: For managing server state and data fetching.
- Zod: Type-safe schema validation.
- TypeScript: Static type checking.
- ESLint: Code linting tool.
- Prettier: Code formatting tool.
- Turbopack: High-performance bundler for Next.js.