A modern, feature-rich blogging application built with React, Redux Toolkit, and Tailwind CSS. This project demonstrates best practices in state management, authentication, and responsive design for building scalable web applications.
Check out the live application: https://react-blog-project-one.vercel.app
Redux Blog Project is a full-featured blogging platform that allows users to create, read, update, and delete blog posts. The application features user authentication, real-time search functionality, and a beautiful, responsive UI built with modern web technologies.
- User Authentication: Secure login and sign-up system with route protection
- Blog Management: Create, read, update, and delete blog posts
- Search Functionality: Real-time search to filter blogs by title or content
- Like System: Users can like/unlike blog posts
- Responsive Design: Mobile-friendly UI that works on all devices
- State Management: Centralized state management with Redux Toolkit
- API Integration: Asynchronous API calls using Axios and Redux Thunk
- Animations: Smooth transitions and animations using Framer Motion
- Modal Dialogs: Interactive modals for editing and viewing blog details
redux-blog-project/
├── src/
│ ├── api/
│ │ └── apiInstance.js # Axios instance for API calls
│ ├── assests/ # Static assets (images, logos)
│ ├── components/
│ │ ├── Login.jsx # Login form component
│ │ ├── SignUp.jsx # Sign-up form component
│ │ ├── Navbar.jsx # Navigation bar component
│ │ └── Modal.jsx # Modal dialog component
│ ├── features/
│ │ ├── blogSlice.js # Redux slice for blog state
│ │ └── userSlice.js # Redux slice for user state
│ ├── hoc/
│ │ ├── UserAuth.jsx # Protected route wrapper
│ │ └── PublicRoutes.jsx # Public route wrapper
│ ├── pages/
│ │ ├── Home.jsx # Blog listing page
│ │ └── AddBlog.jsx # Create/edit blog page
│ ├── store/
│ │ └── store.js # Redux store configuration
│ ├── App.jsx # Main app component
│ ├── App.css # App styles
│ ├── index.css # Global styles
│ └── main.jsx # Entry point
├── public/ # Public assets
├── db.json # JSON server database
├── package.json # Project dependencies
├── vite.config.js # Vite configuration
├── eslint.config.js # ESLint configuration
└── README.md # This file
- React (v19.2.0) - UI library for building interactive interfaces
- Redux Toolkit (v2.11.2) - State management library
- React Redux (v9.2.0) - Official React bindings for Redux
- React Router DOM (v7.12.0) - Client-side routing
- Tailwind CSS (v4.1.18) - Utility-first CSS framework
- Framer Motion (v12.27.0) - Animation library for React
- Lucide React (v0.562.0) - Icon library
- Vite (v7.2.4) - Fast build tool and dev server
- Axios (v1.13.2) - HTTP client for API requests
- ESLint (v9.39.1) - Code quality tool
- json-server (v1.0.0-beta.3) - Mock REST API server
- Node.js (v14 or higher)
- npm or yarn package manager
-
Clone the repository
git clone <repository-url> cd redux-blog-project
-
Install dependencies
npm install
-
Start the JSON server (in a separate terminal)
npm run dev:server # or use json-server directly json-server --watch db.json --port 3000 -
Start the development server
npm run dev
-
Open your browser Navigate to
http://localhost:5173(or the port shown in terminal)
npm run dev- Start the development server with hot module replacementnpm run build- Create an optimized production buildnpm run lint- Run ESLint to check code qualitynpm run preview- Preview the production build locally
The application implements a two-layer route protection system:
- PublicRoutes: Redirects authenticated users away from login/signup pages
- UserAuth: Protects private routes and redirects unauthenticated users to login
- User credentials are stored in Redux state and localStorage for session persistence
The application communicates with a JSON server API running on http://localhost:3000/:
GET /blogs- Fetch all blog postsPOST /blogs- Create a new blog postPUT /blogs/:id- Update a blog postDELETE /blogs/:id- Delete a blog postGET /users- Fetch all usersPOST /users- Register a new user
All API requests are handled through Axios with Redux Thunk for asynchronous operations.
- Navbar - Navigation bar with user profile and logout functionality
- Modal - Reusable dialog for editing blog details
- Login/SignUp - Authentication forms with validation
- Home - Blog feed with search and like functionality
- AddBlog - Form for creating new blog posts
The project uses Tailwind CSS for styling with:
- Responsive grid layouts
- Flexbox utilities
- Custom color schemes
- Smooth animations via Framer Motion
Redux Toolkit manages application state with two main slices:
- Manages blog posts (fetch, create, update, delete)
- Handles search and filter operations
- Manages like/unlike functionality
- Includes loading states and error handling
- Manages user authentication state
- Stores user profile information
- Handles login/logout operations
- Navigate to the "Add Blog" page
- Fill in the blog title and content
- Submit the form - the blog will be added to the database and Redux store
- Use the search bar on the home page
- Type a keyword to filter blogs in real-time
- Click clear to reset the search
- Click the edit icon on a blog card
- Modal opens with editable content
- Update and save changes
- Click the delete icon on a blog card
- Blog is removed from the database and state
The application is fully responsive with:
- Mobile-first approach
- Tailwind CSS breakpoints (sm, md, lg, xl)
- Flexible layouts that adapt to different screen sizes
- Touch-friendly interactive elements
The application includes comprehensive error handling:
- API error messages displayed to users
- Redux state for loading and error states
- Try-catch blocks in async thunks
- User-friendly error notifications
The project maintains code quality through:
- ESLint configuration for consistent code style
- Component-based architecture
- Separation of concerns (components, pages, features, hoc)
- Reusable utilities and custom hooks
- Redux Toolkit for simplified state management
- Async thunks for API operations
- Higher-Order Components (HOC) for route protection
- Component composition for reusability
- Environment-based API configuration
- Proper error handling and loading states
If port 5173 or 3000 is already in use, modify the vite config or specify a different port:
npm run dev -- --port 3001
json-server --watch db.json --port 3001Clear node_modules and reinstall dependencies:
rm -rf node_modules package-lock.json
npm installEnsure the JSON server is running on http://localhost:3000/ before starting the development server.
This project is open source and available under the MIT License.
Contributions are welcome! To contribute:
- Fork the repository
- Create a feature branch
- Commit your changes
- Push to the branch
- Open a pull request
We're here to help! If you have any questions, issues, or feedback about the Redux Blog Project, please reach out using any of the following methods:
- GitHub Issues: Found a bug or have a feature request? Open an issue on GitHub
- Email: Contact us at rudra22822@gmail.com for detailed inquiries
- LinkedIn: Connect with us on LinkedIn for professional discussions
- Documentation: Check the README and troubleshooting section first
Made with ❤️ using React and Redux Toolkit