Project planning and basic user interface (Dev Journal #2)

Previous: Rewriting a sales system | Next: Setup backend server

Today I found a really good blog post, the author is putting in a list of his favourite technologies for modern web development, I think this is very useful information for a brand new developer like me. Although I’ll not use all the technologies in this project, in fact, I won’t do any unit test and even no version control to keep things simple, not a good idea.. I know. Anyways, let’s start the project by developing the user interface.

Directory structure

I’ll use the Ducks Proposal, so the folder structure will be something like this:

Directory Structure

CSS Template

You may wonder what “angle” (right below the “system” folder) is in the above directory structure, it is a bootstrap template I brought to give a better look and feel beyond standard bootstrap theme.

Application routes

Essentially the application have the following routes:

/login (login the system, the user accounts are assigned by me)
/enquiries (view the list of all enquiries)
/enquiries/new (create a new enquiry)
/enquiries/:_id/edit (edit an enquiry)
/enquiries/:_id/documents (view the list of all documents of an enquiry)
/enquiries/:_id/documents/new (create a new document for an enquiry)
/documents/edit/:_id (edit a document)
/reports (view all sales reports, and payment record reports)

Iterations

I’ll divide the entire development process into 4 iterations:

  1. Sales related UI (customer enquiries)
  2. Document related UI
  3. Setup backend server and implement all data fetching logics
  4. Implement all data manipulation logics
  5. Login page and user account related functionalities

Iteration 1: Component Tree

When constructing the component model of the application, I use the container component pattern.

Each route is a top-level container

EnquiryListView
NewEnquiryView
EditEnquiryView

Second level container / component pairs

EnquiryListContainer / EnquiryList
NewEnquiryFormContainer / NewEnquiryForm
EditEnquiryFormContainer / EditEnquiryForm

Some layout related components

Header
Footer
Sidebar
EntityList (a general list component to be used by both EnquiryList and DocumentList components)
EntityForm (a general form component to be used by all Form components)

Iteration 1: User interface

  1. develop all the above components, one at a time
  2. setup modules/enquiries.js for initialState, actions, and reducers
  3. setup routes.js
  4. setup FakeRest to simulate REST api server data fetching
  5. do not handle any data manipulation logic yet
EnquiryListView (Prototype)

Conclusion

So now all the sales UI is developed, and successfully displaying data fetched from a fake server, so iteration 1 is completed. Next step I’ll continue to develop iteration 2 (document related UI), since this is quite similar to iteration 1 I’m not going to write a journal on that. So my next journal will be on iteration 3 (setup backend server).