Octagon - Tech Blog
December 05, 2018 to January 15, 2019
A tech blog built using the Angular Framework and Firebase. It uses Flamelink as the CMS for managing all the articles on the website. The website also supports push notifications that are sent to subscribed users when a new article is published.
Contents
Technologies Used
| Name | Description |
|---|---|
| Angular | Angular is a TypeScript-based open-source web application framework |
| Cloud Firestore | Cloud Firestore is a NoSQL document database that lets you easily store, sync, and query data for your mobile and web apps - at a global scale. |
| Firebase Authentication | Firebase Authentication aims to make building secure authentication systems easy while improving the sign-in and onboarding experience for end-users. |
| Bulma | Bulma is a free, open-source framework that provides ready-to-use frontend components that you can easily combine to build responsive web interfaces. |
| Flamelink | Flamelink.io is a headless Firebase CMS that integrates with Cloud Firestore and the Realtime Database. |
Home Page
The home page is simple and displays the title along with Octagon coming from the side/bottom depending on the screen. When the user scrolls down, they can see the Blog section with 3 latest articles displayed in neat cards. The cards have been designed using the Bulma frameworks and the number of cards in a row changes depending on the screen size.
Blog Page
The blog page displays all the articles in a neat grid. The grid is completely responsive and changes the number of cards in a row depending on the screen size. The user can also filter the articles by category by selecting the category from the navbar. Alternatively, the user can choose to view all the articles at once.
Article Page
If the user chooses to read an article, they are taken to the article page which displays the entire contents of the article. This page has both light and dark reading modes that the user can switch easily using the floating action button provided. At the end of the article, the user can choose to share the article with others using the sharing buttons. Additionally, there is a like button that can be used to like the article.
Flamelink CMS
This project uses Flamelink as the CMS (Content Management System) to manage all the articles. Flamelink is a CMS that has been built to work best with Firebase Cloud Firestore and Realtime Database. A Blog Schema was created in Flamelink which defines the structure of an article with details such as the title, date of publication, author, category, summary, and content. The content of the article is written using the Markdown Syntax. The following image shows an example of using the WYSIWYG (What you see is what you get) editor provided by Flamelink which converts the text written by a normal user into Markdown Syntax.
