MERN Stack News Application with Tailwind CSS

Build a Full stack News Portal Application with React , Node , Express , Mongo DB

Hello, Welcome TO The Course MERN Stack News Application.

What you’ll learn

  • Creating Full Stack Applications with React , Node , Express , Mongo.
  • Handling Complex data without state management tools like redux.
  • Creating Mongo DB Models , Schemas.
  • The most popular text editor for creating content like draftjs.
  • Deploying a full stack application to live server without any cost.

Course Content

  • Introduction –> 1 lecture • 9min.
  • Front End Setup –> 2 lectures • 14min.
  • Layout –> 3 lectures • 31min.
  • Add News UI –> 2 lectures • 28min.
  • Backend Setup –> 3 lectures • 20min.
  • Add News API Integration –> 2 lectures • 31min.
  • Home Page –> 2 lectures • 20min.
  • News Description –> 2 lectures • 28min.
  • Authentication –> 5 lectures • 1hr 19min.
  • Edit and Delete News –> 3 lectures • 36min.
  • Refractoring –> 2 lectures • 24min.
  • Deployment –> 2 lectures • 14min.

MERN Stack News Application with Tailwind CSS

Requirements

  • Javascript Basics.
  • React Basics.

Hello, Welcome TO The Course MERN Stack News Application.

The Different Technologies we will use in this application are

  1. React – For Front End
  2. Tailwind CSS – For UI / Styling
  3. Node JS – For Backend Run-Time Environment
  4. Express JS – For Backend Framework
  5. Mongo DB – For Database

The topics that we will cover in this course are

 

  • Complete USER authentication with Protected Routes concept
  • ALL CRUD operations for the news items like create, read, update, delete
  • Handling Complex data without state management tools like redux
  • Creating Mongo DB Models, Schemas
  • The most popular text editor for creating content like drafts
  • Deploying a full-stack application to a live server without any cost
  • States, Props, Routing, HTTP Calls In React
  • In the complete application, we will use only functional/stateless components in React.
  • For Styling and UI we will the latest and tending utility CSS framework Tailwind CSS.
  • We will not use any external CSS frameworks or libraries like bootstrap/material UI etc.
  • We will build every piece of the component in the application from scratch with Tailwind CSS
  • We will learn to implement complex responsive layouts with tailwind CSS

 

Pre Requisites

——————————————————————————-

React

React is a free and open-source front-end JavaScript library for building user interfaces based on UI components. It is maintained by Meta and a community of individual developers and companies. React can be used as a base in the development of single-page or mobile applications

Tailwind CSS

Tailwind CSS is basically a utility-first CSS framework for rapidly building custom user interfaces. It is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.

Node

Node.js is an open-source, cross-platform, back-end JavaScript runtime environment that runs on the V8 engine and executes JavaScript code outside a web browser.

 

Get Tutorial