BlueTask is a powerful task management application designed to help you organize and keep track of your tasks efficiently. With a user-friendly interface, BlueTask ensures you never forget an important task.
- Create, Modify, Archive, and Delete Tasks: Manage your tasks effortlessly with intuitive controls.
- User Authentication: Secure your tasks with a login and registration system.
- Task Labels: Organize tasks with customizable labels.
- Trash Bin: Recover accidentally deleted tasks from the trash bin.
BlueTask started as a project for a web development course. The initial requirements were to create a TODO application with various functionalities, such as task description, start and end dates, status, and priority management.
For more details on the initial project, visit: Course Project.
I decided to expand on this project to gain more experience in web development, including:
- Hosting
- Deployment
- Database management
Choosing Vuetify for the CSS framework was a strategic decision because:
- I had prior experience with Vuetify at Koumoul, where I used it extensively.
- It supported my future career plans, as I aimed to secure a work-study program at the same company, necessitating proficiency in Vuetify.
For another course project, I developed a mobile android application. The app was a simplified version of BlueTask, focusing on task management and user authentication. You can find the project here
- Long Tasks: Support tasks with a lot of lines.
- Task Search: Search tasks by name.
- Task Sharing: Share tasks with other users.
- Firebase Firestore: For database management
- Vue.js: The main framework.
- Vuetify: For the UI components.
- Vuefire: To integrate Firebase with Vue.js.
- Create a Firestore Database:
- Set up a Firebase project and enable Firestore.
- Copy the Firebase configuration details for Javascript.
- Environment Variables:
- Create a .env file in the project root with the following variables (given by Firebase)
VUE_APP_FIREBASE_API_KEY=your_api_key
VUE_APP_FIREBASE_AUTH_DOMAIN=your_project_id.firebaseapp.com
VUE_APP_FIREBASE_PROJECT_ID=your_project_id
VUE_APP_FIREBASE_STORAGE_BUCKET=your_project_id.appspot.com
VUE_APP_FIREBASE_MESSAGING_SENDER_ID=your_messaging_sender_id
VUE_APP_FIREBASE_APP_ID=your_app_id- Run in Development Mode:
npm i
npm run dev- Generate Production Files:
npm run build...coming soon
- Design: Inspired by this Figma design and Google Keep.
- Illustrations: Provided by Storyset.
BlueTask is a continuously evolving project, and I am open to feedback and suggestions.
Thank you for exploring BlueTask. Happy tasking!