Devlog is a web application built to make blogging an easy and accessible task to all developers

PROJECT PHILOSOPHY • WIREFRAMES • TECH STACK • IMPLEMENTATION • HOW TO RUN?

Developers spend a lot of time trying to achieve a goal, fixing a bug, or refactoring code. The idea behind Devlog is to be the go to place for devs, a place where they can write down their thoughts, or document their latest ideas around a community that share their same interests.

Reasons why developers should blog:

• Teaching others will improve your skills and make you a better programmer
• blog posts are a great medium for developers to learn and share their ideas
• blogs are a way to stay up to date in the continuously evolving tech space
• writing, based around technical words isn't always an easy task, blogging can improve a developers writing and communication skills

Admin user stories

• As an admin, I can manage the site categories and tags
• As an admin, I can manage all the blog posts of all the site users

Regular user stories

• As a user, I can create my own blog post in a rich text editor with ability to add link different media types _ As a user, I can find content related to my blog posts
• As a user, I can check other user's accounts and contact them through their emails
• As a user, I can comment publicly by linking on of my social media accounts
• As a user, I can update my profile info and login password
• As a user, I can request a secure password reset in case I forgot my password

This design was planned before on paper, then moved to Figma app for the fine details. Note that i didn't use any styling library or theme, all from scratch and using pure css modules

Signup	Landing
single blog	Blog Editor

A brief high-level overview of the tech stack used in the Devlog web app:

• Frontend:

  Devlog uses React, a javascript library for building user interfaces. The styling of individual components was done using SASS, a preprocessor scripting language that is interpreted or compiled into Cascading Style Sheets (CSS).

  Next.js - for SSR (server-side rendering), statically generated pages.

  Next.js is an open source web development framework built on top of Node.js, it provides react based applications with functionalities such as server-side-rendering and generating static websites.

• Backend:

  Devlog uses Node.js and Express.

  Node.js is an open-source, server-side, JavaScript runtime environment that is solely based on the V8 JavaScript Chrome Engine. Node.js can be used to create a variety of applications, including Command-Line Applications, Web Applications, Real-time Chat Applications, and REST API Servers.

  Express is a Node.js web application framework that provides broad features for building web and mobile applications. It is used to build a single page, multipage, and hybrid web application. It's a layer built on the top of the Node js that helps manage servers and routes.

• For persistent storage, the app uses MongoDB Atlas. A Multi-Cloud Database Service offered by MongoDB that simplifies Database Deployment and Management while providing the flexibility required to build resilient and performant global applications on the Cloud providers of your choice.

  Mongoose was used for Object Data Modeling (ODM), Mongoose is a Node.js-based Object Data Modeling (ODM) library for MongoDB.

• Amazon Simple Email Service SES is used to verify user emails on signup, account activation, and password reset requests.

  Note: currently the app is running in SES sandbox mode, email functionality is only working with emails listed in the SES verified identities.
  
  

Using the above mentioned tech stack and the wireframes created with Figma, the implementation of the app is shown as below (animated gifs from the actual web app)

• Authentication & emails using AWS SES:

Register Validation	Account Activation

Email confirmation	Password Reset

Contact

• Admin:

Manage Categories	Manage Tags

Creating Blogs	Updating Blogs

• User:

Manage Blogs	Update	Manage Profile

• Extra features:

Disqus commenting system (linked to socials)	Blog Filtering (based on different criteria)	Infinite scroll on Blogs page

Dark Mode	Light Mode	Dark Mode Toggler

To get a local copy up and running follow these simple steps.

Prerequisites

• Download and install Node.js

• npm

  npm install npm@latest -g

• Create a .env file inside the backend folder to add private variables

  cd backend
  touch .env
  # add random jwt secret keys (for auth, email activation and email reset)
  echo "JWT_SECRET=$(openssl rand -base64 32)" > .env
  echo "JWT_ACTIVATE=$(openssl rand -base64 32)" >> .env
  echo "JWT_RESET_PASS=$(openssl rand -base64 32)" >> .env
  

• Connecting to MongoDB Atlas: Create a free cluster and connect it to the project using the connection string

  1. Create an account on MongoDB Cloud Atlas
  2. You will be prompted right away to create a new project and org. You may leave all values as default and click Continue.
  3. Three cards will show up next asking you to choose a cluster. Select the Shared Cluster - that's the one which is free.
  4. The next screen is about details of the cluster. Make sure M0 Cluster Tier is selected. You may leave all values as default and click on Create Cluster
  5. Wait for a few seconds for the cluster to get ready and then click on Connect.
  6. First thing you need to add is an IP Address. Select Add your current IP Address if you are working on the project yourself only or Allow Access from Anywhere for testing purposes.
  7. Next up is Database user creation. You need to enter a username and password.
  8. Next step asks you for a connection method. Select Connect Your Application and then copy the prompted connection string and click close.
  9. go back to the .env file in the backend directory of the application and add a key value pair as follows: MONGO=<paste your connection string that you copied>

  The string looks like this: mongodb+srv://admin:<password>@cluster0.bqss1.mongodb.net/<dbname>?retryWrites=true&w=majority

  In the connection string as shown above, you need to replace <password> with the password you had created in step 7 and <dbname> with a name that you would like to name your database.

  So it would finally look like this for me (with username: admin, password: pass, dbname: todo) mongodb+srv://admin:pass@cluster0.bqss1.mongodb.net/todo?retryWrites=true&w=majority

Installation

1. Clone the repo

   git clone https://github.com/omar-zeineddine/devlog

2. Navigate to the backend folder and install dependencies

   cd backend
   npm install

3. Navigate back and enter the frontend folder and install dependencies

   cd .. && cd frontend
   npm install

4. Run the web app

   cd backend
   npm run dev