Skip to content

Harshjerry/BLOGfrontend

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

25 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

📰 BLOGfrontend

Preview


🎥 Demonstration Video

▶️ Watch Demo on Google Drive


🌐 ReactJS Parallax Blog Website

A modern and elegant ReactJS-based blog platform featuring parallax animations, a beautiful UI, and a smooth writing experience.
Designed for creative writers, developers, and storytellers who love immersive visuals, modern design, and seamless performance.


✨ Features

  • 🎢 Smooth Parallax Animations – Built using modern scroll-based animation libraries to create immersive depth effects.
  • 📝 Markdown-Based Blog Writing – Write and publish blogs easily with a built-in markdown editor and live preview.
  • 💅 Styled Components for UI – Clean, modular styling with full control over component-level designs.
  • 💻📱 Laptop & Mobile Responsive – Optimized layouts for laptop and mobile screens (not yet adapted for large ultrawide displays due to parallax scaling).
  • Pure React Setup (No Vite) – Built using Create React App for a stable and simple workflow.
  • 🚀 SEO & Performance Optimized – Lightweight, smooth performance with fast rendering and minimal load time.
  • 🔧 Customizable Components – Reusable React components designed for flexibility and scalability.

🧩 Tech Stack

🖥️ Frontend

  • ReactJS
  • Framer Motion – for parallax and scroll animations
  • Tailwind CSS – utility-first styling
  • React Router DOM – for navigation
  • Markdown Parser / Editor – for blog creation

🗄️ Backend

  • Node.js
  • Express.js
  • MongoDB – database for storing user blogs
  • Mongoose – ODM for MongoDB
  • CORS & JWT Auth – for secure user sessions

📦 **Backend Repository https://github.com/Harshjerry/BLOGbackend


⚙️ Installation & Setup

🔹 Clone and Run Backend

Clone backend repository

git clone https://github.com/Harshjerry/BLOGbackend cd BLOGbackend

Install dependencies

npm install

Create your own MongoDB collection

and update the MongoDB URI in .env file

Example: MONGO_URI=mongodb+srv://:@cluster.mongodb.net/blogDB

Start the backend server (default: port 5000)

npm start

#THEN CLONE AND RUN FRONTEND

Clone frontend repository

git clone https://github.com//BLOGfrontend.git cd BLOGfrontend

Install dependencies

npm install

Start the React app (default: port 3000)

npm start

About

A modern full-stack blog website built with ReactJS and Styled Components, featuring smooth parallax animations, Markdown-based writing, and a clean, responsive interface optimized for laptops and mobile devices. The backend is powered by Node.js, Express.js, and MongoDB, ensuring secure, scalable, and efficient content management.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors