How to create a fully functional blog with Alpas, Kotlin, and Tailwind — part 3: validation rule…
Tags: blog, webdev, development, alpas
Published: 2020-03-13 17:30:34

---
title: How to create a fully functional blog with Alpas, Kotlin, and Tailwind — part 3: validation rule…
published: true
date: 2020-03-13 17:27:12 UTC
tags: blog,web-development,development,alpas
canonical_url: 
---

### How to create a fully functional blog with Alpas, Kotlin, and Tailwind — part 3: validation rule, add the front-end, and blog away!

![](https://cdn-images-1.medium.com/max/1024/1*b-njYwIdb4BnyjfERKKcXA.png)

This final part of the series will mainly focus on the front-end. For the front-end, we are styling using [TailwindCSS](https://tailwindcss.com).

But first, let’s create a validation rule to make ensure metadata and blog content are included in the post before we write to the database.

### Step 8: Create a validation rule

[_steps continued from part 2_](https://dev.to/armiedema/how-to-create-a-fully-functional-blog-with-alpas-kotlin-and-tailwind-part-2-setup-service-38b2)

There is no out-of-the-box rule to support validating the blog post content. Luckily, it’s easy to create a new custom rule that can be called to validate a form entry.

In this case, we want to validate all of the meta data fields are accounted for and that there is at least some content in the body of the blog post.

1. Create a new validation rule using the `./alpas make:validation-rule BlogValidate` command
2. Open up the **BlogValidate.kt** file and add in the code from [Blogify repo on GitHub](https://github.com/armgitaar/blogify/blob/master/src/main/kotlin/rules/BlogValidate.kt)
3. After updating the file, don’t forget to import the new rule into the **BlogController.kt** file

The rule simply checks to make sure all of the required content is present. As an added exercise, try to see if you can customize the validation to tell the front-end exactly which piece(s) failed validation.

**Now all we need to do is create the front-end!**

#### 📄 Related Documentation

- [Validation Rules](https://alpas.dev/docs/validation#validation-rules)

### Step 9: Create the front-end

For the front-end of the website, we will be using [Tailwind CSS](https://tailwindcss.com/). The [Alpas](https://alpas.dev) starter project already comes pre-installed with Tailwind. All we need to do is customize it a bit and then apply some classes to create a slick looking interface!

For the majority of the step, feel free to get creative and let your design-side shine! 👩‍🎨

1. Open the **app.less** file and let’s add some custom CSS to target HTML tags that were applied during the markdown to HTML conversion
2. Add the CSS from [GitHub repo](https://github.com/armgitaar/blogify/blob/master/src/main/resources/css/app.less); alternatively, you can work with the tailwind.config.js file to customize HTML tag styles
3. Under the templates directory, create the following files
4. **\_footer.peb** and add contents from [GitHub repo](https://github.com/armgitaar/blogify/blob/master/src/main/resources/templates/_footer.peb)
5. **\_header.peb** and add contents from [GitHub repo](https://github.com/armgitaar/blogify/blob/master/src/main/resources/templates/_header.peb)
6. **\_nav.peb** and add contents from [GitHub repo](https://github.com/armgitaar/blogify/blob/master/src/main/resources/templates/_nav.peb)
7. **blog.peb** and add contents from [GitHub repo](https://github.com/armgitaar/blogify/blob/master/src/main/resources/templates/blog.peb)
8. **editblog.peb** and add contents from [GitHub repo](https://github.com/armgitaar/blogify/blob/master/src/main/resources/templates/editblog.peb)
9. **marked.peb** and add contents from [GitHub repo](https://github.com/armgitaar/blogify/blob/master/src/main/resources/templates/marked.peb)
10. **new.peb** and add contents from [GitHub repo](https://github.com/armgitaar/blogify/blob/master/src/main/resources/templates/new.peb)
11. Modify **welcome.peb** by replacing current contents with contents from [GitHub repo](https://github.com/armgitaar/blogify/blob/master/src/main/resources/templates/welcome.peb)

💡 If you change the css.less file or the tailwind.config.js file, you will need to recompile your project. You can do that by installing yarn for your project and then run `yarn development` or `yarn watch` commands

### 📄 Related Documentation

- [Tailwind CSS](https://tailwindcss.com/)
- [Pebble Templates](https://alpas.dev/docs/pebble-templates)
- [Mixing Assets](https://alpas.dev/docs/mixing-assets)

### Step 10: Run the app and blog away!

Now for the fun part - run your new blog website on you local environment and blog away!

If you want to take your blog all the way, you can do the following:

1. Add [authentication](https://alpas.dev/docs/authentication) and put the add/edit/remove blog post controls behind an authentication gate
2. [Provision a server and deploy](http://localhost:8082/docs/deployment) your blog so that it is live on the world wide web for everyone to read

I hope that you found this blog about building a blog useful! If you create your own blog, I want to see it! [Tweet](https://twitter.com/ARMiedema) me a screenshot/link or request to add your blog post to [Alpas Resources](https://github.com/alpas/resources). 😍

[Read part 1](https://dev.to/armiedema/how-to-create-a-fully-functional-blog-with-alpas-kotlin-and-tailwind-part-1-setup-project-112g)
[Read part 2](https://dev.to/armiedema/how-to-create-a-fully-functional-blog-with-alpas-kotlin-and-tailwind-part-2-setup-service-38b2)

* * *