I'm building SaaS and documenting the process. Day 17 & 18: working on the public page

This is the eighteenth episode in the reality show about the development SaaS app from scratch. The previous episodes:

Open SaaS development from scratch: why and what
Day 1: requirements and UI wireframes
Day 2: admin pages
Day 3: user pages
Day 4: database models, database update, and a couple of new wireframe pages
Day 5: started API and made changes to the database models
Day 6: created the admin board and new problems
Day 7: board settings page
Day 8: board settings page, more details and tabs
Day 9: board settings page, more tabs
Day 10: finished all 4 meta lists for board settings page
Day 11: experimenting with subdomains
Days 12 & 13: subdomains, separate apps, and user interface
Day 14: end-user UI for creating and editing posts
Day 15: end-user UI - bug fixes and list of user's posts with paging
Day 16: the skeleton of public page with the list of posts

I spend 2 days (just one hour the first day) to finish the primary logic for the public posts list. The task didn't look hard but it turned out there is a tricky part: routes. I implement the front-end with React and it's a really great library. It allows to set up all possible routes and then easily figure out if the current route has some parameters.

So, for my functionality I tracked 2 parameters: one can be category, type of post, status, or a tag, and the second one is the page number, and the page number can be omitted. For example, these 2 routes should return the same result:

• /category/design
• /category/design/page/1

Another tricky part I wanted the page would not reload every time and only grabs the data but the URL should be updated too. It's about the "Load more" button or any other links (that do filtering) clicked on the page. It turned out this requirement can be implemented with the same Switch router component bit the core component that should read parameter and load the new portion of data, should be called componentWillReceiveProps method instead componentWillMount that is called only once.

Another tricky part was I had to figure out if I need to clear up the list or just concatenate. For example, if you click the "Load more" button the lists should be concatenated and as soon as there is a new parameter or a new value the list should be cleared up.

Here is the screenshot of the working prototype. It looks very ugly but it's working :)

And I also check if a user is authenticated, then I show the dropdown menu with links to profile and logout and button to create a post (the button is shown anyway but if user is not authenticated it open the login page).

Time spent: 1 + 4 hours
Total time spent so far: 44.5 hours

Thanks! Stay tuned!