TaskPro is an intuitive Kanban board application designed to help users organize and manage their projects and tasks efficiently. Inspired by tools like Trello or Jira, TaskPro offers a seamless experience for tracking progress and staying productive, ensuring that deadlines are never missed.
- User Authentication: securely create an account and log in, or use Google authentication for quick access to your personal workspace.
- Password Recovery: easily reset the account password by entering your email and receiving a reset link directly to your inbox.
- Customer Support: get in touch with our support team by filling out a form with your comment and sending it directly for prompt assistance.
- Edit Profile: customize your profile by updating your name, email, and optionally adding a profile picture.
- Select Theme: choose from three available themes: light, dark, or violet, to personalize your application's appearance.
- Project Management: create, update, and delete boards, which will be organized in a list for easy selection.
- Column Management: configure each board by creating, updating, and deleting columns for optimal structure and making it easier to organize tasks into different categories.
- Card Management: create, update, and delete cards within columns to represent tasks that include essential information such as name, description, priority, and deadline.
- Filtering: select the priority level to display only those cards that match the chosen priority, making it easier to focus on the desired tasks.
- Technologies: React, TypeScript, Redux, Styled-components
- Project Setup:
- Vite Template: for a swift and efficient build process.
- Deploy: Vercel.
- Type Safety: ensured by TypeScript for strict type-checking and an enhanced development experience.
- Linting: enforcing ESLint configuration for a clean and robust codebase.
- Code Organization::
- Module Type: ECMAScript Modules (ESM).
- Components Type: reusable functional components.
- Custom Hooks:: developed to encapsulate and reuse logic across different components, enhancing code maintainability.
- Utils:: helper functions implemented to perform common tasks, improving code readability and avoiding duplication.
- State Management:
- Redux: used for centralized state management in the application.
- Redux Toolkit: integrated to simplify Redux configuration, by utilizing slices to modularize state logic, creating actions and reducers more efficiently, and streamlining the setup process for improved code readability and maintenance.
- Redux Persist: implemented to persist the application state across sessions, ensuring data consistency and improving the user experience by retaining state even after page reloads.
- API Client:
- Created a custom "Axios" instance to encapsulate the configuration and logic, ensuring consistency and reusability across the application.
- Configured to handle HTTP requests to the server, with a base URL and credentials included.
- Implemented response interceptors to manage authentication errors, initiating a forced logout for user reauthentication when a 401 Unauthorized response occurs.
- Routing :
- Depending on the user's authentication status, the application routes are accessible as follows:
- Restricted Routes: can only be accessed when the user is not authenticated.
- Protected Routes: can only be accessed when the user is authenticated.
- Not Found Page: the application handles non-existent routes by displaying this page with a 404 error message.
- Shared Layout: used this approach to handle shared components in one place, reducing code repetition, simplifying maintenance, and improving page load times.
- Route-centric: this process splits the code based on the application's routes, using lazy and Suspense to load each route's code only when needed, thus optimizing initial load times and improving overall performance.
- Depending on the user's authentication status, the application routes are accessible as follows:
- Styling:
- Styled-components: used for writing isolated styles for each component, ensuring clean and maintainable code, including automatic prefixing for cross-browser compatibility, theming management, dynamic styling through props, and nested syntax.
- Cross-Browser Compatibility: ensured through the use of "modern-normalize" and custom reset properties, providing consistent rendering across different browsers.
- Responsive Design:
- Applied through a mobile-first approach, ensuring the application is optimized for mobile devices first.
- Using media queries and flexible layouts to adapt the design effectively to various devices and screen dimensions.
- Using "react-responsive" library, which conditionally renders components based on the size of the viewport.
- Utilized responsive images and backgrounds, with dimensions and versions tailored to ensure optimal visual experience across different screen sizes and pixel densities - Retina display support.
- Sprite Technique: consolidated all vector icons into a single sprite file, enhancing performance by reducing server requests and improving page load times, while making icon access and management easier.
- Themes: the application supports three distinct themes: dark, light, and violet, allowing users to choose their preferred visual appearance.
- Transitions: implemented to provide smooth effects during user interactions and particularly when changing themes, maintaining consistency across various elements.
- Animations: incorporated custom animations and animations from the "animate.css" library to enrich the visual appeal and create an engaging user experience.
- User Experience (UX):
- Navigation: designed to be intuitive, guiding users and clearly indicating their current location within the application.
- Loading Screen: used for the login and logout processes, providing visual feedback and improving the user's interaction with the application.
- Loading Spinner: displayed at key moments in the application, notably when awaiting server responses, providing users with real-time feedback.
- Modal Closure Options: when a modal is open, it can be closed in multiple ways: by clicking the "X" button, by pressing the "Esc" key, by performing a mouse down action outside the modal, or automatically upon submitting the form within the modal and receiving a positive response from the server.
- Form Feedback:
- Placeholders: implemented to indicate the necessary data for each field, guiding users in completing the forms correctly.
- Error Indicators: added visual effects, such as red borders and error messages, to alert users when a field is required or contains invalid data.
- Submit Button: becomes disabled if any errors are detected, preventing the submission of incorrect data to the server.
- Password Visibility Toggle: included a show icon for password fields, allowing users to toggle the visibility of their password, enhancing usability.
- Notifications: utilized "react-toastify" library to display different types of notifications, including success, error, and warning messages, particularly when a response is received from a server request, providing immediate feedback to users.
- Forced Logout: implemented a mechanism that, upon receiving a 401 response from the server (indicating the user is not authorized), forces a logout, requiring the user to reauthenticate.
- Drag & Drop: this feature allows users to easily move and organize cards within the application, enhancing usability and interaction efficiency.
- Ellipsis Tooltip: using the "tippy.js" library to handle visually long elements by truncating them and displaying an ellipsis, which reveals the full text when users hover over it, enhancing readability.
- Other Details:
- Forms: utilizing the Formik library to build forms, ensuring efficient handling and a user-friendly form management experience.
- Data Validation: using Yup as a complementary library to Formik forms, ensuring robust data validation and form reliability.
- Cloud-Based Assets: used Cloudinary to store and manage application assets like background images, enhancing performance and load times via cloud services.
- Technologies: Node.js, Express, TypeScript
- Database: MongoDB
- Object Data Modeling: Mongoose
- Tools: Postman, MongoDB Atlas, MongoDB Compass, Google Cloud Platform, Cloudinary
- REST API
- Project Setup:
- Module Type: ECMAScript Modules (ESM)
- Deploy: Vercel
- Type Safety: ensured by TypeScript for a more reliable and maintainable codebase.
- Linting: ESLint Configuration for a clean and robust codebase.
- Environment Variables: managed using Dotenv for secure configuration of sensitive information.
- Nodemon: automatically restarts the server upon detecting changes in source files, enhancing development experience.
- Authentication:
- Methods:
- Register / Login: using user credentials
- Google OAuth: using user Google account
- Upon successful authentication:
- Token pair generation:
- Access Token: JSON Web Token (JWT) with a lifespan of 15 minutes
- Refresh Token: Random bytes token, created using crypto, securely stored in the database
- Server-Side Cookies Response:
- accessToken Cookie: valid for 15 minutes
- refreshToken Cookie: valid for 24 hours
- Token pair generation:
- Methods:
- Authorization: in order to access protected routes and private resources, requests must pass through an authorization layer represented by the jwtAuthMiddleware.
- Middleware:
- jwtAuthMiddleware:
- Uses the "passport-jwt strategy" to decode the JSON Web Token (JWT) from the accessToken Cookie and search for the user in the database.
- If the accessToken is expired, the middleware attempts to use the refreshToken from the refreshToken Cookie, to find the user.
- If the user is found using the refreshToken, the token pair is regenerated, and access to the route is granted.
- If neither accessToken nor refreshToken are valid, access to the route is denied, and a 401 response is sent.
- googleAuthMiddleware:
- Uses the "passport-google-oauth20 strategy" to handle user authentication through Google.
- Searches for the user in the database based on the information received from Google.
- If the user doesn't exist, it creates a new user with the provided details.
- cookieParserMiddleware: uses the "cookie-parser" library to parse cookies from client requests.
- validateTokenMiddleware: checks the validation token, which can be used in two scenarios: Google authentication process and password reset procedure.
- multipartMiddleware: uses the "multer" library to manage multipart/form-data.
- corsMiddleware: uses the "cors" library to allow secure cross-origin requests exclusively from the client's application.
- loggerMiddleware: uses the "morgan" library to provide logging for HTTP requests and responses, enhancing debugging and monitoring processes.
- missingRouteMiddleware: handles missing routes by sending a 404 response with a "API route not found" message.
- errorMiddleware: captures all errors from the code and sends appropriate responses based on the error type.
- jwtAuthMiddleware:
- Other Details:
- Bcrypt: provides secure hashing of passwords to protect user credentials.
- Cloudinary: ensures the secure upload and storage of user profile pictures in the cloud, generating a link to the resource.
- Nodemailer: sends confirmation emails to users after receiving support inquiries and handles sending password reset links.
- Swagger: used to document and test the API endpoints interactively.
- Data Validation:
- Request Validation: uses Joi library as the first layer to validate received data, ensuring it meets the required format and constraints.
- Database Validation: Uses Mongoose Schema validation as the second layer to enforce data integrity and constraints when storing data in MongoDB.
