Devlog

Devlog is a blogging platform for the developers built with Next.js and Firebase and is loosely inspired by Dev.to

Sign up for an 👨‍🎤 account, ✍️ write posts, then 💖 heart and ✍ comment on content created by other users. All public content is server-rendered and search-engine optimized.

Visit Devlog here or here

Features

• 🔐 Authentication

  • Google OAuth
  • Facebook OAuth
  • Github OAuth

• Blogging

  • ✍ Write your blog
  • 🗞 Update your blog
  • 📖 Read blogs written by othes
  • 💀 Delete your blog

• 💞 Realtime hearts

• 👨‍💻 Realtime comments

• 🔫 Reply on comments

• 📂 Image file uploads

• 📰 Bot-friendly content (SEO)

• 👨‍🎤 Custom Firebase usernames

Tech stack

• React
• NextJs
• Firebase

Running Locally

There are some prerequisites to run the app successfully on your local machine, follow the below steps to get started

Prerequisites

• Node 16 or higher
• npm 8.5.0 or higher

Run the below commands in your terminal to confirm that all the requirements are passed to run the project Locally

• node -v
• npm -v

All the above commands should execute successfully and output the version numbers specified

Project setup

Clone the project repository

git clone https://github.com/raselshikdar/devlog.git

Navigate to the project directory

cd devlog

Install Dependencies

npm install

Firebase Setup

Complete the proces to create a firebase project and register a web app, and initialize Authentication, Firestore and Storage Services

Environment Variables

• Create a file name .env.local in the root directory of your project

• Browse to your firebase project settings, by clicking on the gear or cog icon in the left sidebar

• In the general setion of project settings, scroll down until you find firebaseConfig object with some project credentials

• Now fill your .env.local with the values from firebaseConfig object in your firebase project settings

• All enviornment Variables in .env.local 👇

  • NEXT_PUBLIC_FIRE_API_KEY=<fill_value_from_firebaseConfig>
  • NEXT_PUBLIC_FIRE_AUTH_DOMAIN=<fill_value_from_firebaseConfig>
  • NEXT_PUBLIC_FIRE_PROJECT_ID=<fill_value_from_firebaseConfig>
  • NEXT_PUBLIC_FIRE_SB=<fill_value_from_firebaseConfig>
  • NEXT_PUBLIC_FIRE_MESSAGE_SENDER_ID=<fill_value_from_firebaseConfig>
  • NEXT_PUBLIC_FIRE_APP_ID=<fill_value_from_firebaseConfig>
  • NEXT_PUBLIC_FIRE_MEASUREMENT_ID=<fill_value_from_firebaseConfig>

Authentication Setup

• To perform authentication via google enable the sign in provider from the Authentication tab of fireabase console.
• You can follow this guide for authentication via facebook
• You can follow this guide for authentication via github

Now that all requirements are in place lets start our servers

Run npm run dev to start client on port 3000

🥳 Hurray! you made it, go ahead to localhost:3000 to see the project in action

License

MIT