The dev.to project with GatsbyJS-1

dev.to site

As many of my wonderful readers might know, that i really got success in with by blog post with the wonderful site of dev.to.

I had also recently given five udemy courses to five people as i reached 100K views on dev.to

Twitter message

I already have a personal blog site https://nabendu.blog/ and i had already described the way to create it in. my earlier blog series here.

But i want to create something like dev.to and initially the basic version, where people can cross post their dev, personal blog. The people at dev.to also encourages the same and open-sourced their platform.

About dev

One of the main features which attracted me to this site is the ease with which the writers can publish their post and give Canonical links. For those who don’t know canonical links are very important for google. It tell google which is the original source of article. Now i post on medium, personal blog and dev and always give canonical link of my personal blog. This is very important or else google will think you had copied your article from somewhere.

Easy canonical link

But if they had open-sourced then why do i want to recreate it. The dev.to site is built on React frontend and Ruby or rails on the backend with PostgreSQL. Now, i know good bit of React but not Ruby or rails.

I could make it in MERN stack, but for the last 6 months i had built some amazing production open-sourced sites using GatsbyJS. You can create a blog site by using only markdown files, which is amazing. You can add authentication to a Gatsby site. You can create a ecommerce site, which i will create soon to sell my upcoming Gatsby book :).

Enough of talking, let’s get’s started with the requirement first. The first version of the web-app will contain the following.

  • Create the home page similar to dev.to with adding the thing which i want like a navigation in top menu even for non-logged in users.
  • The blogs to expand the whole page like medium, which are easy to read.
  • All blogs to have tags, which can be used to get all similar blogs.
  • A search capability to search all blogs.
  • Authentication with email or gmail.
  • Authors dashboard with basic feature to upload a markdown file, featured image, canonical link and predefined tags(mostly coding and devlife).

I will start coding from the next part, but this is a very serious project for me and i will promise something which i will always keep.

  • This project will be completely open-source and every commit will be explained in this blog series.
  • All your credentials will be completely safe with us and never shared with anyone.
  • This site will be completely Advertisement free and free from any malicious scripts.
  • There will be other part in the site in future like podcast, videos(youtube) where you can share link to your podcasts and free youtube videos.

I have also done some domain hunting and finally purchased the thewebdev.tech .

So, this site will be called The WebDev, because as most of you might know that today “Web is everything and everything is web”.

My journey for the site starts with the next part. You can find part-2 here.

--

--

--

Founder TWD, JavaScript & ReactJS Trainer, Youtuber, Blogger

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Next-Redux-Wrapper Tutorial. How It Works and How To Configure It Properly.

Next.js + Redux with next-redux-wrapper

Main Principles of React Components

The fundamental concept of React.js

Creating Blog site using Stackbit, GatsbyJS and DEV -2

Mock Data for Angular 9 applications with JSON Server — Part 2(final)

Developer Interview Question: What is the Browser Object Model?

How to setup Redux Toolkit in React JS Project.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Nabendu Biswas

Nabendu Biswas

Founder TWD, JavaScript & ReactJS Trainer, Youtuber, Blogger

More from Medium

React App with Final Space API — Tinder Style

7 Reasons To Use UI Libraries to Style React Apps

Build Landing Page With Tailwind CSS v3.0 Part 3 (Last Part) — Mobile

Chat App using WhatsApp web UI and React JS