A modern blogging platform built with TypeScript, React, and Node.js.

Share your thoughts, stories, and ideas with the world.

• About
• Features
• Demo
• Quick Start
• Installation
• Usage
• Configuration
• Project Structure
• Contributing
• Testing
• Deployment
• FAQ
• License
• Support
• Acknowledgments

Blogrr is a full-stack blogging platform designed to be simple, fast, and customizable. It allows users to create, publish, and manage blog posts with ease. The platform is built using TypeScript for type safety and maintainability, React for a dynamic user interface, and Node.js with Express.js for the backend API.

This project aims to provide a modern alternative to traditional blogging platforms, focusing on developer experience and performance. It's ideal for developers who want to quickly set up a blog, customize it to their needs, or contribute to an open-source blogging platform.

Key technologies include React for the frontend, Node.js and Express.js for the backend, and TypeScript for enhanced code quality. The architecture follows a modular design, making it easy to extend and customize the platform with new features and integrations.

• 🎯 Create and Manage Posts: Easily create, edit, and delete blog posts with a rich text editor.
• ⚡ Performance: Optimized for fast loading times and smooth user experience.
• 🔒 Security: Secure user authentication and authorization to protect your content.
• 🎨 UI/UX: Clean and intuitive user interface for a seamless blogging experience.
• 📱 Responsive: Fully responsive design that works on all devices.
• 🛠️ Extensible: Modular architecture that allows for easy customization and extension.

🔗 Live Demo: https://blogrr-front.vercel.app/

Homepage

Authentication

All Blogs

Clone and run in 3 steps:

git clone https://github.com/themradul07/Blogrr-.git
cd Blogrr-
npm install && npm start

Open http://localhost:3000 to view it in your browser.

• Node.js 18+ and npm
• Git
• MongoDB installed locally or a MongoDB Atlas account

# Clone repository
git clone https://github.com/themradul07/Blogrr-.git
cd Blogrr-

# Install dependencies
npm install

# Start development server
npm run dev

docker run -p 3000:3000 themradul07/blogrr

// Example: Fetching blog posts from the API
import { getPosts } from './services/api';

async function fetchBlogPosts() {
  const posts = await getPosts();
  console.log(posts);
}

fetchBlogPosts();

// Example: Creating a new blog post
import { createPost } from './services/api';

async function createNewPost() {
  const newPost = {
    title: 'My New Blog Post',
    content: 'This is the content of my new blog post.',
    author: 'John Doe'
  };

  const createdPost = await createPost(newPost);
  console.log(createdPost);
}

createNewPost();

Create a .env file in the root directory:

# Database
DATABASE_URL=mongodb://localhost:27017/blogrr
DATABASE_NAME=blogrr

# Server
PORT=3000
NODE_ENV=development

# Authentication
JWT_SECRET=your_jwt_secret_key

{
  "name": "blogrr-config",
  "version": "1.0.0",
  "settings": {
    "theme": "light",
    "language": "en",
    "postsPerPage": 10
  }
}

Blogrr-/
├── 📁 client/
│   ├── 📁 src/
│   │   ├── 📁 components/          # Reusable UI components
│   │   ├── 📁 pages/              # Application pages
│   │   ├── 📁 hooks/              # Custom React hooks
│   │   ├── 📁 utils/              # Utility functions
│   │   ├── 📁 services/           # API services
│   │   ├── 📁 styles/             # CSS/styling files
│   │   └── 📄 index.tsx            # Application entry point
│   ├── 📄 public/                 # Static assets
│   ├── 📄 .env.development      # Development environment variables
│   ├── 📄 package.json           # Client dependencies
│   └── 📄 tsconfig.json          # TypeScript configuration
├── 📁 server/
│   ├── 📁 src/
│   │   ├── 📁 controllers/        # Route handlers
│   │   ├── 📁 models/             # Data models
│   │   ├── 📁 routes/             # API routes
│   │   ├── 📁 middleware/         # Middleware functions
│   │   ├── 📁 utils/              # Utility functions
│   │   └── 📄 index.ts            # Server entry point
│   ├── 📄 .env.development      # Development environment variables
│   ├── 📄 package.json           # Server dependencies
│   └── 📄 tsconfig.json          # TypeScript configuration
├── 📄 .gitignore             # Git ignore rules
├── 📄 package.json           # Project dependencies
├── 📄 README.md              # Project documentation
└── 📄 LICENSE                # License file

We welcome contributions! Please see our Contributing Guide for details.

1. 🍴 Fork the repository
2. 🌟 Create your feature branch (git checkout -b feature/AmazingFeature)
3. ✅ Commit your changes (git commit -m 'Add some AmazingFeature)
4. 📤 Push to the branch (git push origin feature/AmazingFeature)
5. 🔃 Open a Pull Request

# Fork and clone the repo
git clone https://github.com/yourusername/Blogrr-.git

# Install dependencies (in both client and server directories)
cd Blogrr-/client && npm install
cd Blogrr-/server && npm install

# Create a new branch
git checkout -b feature/your-feature-name

# Make your changes and test
# Run client and server development servers in separate terminals
cd Blogrr-/client && npm start
cd Blogrr-/server && npm run dev

# Commit and push
git commit -m "Description of changes"
git push origin feature/your-feature-name

• Follow existing code conventions
• Run npm run lint before committing
• Add tests for new features
• Update documentation as needed

# Run tests (in both client and server directories)
cd Blogrr-/client && npm test
cd Blogrr-/server && npm test

Q: How do I customize the theme?

A: You can customize the theme by modifying the CSS files in the client/src/styles directory.

Q: How do I add new features?

A: You can add new features by creating new components, pages, or API endpoints. Follow the existing project structure and conventions.

This project is licensed under the MIT License - see the LICENSE file for details.

• ✅ Commercial use
• ✅ Modification
• ✅ Distribution
• ✅ Private use
• ❌ Liability
• ❌ Warranty

• 🎨 Design inspiration: Dribbble
• 📚 Libraries used:
  • React - A JavaScript library for building user interfaces
  • Express - Fast, unopinionated, minimalist web framework for Node.js
  • Mongoose - Elegant MongoDB object modeling for Node.js
• 👥 Contributors: Thanks to all contributors
• 🌟 Special thanks: To the open-source community for providing valuable resources and tools.