Dev-Blog 🔗

This project is a modern, feature-rich blog application built with TypeScript and React. It leverages the power of Zustand for state management, React Query for data fetching, and Ant Design for a sleek, responsive user interface.

The primary purpose of this project is to showcase my proficiency in working with these tools and technologies while delivering a user-friendly and efficient blogging solution.

The application allows users to browse through a variety of blog posts, view detailed information about each post, and filter or sort posts based on their preferences. Each blog post includes related posts, enhancing the user experience by providing them with more content of their interest.

Features

• Dynamic Blog Listing: Browse through a grid-based layout of blog posts, with options to filter and sort the listings based on various criteria.
• Detailed Blog View: Access a dedicated page for each blog post, displaying the full content, author information, and related posts.
• Markdown Support: Create and format blog content using Markdown syntax, providing a simple and intuitive writing experience.
• Liking and Saving Posts: Engage with blog posts by liking them or saving them for future reference.
• Efficient Data Fetching: Leverage React Query for optimized data fetching, caching, and background updates, ensuring a smooth user experience.
• State Management: Utilize Zustand, a scalable and performant state management solution, for managing application state.
• Visually Appealing UI: Benefit from the integration of Ant Design, a powerful and responsive UI library.

Backend

• RESTful API: A Node.js and Express server for handling API requests and serving blog data.
• MongoDB Integration: Integration with a MongoDB database for storing and retrieving blog data efficiently.
• API Endpoints: Dedicated API endpoints for fetching blog posts, related posts, and other relevant data.

User Experience

• Intuitive User Flow: When users land on the page, they are presented with a grid layout of blog listings. A sidebar allows filtering and sorting of blogs, while the navbar provides options for creating new blogs and viewing all published blogs.
• Blog Creation: Users can create new blog posts using a React Markdown editor, allowing them to add a title, cover photo, and description.
• Blog Management: A dedicated page displays all published blogs in a table format, with the ability to delete individual posts.

Grid Layout

Single Blog page with Related blogs

Technologies Used

• React
• TypeScript
• Markdown Editor
• Express / Node.js
• React Query
• Zustand
• React Router
• Ant Design

Upcoming Features

In future versions, the following enhancements are planned:

• Commenting: Enable users to comment on others' posts.
• Post Updates: Allow authors to update their posts.
• Improved UI: Enhance the user interface for creating posts.
• Advanced Search: Implement an improved search function.
• Testing: Include test files to ensure the reliability of the application.

Lessons Learned

During the development of this project, I faced several challenges, particularly with Zustand and React Query, which were new technologies for me. I dedicated time to thoroughly study their documentation and gain a better understanding of their functionality.

Initially, Zustand's hook-based state management seemed complex, but as I delved deeper, I realized its simplicity and ease of use. When integrated with React Query, Zustand becomes even more powerful, enabling efficient state sharing and code splitting across the application.

Additionally, I integrated a Markdown editor for blog creation, which was a novel experience. I spent considerable time exploring its documentation to incorporate features like image uploading, URL grabbing, and seamless integration of Markdown writing on the frontend. Implementing all the necessary tools and enabling live previewing was a complex and time-consuming task.

Despite the challenges, this project provided me with invaluable experience in working with cutting-edge technologies and architectures, further enhancing my skills as a web developer.

Feel free to explore the codebase, open issues, or submit pull requests if you have any questions, suggestions, or contributions.

Installation and Running Locally

Follow these steps to install and run the project locally:

1. Clone the repository to your local machine:

git clone <repository_url>
cd <repository_path>
npm install
npm start

To run the backend server, navigate to the backend directory and start the server:

cd backend
npm run dev

The application will start running on http://localhost:3000.