MERN Stack News Application with Tailwind CSS

Create a react app for the MERN stack news project, set up the front end, install and configure tailwind css, and test styling by applying tailwind classes.

Organize the MERN stack news app by creating components and pages, set up routing with react-router-dom, implement a protected home page and six pages, and apply tailwind CSS styling.

Build a responsive two-pane layout with a header, sidebar, and content area, where a hamburger toggles the sidebar, and pages render through a layout component using Tailwind CSS.

Designs a sidebar layout for a MERN stack news app, with a two-part header for the project title and a mapped menu, using react-router links and active state highlighting.

Implement a responsive sidebar toggle by importing react icons, managing showSidebar state, and toggling the sidebar with a header icon and smooth transitions.

Build an ad news feature in a MERN stack app by using draft.js as the content editor to create news content with title, description, and images.

Configure a React draft editor in MERN app, manage editor state changes with a handler, and apply styling. Convert content to raw, examine blocks and entity map for MongoDB.

Set up a node express server for the mern news app, install express and mongoose, and create news and user models and routes on port 5000.

Learn to connect a MERN stack news app to a MongoDB Atlas cloud database using Mongoose and a connection string, with tests for successful and failed authentication.

Create a Mongoose news item model with title, description, content, posted by, and timestamps, then implement a post API to add items and route requests via a news items router.

Configure the backend proxy to connect the frontend to the news items api and add a news item via axios.post, sending title, description, content, and poster, stored in mongodb.

Learn to build and center a reusable Tailwind CSS spinner component for API loading states, switching from absolute to fixed positioning and integrating toast alerts for news submissions.

Fetch all news items from the news API and render them on the home page. Use Axios, useEffect, and loading state in a MERN stack app with Tailwind CSS.

Map through news items to render titles and descriptions on homepage using responsive tailwind grid that shifts to one on mobile, with search bar and title filtering via lowercase includes.

Create a news description page in a MERN stack app by routing to a single news item with an id, fetching it with axios, and displaying the title, description, and content.

Design a new news description page by converting API data into HTML with the draft package and a React HTML parser, then render with loading and navigate home after update.

Design a single landing page for a MERN stack news app, featuring sign in and sign up forms on the same page, with Tailwind CSS styling and a Lottie animation.

Design login and register forms for a MERN stack news app with Tailwind CSS, using hooks to toggle forms and animate transitions while collecting email, password, and username.

Build and secure user authentication in a MERN app by creating a user model, implementing register and login APIs, handling responses without passwords, and storing user data locally for navigation.

Display all news items posted by the logged-in user by storing the complete user object in the poster field and rendering it on the homepage and add news page.

Guard home and news pages with protected routes in a MERN stack news app, redirecting unauthenticated users to the landing page and enabling logout via localStorage clearing.

Create a posted news items table filtered by the current user, fetch items by user id via the API, and show a loading spinner as data loads.

Learn to implement delete news functionality in a MERN stack news app with Tailwind CSS, including a delete item function, find one and delete, and refreshing data after deletion.