Todo X Factr began as a TypeScript tutorial project led by Dave Gray, aimed at building a simple todo application to learn TypeScript. Originally, the app featured basic functionalities such as adding items to a list, deleting an item, removing all items, and saving to local storage. Inspired to enhance the application, I embarked on a journey of adding new features and revamping the UI, drawing inspiration from a design template by Alex Arutuynov.
The evolution of Todo X Factr includes a comprehensive UI overhaul, the introduction of task item categories, the implementation of observers for dynamic UI updates, and a restructured app divided into distinct sections: the hero section, the task list (app) section, the theme template section, and the item entry section. Additional improvements include focus lock for enhanced accessibility, a custom select box, and a redesigned task list menu offering options to clear all tasks or only completed tasks.
- UI Overhaul: Inspired by a design template from Alex Arutuynov, the app now boasts a modern and intuitive interface.
- Task Item Categories: Introduced categories for better organization of tasks.
- Dynamic UI Updates: Implemented observers to refresh the UI automatically upon modifications.
- App Structure: Divided the application into several sections for improved user experience.
- Accessibility Improvements: Added focus lock to ensure a more accessible interface.
- Custom Select Box: Developed a custom select box for a more cohesive design.
- Tasklist Menu: Redesigned the menu to include options for clearing all tasks or only completed tasks.
- TypeScript: Enhances JavaScript with static type definitions, improving code quality and understandability.
- HTML5: The core markup language for structuring web content.
- CSS3: Empowers the styling of web pages.
- JavaScript: Enables dynamic and interactive web experiences.
Starting that Todo X Factr project was more than just learning TypeScript. It was like taking a trip back in time, back when I first started building websites. TypeScript was like a guide on this journey, but it also reminded me of the basics of HTML, CSS, and plain JavaScript. It was like a refreshing change of pace from the frameworks I've been using a lot lately like React. This project made me realize how great it is to keep things simple sometimes.
So, one of the coolest parts of this project was getting down and dirty with classes in JavaScript. I've been all about functional programming lately, especially with React's focus on functional components. So, I had this thing against classes, like they were this big, clunky way of doing stuff that functions could do better. But this project changed my mind.
In Todo X Factr, I got to play around with classes, and they blew my mind! They're like these super-organized containers for your code, letting you keep everything tidy. But that's not all; they also protect your data like a fortress and let you add new features easily. It was like a whole new world opened up to me. I realized that every part of programming has its own special job to do.
When React shifted its focus toward functional components, I was over the moon. I'm all about simplicity and elegance in code, so it was a major win for me. But this project taught me that simplicity doesn't mean avoiding certain things like classes. It's more about using the right tool for the job. It was a lesson in balance—taking the new stuff and mixing it with the old stuff in a way that makes sense.
Yo, this project wasn't just about coding; it was a wild ride of learning and rediscovering stuff. It showed me that understanding the basics of web dev is key, no matter what fancy frameworks or libraries people are using. As I played around with TypeScript, HTML, CSS, and vanilla JavaScript, I leveled up my skills and got a newfound respect for the whole web development scene. It was like a journey of self-discovery for my inner web dev.
So, to wrap it up, Todo X Factr wasn't just about learning TypeScript. It was a chance to go back to basics, question our assumptions, and appreciate the different ways people do software development. It made us realize that learning and growing in this field isn't just about the latest and greatest, but also about understanding the roots of web development.
- Custom Categories: Allow users to create their own task categories.
- Enhanced CRUD Operations: Introduce more CRUD functionalities for task items.
- Task Scheduling: Implement the ability to schedule tasks for future dates.
- Search Functionality: Add a feature to search through tasks.
- Notifications: Implement notifications to alert users about task deadlines or updates.
- Responsive Design: Implement CSS media queries to ensure the app is fully responsive on larger screens, providing an optimal viewing experience across all devices.
- Drag and Drop: Introduce drag and drop functionality for task items, allowing users to easily reorder tasks according to priority.
- Task Prioritization: Enable task prioritization, allowing users to mark tasks as high, medium, or low priority.
- Internationalization: Prepare the app for internationalization, planning to support multiple languages to cater to a global audience.
To experience Todo X Factr locally, follow these steps:
git clone https://github.com/Timbar09/Todo-X-factr.git
cd Todo-X-factr
npm install
npm run devAccess the application at http://localhost:5173.
This project, while personal, welcomes contributions. If you discover bugs or have suggestions for improvement, feel free to open an issue or submit a pull request.
Initial project tutorial by Dave Gray.
Design inspiration from Alex Arutuynov.
This project is open source and available under the MIT License.