Building a Reminder App with Html, Css & javascript
Published: 2024-07-10 02:46:15



Introduction

I am excited to share the journey of building a Reminder app, a React Native application developed as a portfolio project.The project kicked off on July 4, 2024, and had to be completed by July 11, 2024. Our goal was to create an App that manages different tasks effortlessly, Organize, prioritize, and track your to-dos seamlessly using this user-friendly web application.

Target Audience

This application is designed for anyone who wants a simple and user-friendly way to manage their to-do list.  Just like keeping a note in your pocket, this app allows you to easily capture, organize, and track your reminders –  all in one convenient place.

Personal Focus

My personal focus was on ensuring efficient state management and a clean, maintainable project architecture. 

The Story Behind the Project

I am passionate about productivity and helping people stay organized. We often have discussions about the best ways to manage tasks and to-do lists. Growing up, I didn't have access to many resources for staying on top of my commitments. This project was a way for me to combine my interest in fostering organization with my technical skills to create a tool that empowers users to manage their tasks effectively.

One particular memory fuels my passion for this project. I vividly remember the satisfaction of completing a task and the sense of accomplishment that came with it. This project sparked a desire to create something that could bring that same sense of achievement to users as they check off their reminders and reach their goals.


Summary of Accomplishments

This user-friendly reminder app empowers you to stay on top of your tasks with features inspired by intuitive organization tools:

Task Categorization: Organize your reminders into categories for better focus and prioritization. (instead of Product Browsing)
Rich Task Details: Add detailed descriptions and due dates to each reminder for clarity and context. (instead of Product Details)
List Management: Effortlessly add, edit, and check off reminders to keep your list streamlined. (instead of Cart Management)
Completion Tracking: Gain a sense of accomplishment as you visualize completed reminders and track your progress towards goals.


Technologies Used

Frontend: Html, Css and Javascript

Architecture Diagram
Key Features
Product Browsing: Users can explore various categories.

The Biggest Hurdle: Keeping Reminders Up-to-Date

Challenge:

One of the biggest hurdles in developing this reminder app was ensuring that updates to reminders were reflected instantly across the entire application. This meant that regardless of which screen the user was on (adding a new reminder, viewing a specific reminder, etc.), any changes should be immediately visible.

Solution:

To achieve this seamless experience, I focused on implementing a robust state management system. This involved setting up mechanisms to track changes, update the central data source, and efficiently communicate those updates to all relevant parts of the app. Additionally, considerations were made for potential data persistence (optional, depending on app functionality) to ensure reminders remain even after the app is closed and reopened.


Conquering the Challenge: Real-Time Reminders

Success! After persistent effort and debugging, I achieved real-time updates for reminders across the app. This smooth experience is vital for user satisfaction and provided valuable insights into managing dynamic data.

Key Learnings:

State Management: The project solidified the importance of efficient state management for complex applications. 
Real-Time Updates: I gained valuable experience in implementing real-time updates within the app itself.
User-Centric Design: The focus on seamless updates reinforces the importance of a user-friendly and intuitive interface.

Personal Growth:

Problem-Solving Prowess: Overcoming the real-time update challenge honed my problem-solving skills.

Future Vision:

Enhanced Security: Implementing a robust user authentication system for added security. 

Intuitive Navigation: Integrating a search function to streamline reminder retrieval.

Delightful Design: Elevating the user experience through design improvements and animations.


About Me

I am a passionate software engineer with a keen interest in building user-centric applications. This project allowed me to combine my technical skills with my love for creating intuitive user experiences. You can find more about this project and my other works on my GitHub and LinkedIn profiles.

GitHub: Project Repository (https://github.com/elanjaja/Todo-List-App)

LinkedIn: My LinkedIn Profile (https://www.linkedin.com/in/elan-jaja/)

Deployed Project: Reminder App (https://todo-list-app-delta-gules.vercel.app/)

Thank you for reading about my journey in building this Reminder App. I look forward to applying these skills in future projects and continuing to grow as a software engineer.