Overview
Just one week before the Makers bootcamp, I created a to-do list application using ReactJS and styled it with TailwindCSS.
The application allows users to create a list of tasks they need to complete and mark them as done as they progress. To ensure high-quality and reliable code, I incorporated automated testing using Jest and Cypress.
This application is easy to use and has a user-friendly interface that allows users to add new tasks, edit or delete existing ones, and filter tasks based on their status. It also features a responsive design that works seamlessly on different devices. This project helped me improve my ReactJS skills, and I enjoyed creating a practical application that can be used by anyone to organize their tasks efficiently.
Tech stacks
ReactJS, TailwindCSS, Jest, Cypress
Task
Build a to-do list with CRUD functionalities and a user-friendly interface. No database is involved but localStorage.
User stories
- User should be able to see a list of todos
- User should be able to add new todos to the list
- User should be able to filter todos by the status of completion
- User should be able to remove todos from the list
Challenge
State management Managing state in a React application can be challenging, especially when dealing with multiple components that need to share data. To overcome this challenge, I used React hooks, such as useState and useEffect, to manage state and update the user interface.
Testing a front-end application Testing a front-end application can be challenging, as it requires testing both the UI and the functionality of the application. To ensure the reliability and quality of the code, I used Jest and Cypress for automated testing. This allowed me to test different scenarios and catch any bugs or issues early on in the development process.
Approach
Diagram helps Before starting the project, I created a diagram to visualize the components and their relationships. This helped me to understand the structure of the application and plan my implementation accordingly.
Simple design layout I focused on creating a simple and intuitive design layout for the application, which would make it easy for users to interact with the interface and complete their tasks.
Learning from tutorials and documentation I utilized online tutorials and documentation to improve my knowledge of ReactJS and TailwindCSS, and to learn how to effectively use automated testing tools like Jest and Cypress. I also relied on open-source libraries and plugins to help me complete the project efficiently.
Result
This project has been completed within 4 days. I spent around 2-3 hours per day.
What I've learnt
The power of all kinds of testing Through this project, I learned the importance of incorporating testing into the development process. Automated testing with Jest and Cypress allowed me to catch bugs and issues early on and ensure the application worked as expected.
Quality over quantity I also learned that it's better to focus on delivering high-quality code rather than trying to complete a large number of features. By prioritizing the most important features and ensuring they were thoroughly tested, I was able to deliver a reliable and functional application.
Planning before coding Finally, I learned the importance of planning before coding. By creating diagrams and designing a simple layout, I was able to save time and ensure that the development process was organized and efficient. This helped me to deliver the project within a short timeframe while still maintaining a high level of quality.
