A modern, clean todo list application built with React and TypeScript.
Note: This app was built by the roadman. Proper vibes only!
Live Demo: https://vibe-sessions.netlify.app (Update this URL once you deploy your app)
- ✅ Add, edit, and delete tasks
- 🔄 Mark tasks as complete/incomplete
- 🔍 Filter tasks by All/Active/Completed
- 🧹 Clear all completed tasks at once
- 💾 Persistent storage using localStorage
- 📱 Responsive design for all devices
- 🔐 Web3 authentication with Privy
- React 18
- TypeScript
- Vite
- CSS3
- Privy Auth
- Permissionless.js
- Clone the repository
- Install dependencies:
npm install
- Update the Privy App ID in
src/App.tsx:
// Replace with your actual Privy App ID
const PRIVY_APP_ID = 'your-privy-app-id-here';- Start the development server:
npm run dev
- Open your browser to the URL shown in the terminal
You can deploy this app to platforms like:
After deployment, update the live demo link at the top of this README.
To enable the login functionality:
- Go to Privy and sign up for an account
- Create a new project
- Copy your App ID from the dashboard
- Replace the placeholder App ID in
src/App.tsx - Configure allowed domains in the Privy dashboard (add localhost for development)
For more details, see the Privy documentation.
npm run build
The build files will be output to the dist directory.
- Add a new task by typing in the input field and pressing Enter or clicking "Add"
- Double-click a task to edit it
- Mark tasks as complete by clicking the checkbox
- Use the filters to show All, Active, or Completed tasks
- Clear all completed tasks with the "Clear Completed" button
MIT