Hello, everyone! My name is Terence, and I’m currently a student at Moringa School as well as a startup founder at Doros. I’m thrilled to share my journey of building my first full application using JavaScript. As someone who runs a startup in the wedding space, I decided to create a Wedding Task Management App. This project was a way to practice my coding skills while building something that could benefit my business. The process has been challenging but incredibly rewarding, and I can’t wait to tell you all about it.
I choose this idea because in the world of weddings, coordination is everything. There are countless tasks that need to be managed by different committee members to ensure that the event goes off without a hitch. This inspired me to create a tool that would help organize and track these tasks more efficiently. I wanted to make something that would not only help couples on their big day but also let me practice and improve my coding skills. I also built this because this is a feature we are also planning to introduce for couples on our platform and wanted to test out the best UI for it.
Starting at Moringa School has been an exciting adventure. Learning JavaScript and applying it to build a full-fledged application has been a steep learning curve. Its been very hard to how to work with arrays especially as well as combining fetch, and functions to build an application that actually works.
For me, learning to code is not just about building this one app. It’s about equipping myself with the skills to build products faster and better for couples who rely on my startup. Being tech-savvy means I can turn ideas into reality more swiftly and efficiently, making a real difference in the wedding industry.
Features of the Wedding Task Management App
The app allows users to:
• Add, view, and manage tasks for different coordinator roles.
• Assign committee members to specific tasks.
• Mark tasks as completed and move them to a separate section.
• Persist data using localStorage to ensure no information is lost.
• Enjoy a responsive design thanks to Tailwind CSS for a seamless experience across devices.
Building the App
Setting Up the JSON Server
To simulate a backend, I used json-server. This made it easy to handle data without setting up a full server. The data in db.json allowed me to focus on the front-end functionality and ensure everything worked smoothly.
HTML Structure
The HTML file sets up the basic structure of the app, including the navbar, task sections, and modals for adding tasks and committee members.
Styling
Design is key for me, and I wanted the app to look polished. I used Tailwind CSS for styling. It’s a utility-first CSS framework that makes it easy to create responsive and beautiful designs.
Dynamic Functionality with JavaScript
The core functionality is handled in JavaScript. This includes fetching tasks from the JSON server, adding new tasks and committee members, marking tasks as completed, and saving data with localStorage.
Building this application was not easy. Managing state across different sections and ensuring data persistence were some of the key issues I faced. However, these challenges were valuable learning experiences that improved my problem-solving skills. It actually took me two days to fix a bug that was not allowing tasks to be fetched from the json server. I almost gave up to be fair but this taught me that coding is not only about building but also debugging. And that debugging sometimes takes time and if you persevere you can always figure it out and make the app work.
Designing the user interface to be responsive and visually appealing was another critical aspect for me. Using Tailwind CSS made the process smoother, and I learned a lot about creating clean and responsive designs.
Conclusion
This project has been a fantastic learning journey, and I’m proud of what I’ve accomplished. It has given me the confidence to take on more complex projects and further develop my skills. If you’re also starting out in coding, I encourage you to dive in and start building. The challenges will only make you stronger, and the sense of accomplishment is unmatched.
Thank you for reading about my journey. Stay tuned for more updates as I continue to learn and build!
This format includes suggestions on where to place images within the blog to help illustrate your story and make it more engaging for readers.
Top comments (0)