In this post
I am not building the traditional to-do app but the concepts are almost the same. It’s a phone book or contact manager app where a user can add contacts, view, update, or delete them [CRUD].
Features of the Application
To start with we will implement only the simple things,
- A user should be able to see all the contacts.
- A user should be able to add a contact.
- A user should be able to modify a contact’s detail.
- A user should be able to delete a contact from the phone-book.
Once we will be done with it, we can implement following features,
- Search with name or phone number.
- Sort by name in ascending or descending order.
- Maybe more.
Components of the Application
As you might have guessed, this application will have three main components,
- A form to submit data.
- A container to display all contacts.
- A component to display one contact with option to modify or delete.
How should your application look?
This is upto you. Once we get started, you can think of the design. But the basic idea is, as discussed above, there will be a container which should contain all the contacts.
Ideally, you should have a module for one feature. We can consider this app as one module in a big application, and we can create a module for this.
Many people organise codes in two different styles. Some like to keep all models in one directory, all views in one, and so on. And Some people like to distribute the code module-wise. I am using the latter approach, you can use whatever suits you. The idea is to separate code in logical structure so that it is easy for any developer to access them easily. Create a directory and then create directories and files like following directory structure:
|____index.html |____README.md |____styles | |____main.css |____scripts | |____main.js | |____modules | | |____contacts | | | |____contactItem.js | | | |____contactsViewTemplates.js | | | |____contactsView.js | | | |____contactsModel.js | | | |____contacts.js | | | |____contactsController.js