I'm building SaaS and documenting the process. Day 8: board settings page, more details and tabs

This is the eighth 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

Yesterday I started from API for storing settings. It was easy. I created a generic class that other entities could inherit and update from a dictionary with just a couple of lines:

board.update(board_dict)
board.save()

I added more fields to board: description, company name, and company link.
Then I looked back to the domain name. I thought about how it could be checked. It should be unique, and it should be valid.

So, for the first problem - I just check if such a domain name already exists in the database. For the second problem I replace all non-alphanumeric symbols in the JavaScript and the second time when the board is saved.

My first movement was to separate validation from saving but then I decided to combine them and do validation every time when the settings are saved. If something is not right (the domain name is occupied or it's too long or whatever else) I just don't save the settings and return the error message.

Then I added tabs (https://github.com/saasforge/open-source-saas-boilerpate/tree/master/src/components/tabsControl), it took 5 minutes, and it's how it looks like now (nice, huh? ;-)

UPD. How the tabs were implemented.

1. I used the TabsControl component
2. I added several similar variables describing every tab and the data structure describing the whole control:

const categoryList = <ListComponent itemPlural="categories" 
                                            itemSingular="category"
                                            useIndex={true}
                                            boardId={this.state.board.id} />;
        const typeList = <ListComponent itemPlural="types" 
                                            itemSingular="type"
                                            useIndex={true}
                                            boardId={this.state.board.id} />;
        const statusList = <ListComponent itemPlural="statuses" 
                                            itemSingular="status"
                                            useIndex={true}
                                            boardId={this.state.board.id} />;
        const tagList = <ListComponent itemPlural="tags" 
                                            itemSingular="tag"
                                            useIndex={false}
                                            boardId={this.state.board.id} />;
        const tabsData = [{
            title: 'Settings',
            active: true,
            id: 'firstTab',
            content: settings
        },
        {
            title: 'Cagetories',
            id: 'secondTab',
            content: categoryList
        }, 
        {
            title: 'Post types',
            id: 'thirdTab',
            content: typeList
        }, 
        {
            title: 'Statuses',
            id: 'statuses',
            content: statusList
        },
        {
            title: 'Tags',
            id: 'tags',
            content: tagList
        }];
        return <TabsControl data={tabsData} />;

It's really as simple.

Time spent: 2,5 hours
Total time spent so far: 15 hours