Skip to content

README.md

Latest commit

 

History

History
128 lines (91 loc) · 3.16 KB

README.md

File metadata and controls

128 lines (91 loc) · 3.16 KB

Blog Community Application

A React-based blog community application that allows users to create, read, update, and delete blog posts with commenting functionality. The application uses local storage for data persistence.

🚀 Features

  • Post Management

    • Create new blog posts with title, content, and featured image
    • Edit existing posts
    • Delete posts
    • Filter posts by topics

  • Comments System

    • Add comments to posts
    • Nested reply functionality
    • Delete comments

  • UI Features

    • Responsive design
    • Image upload functionality
    • Rich text content
    • Topic-based filtering

🛠️ Tech Stack

  • React 19
  • TypeScript
  • Next.js 15.1.5
  • Material-UI (MUI)
  • Local Storage for data persistence

📦 Getting Started

  1. Clone the repository:
git clone https://github.com/yourusername/community_task.git

2.Install pnpm (optional) (npm can be also used to initialize and start project)

npm install -g pnpm
  1. Install dependencies and run project locally or with production build:
For development
cd community_test
pnpm install
pnpm dev

For production build
pnpm build
pnpm start
  1. Open http://localhost:3000 in your browser.

🏗️ Project Structure

src/
├── app/                   # Next.js app directory
├── components/
│   ├── Common/           # Reusable components
│   ├── CommunityPage/    # Community page components
│   └── PostPage/         # Post detail components
├── hooks/                # Custom React hooks
├── types/                # TypeScript type definitions
├── utils/                # Utility functions
├── constants/            # Constant values
└── data/                 # Static data and constants

💻 Usage

Creating a New Post

  1. Click the "Add Post" button
  2. Fill in the post details:
    • Title
    • Content
    • Topic
    • Featured Image (optional)
  3. Click "Submit" to create the post

Managing Comments

  1. Navigate to a post detail page
  2. Add comments using the comment form
  3. Reply to existing comments using the reply button
  4. Delete comments using the delete icon

Filtering Posts

  • Use the topic sidebar to filter posts by category
  • Click "All" to view all posts

🤝 Contributing

  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

📝 Notes

  • This application uses local storage for data persistence. Data will persist across browser sessions but is limited to the browser being used.
  • Image uploads are stored as base64 strings in local storage. Large images may impact performance.

📄 License

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

👥 Authors

🙏 Acknowledgments

  • Material-UI for the component library
  • Next.js team for the framework
  • All contributors who have helped with the project