This is an advanced to-do list application featuring drag-and-drop functionality, calendar integration similar to Google Calendar, and powerful task management features. The application is built with a frontend and backend architecture, using Firebase for admin functionalities and Google Provider for user authentication.
- Drag-and-Drop Interface: Easily organize tasks with Dnd Kit.
- Google Calendar-Like Integration: Schedule tasks using an interactive calendar with daily, weekly, and monthly views.
- Authentication: Secure user sign-in with Google Provider.
- Advanced Task Management:
- Recurring tasks
- Task dependencies and priorities
- Real-time updates
- Custom views and filters
- Admin Panel: Admin functionalities powered by Firebase.
Frontend:
- Vite
- React
- Dnd Kit (for drag-and-drop functionality)
- Axios (for API requests)
- Google Provider for authentication
Backend:
- Node.js
- Express
- Firebase Admin SDK (using
serviceAccount.json
for admin functionalities) - MongoDB (optional, for storing additional user data)
Make sure you have the following installed:
git clone https://github.com/Abshar777/modern-todoList.git
cd modern-todoList
-
Clone the repository:
git clone https://github.com/Abshar777/modern-todoList.git cd todo-list-app
-
Install dependencies:
cd backend npm install npm start
-
Set up environment variables by creating a
.env
file in the root directory:PORT=port-number MONGO_URI=your-mongodb-uri JWT_SECRET=your-secrete-key
-
Start the development frontend:
cd .\frontend\ npm install npm run dev
-
Open the application in your browser:
http://localhost:3000
- Go to the Google Cloud Console.
- Create a new project and navigate to APIs & Services > Credentials.
- Configure the OAuth 2.0 consent screen and create OAuth credentials.
- Use the generated
Client ID
andClient Secret
in the.env
file.
- Sign in with Google to authenticate.
- Create and manage tasks through the drag-and-drop interface.
- Use the calendar to view and schedule tasks.
- Customize your task views using filters and priorities.
- Frontend: React, Dnd Kit, Google Calendar API
- Backend: Node.js, Express
- Database: MongoDB
- Authentication: OAuth 2.0 (Google Provider)
This project is licensed under the MIT License.
Happy organizing!