Write It Down (Frontend)

Quick Install (node js) | About | Features | Authors | Live Demo

Write It Down - Frontend is a free to use fully-featured SPA blog built with Angular 8.

(Also, don't forget to check out the wid-blog-backend. 😉)

About

Write It Down - Frontend is a blogging Single Page Application that utilizes a REST API (wid-blog-backend to be more precise). It has all the basic features that a blogger needs including posts, pages, tags, admin dashboard, etc. It includes a really useful yet minimal and distraction-free WYSIWYG editor powered by TinyMCE.

This project (especially the inline post editor) was inspired by Ghost and Medium but it only includes the minimal and most necessary features.

Features

Write It Down (Frontend) is featured enriched SPA. It has almost everything a true writer needs to start writing their thoughts down. Not just the functionality but it is also responsive and minimal in its user interface. It has a mobile-first approach responsive design.

It is divided into two feature modules.

• The primary and public module is home. This module is responsible for showing posts, pages, author-page, tags, and tag-page to the public users.
• The second and the most important feature module is admin. It is lazy-loaded and is only available for users that are registered in the database (they have to log in to access it). This module contains all the core features such as posts, pages, tags, users, and settings, etc.

User Authentication

As stated above the admin dashboard is protected by an authentication guard and is only accessible if you log in. JWT is mainly used for authentication. Once the user logs in their details along with the token is saved to local storage. JWT token expires after a specific time (after 1 hour in wid-blog-backend). This web app automatically refreshes the expired user token if it gets an unauthorized error.

This SPA also contains role-based authorization which basically means that some features are limited to users with specific roles.

Role based authorization is based on these three roles:

• superadmin: Can do all actions such as creating a post (article), a page, adding tags, adding new users or editing existing users and changing blog settings.

• admin: Can do all the things a superadmin can do but can't create or modify existing superadmins and their posts.

• editor: Can only show their content, edit their own profile but can't modify or show or modify the content of superadmins or admins.

True WYSIWYG Editor

Ali Raza has turned TinyMCE(a rich text editor) into an experience while integrating it into this web app. You'll get a true WYSIWYG experience because the post looks the same in the editor and the actual public blog. The included editor has the following key features:

• Code syntax highlighting: You can add code snippets of almost all major technologies.
• Basic blog post features: h2, h3, blockquote, link, bold, italic, and lists.
• Image upload: Images are first uploaded to the API server and then get included in the blog-post.

  Apart from all the above key features, it has a lot of other miscellaneous features such as:

• A primary navbar at the top containing all the published pages.
• A secondary navbar(which is scrollable if overflow) containing all the tags.
• Individual tag page which indexes all the posts containing a specific tag.
• Author page which displays author profile and all their published posts.

So, a web app coded by just one individual, having this much beauty, is worth trying right? 😌

Getting Started

These instructions will get you a copy of this project running on your local machine in dev mode.

Prerequisites:

• A headless CMS (RESTful) that provides the required routes and backend features such as wid-blog-backend (recommended).

• Node JS

• Git

• A command line interface

Cloning repository:

Start by cloning the repository on your local machine using git:

git clone https://github.com/0xaliraza/wid-blog-frontend

Change directory to the project folder:

cd wid-blog-frontend

Install all npm modules:

npm install

If you have already setup wid-blog-backend (a headless CMS made specifically for this web-app) and it is availble at http://localhost:8000 then you are good to go. Otherwise if you have coded your own backend CMS which supports all the required routes and is available at some other URL then you'll need to configure angular environments before continuing.

Now lets serve the app locally:

npm start --o

By now, you should have a running Write It Down (Frontend) instance at http://localhost:4200 without any errors. You can add some users in the backend database and login with those credentials. Cheers! 🍻

Authors

Ali Raza (me) 🙃

Find Me Online

Feel free to contact me for any kind of help or information. Let's get connected! :)

• Website

• Github

• Twitter

• Medium

• Linkedin

To Do

• Testing
• Search buttons
• Hybrid Rendering
• CI/CD