<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Manan Sarraf</title>
    <description>The latest articles on DEV Community by Manan Sarraf (@manan_sarraf_73).</description>
    <link>https://dev.to/manan_sarraf_73</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1816767%2Fce1d750e-c0a4-4349-bc87-59467d7108ee.JPG</url>
      <title>DEV Community: Manan Sarraf</title>
      <link>https://dev.to/manan_sarraf_73</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/manan_sarraf_73"/>
    <language>en</language>
    <item>
      <title>14 Must-Know LEETCODE Patterns for Success!</title>
      <dc:creator>Manan Sarraf</dc:creator>
      <pubDate>Tue, 13 Aug 2024 11:05:22 +0000</pubDate>
      <link>https://dev.to/manan_sarraf_73/14-must-know-leetcode-patterns-for-success-4p08</link>
      <guid>https://dev.to/manan_sarraf_73/14-must-know-leetcode-patterns-for-success-4p08</guid>
      <description>&lt;p&gt;Mastering coding interviews is crucial for landing a job in tech. One of the best ways to prepare is by identifying and practicing common problem patterns that appear repeatedly on LeetCode. Understanding these patterns not only helps in solving specific problems but also builds a strong foundation for tackling new challenges.&lt;/p&gt;

&lt;p&gt;Here’s a breakdown of 14 key patterns that are essential for anyone looking to ace coding interviews:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Two Pointers
This pattern involves using two pointers to iterate through the data structure, often starting from opposite ends. It's particularly useful for problems involving arrays and strings.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Example Problems:&lt;/p&gt;

&lt;p&gt;Two Sum&lt;br&gt;
Container With Most Water&lt;br&gt;
3Sum&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Sliding Window
The sliding window technique is ideal for problems that require tracking a subset of data within an array or string. It's commonly used to find subarrays or substrings that satisfy certain conditions.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Example Problems:&lt;/p&gt;

&lt;p&gt;Longest Substring Without Repeating Characters&lt;br&gt;
Minimum Window Substring&lt;br&gt;
Maximum Sum Subarray of Size K&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Fast &amp;amp; Slow Pointers
Also known as the "tortoise and hare" approach, this pattern is used to detect cycles in linked lists and other data structures.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Example Problems:&lt;/p&gt;

&lt;p&gt;Linked List Cycle&lt;br&gt;
Find the Duplicate Number&lt;br&gt;
Happy Number&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Merge Intervals
This pattern involves merging overlapping intervals or finding intersections between different intervals. It's common in scheduling and calendar-related problems.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Example Problems:&lt;/p&gt;

&lt;p&gt;Merge Intervals&lt;br&gt;
Insert Interval&lt;br&gt;
Meeting Rooms II&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Cyclic Sort
Cyclic sort is used for problems involving arrays containing numbers in a given range. The goal is often to place each number in its correct position.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Example Problems:&lt;/p&gt;

&lt;p&gt;Find All Missing Numbers&lt;br&gt;
Find the Duplicate Number&lt;br&gt;
First Missing Positive&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;In-place Reversal of a Linked List
This pattern is crucial for problems that require reversing a linked list, either partially or entirely.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Example Problems:&lt;/p&gt;

&lt;p&gt;Reverse Linked List&lt;br&gt;
Reverse Nodes in k-Group&lt;br&gt;
Reverse Linked List II&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Tree Traversal
Tree traversal patterns are fundamental for solving binary tree problems, including depth-first search (DFS) and breadth-first search (BFS).&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Example Problems:&lt;/p&gt;

&lt;p&gt;Binary Tree Inorder Traversal&lt;br&gt;
Binary Tree Level Order Traversal&lt;br&gt;
Path Sum&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Topological Sort
Topological sorting is used for problems involving directed acyclic graphs (DAGs), particularly when you need to determine the order of tasks.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Example Problems:&lt;/p&gt;

&lt;p&gt;Course Schedule&lt;br&gt;
Alien Dictionary&lt;br&gt;
Sequence Reconstruction&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Dynamic Programming (DP)
DP is a powerful technique for solving optimization problems by breaking them down into simpler subproblems. It’s widely used in problems involving sequences, subsets, and other combinatorial challenges.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Example Problems:&lt;/p&gt;

&lt;p&gt;Longest Increasing Subsequence&lt;br&gt;
Coin Change&lt;br&gt;
Knapsack Problem&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Backtracking
Backtracking is a recursive technique for solving problems incrementally, one step at a time, and removing those solutions that fail to satisfy the problem constraints.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Example Problems:&lt;/p&gt;

&lt;p&gt;Permutations&lt;br&gt;
N-Queens&lt;br&gt;
Subsets&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Greedy Algorithms
Greedy algorithms make the locally optimal choice at each step, aiming for a global optimum. This pattern is often used in optimization problems.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Example Problems:&lt;/p&gt;

&lt;p&gt;Jump Game&lt;br&gt;
Task Scheduler&lt;br&gt;
Minimum Number of Arrows to Burst Balloons&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Graph Traversal
Graph traversal techniques like DFS and BFS are crucial for solving problems related to connected components, shortest paths, and cycles in graphs.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Example Problems:&lt;/p&gt;

&lt;p&gt;Number of Islands&lt;br&gt;
Clone Graph&lt;br&gt;
Word Ladder&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Binary Search
Binary search is used for efficiently finding elements in sorted arrays or determining the insertion point in various data structures.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Example Problems:&lt;/p&gt;

&lt;p&gt;Search in Rotated Sorted Array&lt;br&gt;
Find Peak Element&lt;br&gt;
Median of Two Sorted Arrays&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Trie
Tries are specialized tree-like data structures used to solve problems involving prefixes, such as searching and autocomplete features.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Example Problems:&lt;/p&gt;

&lt;p&gt;Implement Trie (Prefix Tree)&lt;br&gt;
Word Search II&lt;br&gt;
Add and Search Word&lt;br&gt;
Conclusion&lt;br&gt;
Focusing on these 14 patterns will greatly enhance your problem-solving skills on LeetCode and other coding platforms. By mastering these patterns, you'll be better prepared for a wide range of technical interviews, ultimately improving your chances of success.&lt;/p&gt;

&lt;p&gt;THANK YOU! BEST OF LUCK&lt;br&gt;
For any query reach out at &lt;a href="mailto:manansarraf851@gmail.com"&gt;manansarraf851@gmail.com&lt;/a&gt;/&lt;a href="mailto:manansarraf7@gmail.com"&gt;manansarraf7@gmail.com&lt;/a&gt;&lt;/p&gt;

</description>
    </item>
    <item>
      <title>Missed the DSA Train for 7 Months? Here’s Ultimate Guide How You Can Get Back on Track!</title>
      <dc:creator>Manan Sarraf</dc:creator>
      <pubDate>Wed, 24 Jul 2024 20:24:24 +0000</pubDate>
      <link>https://dev.to/manan_sarraf_73/missed-the-dsa-train-for-7-months-heres-ultimate-guide-how-you-can-get-back-on-track-2ecg</link>
      <guid>https://dev.to/manan_sarraf_73/missed-the-dsa-train-for-7-months-heres-ultimate-guide-how-you-can-get-back-on-track-2ecg</guid>
      <description>&lt;p&gt;In the fast-paced world of computer science, it's common to put learning about Data Structures and Algorithms (DSA) on hold. If you've missed the DSA train for months and need help getting started, you're not alone. Many beginners face hurdles like procrastination, lack of motivation, or feeling overwhelmed. This guide will help you get back on track and make the most of your DSA journey.&lt;/p&gt;

&lt;h3&gt;
  
  
  1. Assess Your Current Situation
&lt;/h3&gt;

&lt;p&gt;Action Steps:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Review your previous DSA notes or coursework.&lt;/li&gt;
&lt;li&gt;Identify your strengths and weaknesses.&lt;/li&gt;
&lt;li&gt;Set realistic goals based on your current skill level.&lt;/li&gt;
&lt;/ol&gt;

&lt;h3&gt;
  
  
  2. Build a Strong Foundation in Programming
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Before diving into DSA, ensure that you have a solid grasp of a basic programming language.&lt;/li&gt;
&lt;li&gt;Understanding fundamental programming concepts is crucial for effectively learning and applying DSA.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Action Steps:&lt;/p&gt;

&lt;p&gt;Remember the following points:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Choose a language you're comfortable with (e.g., Python, C++, Java).&lt;/li&gt;
&lt;li&gt;Review core programming concepts such as variables, control structures, functions, and loops.&lt;/li&gt;
&lt;li&gt;Build simple projects to solidify your understanding.&lt;/li&gt;
&lt;/ol&gt;

&lt;h3&gt;
  
  
  3. Create a Structured Learning Plan
&lt;/h3&gt;

&lt;p&gt;A well-structured plan is crucial for making consistent progress. Break down your learning objectives into manageable chunks and set deadlines to keep yourself accountable.&lt;/p&gt;

&lt;p&gt;Action Steps:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;List the core topics in DSA: arrays, linked lists, stacks, queues, trees, graphs, sorting algorithms, etc.&lt;/li&gt;
&lt;li&gt;Allocate specific time slots each week for studying each topic.&lt;/li&gt;
&lt;li&gt;Use online resources like tutorials, textbooks, and interactive platforms.&lt;/li&gt;
&lt;/ol&gt;

&lt;h3&gt;
  
  
  4. Start with Basic DSA Concepts
&lt;/h3&gt;

&lt;p&gt;Begin your DSA journey by learning basic data structures and algorithms. This foundational knowledge will help you tackle more complex problems later on.&lt;/p&gt;

&lt;p&gt;Action Steps:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Study fundamental data structures (e.g., arrays, linked lists, stacks, queues).&lt;/li&gt;
&lt;li&gt;Understand basic algorithms (e.g., sorting, searching).&lt;/li&gt;
&lt;li&gt;Use resources like textbooks or online courses to grasp these concepts.&lt;/li&gt;
&lt;/ol&gt;

&lt;h3&gt;
  
  
  5. Practice on Popular Coding Platforms
&lt;/h3&gt;

&lt;p&gt;Once you have a basic understanding of DSA, start practicing problems on popular coding platforms. These platforms offer a wide range of problems to help you improve your skills and build confidence.&lt;/p&gt;

&lt;p&gt;Action Steps:&lt;/p&gt;

&lt;p&gt;Here are the points to remember:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Register on platforms like LeetCode, GeeksforGeeks (GFG), CodeChef, and Coding Ninjas.&lt;/li&gt;
&lt;li&gt;Solve problems categorized by difficulty and topic.&lt;/li&gt;
&lt;li&gt;Track your progress and review solutions to learn from mistakes.&lt;/li&gt;
&lt;/ol&gt;

&lt;h3&gt;
  
  
  6. Participate in Coding Contests
&lt;/h3&gt;

&lt;p&gt;Engage in coding contests to test your skills under time constraints and compete with others. Contests are an excellent way to challenge yourself and gain practical experience.&lt;/p&gt;

&lt;p&gt;Action Steps:&lt;/p&gt;

&lt;p&gt;Remember the following points:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Participate in regular contests hosted by platforms like CodeChef, LeetCode, and HackerRank.&lt;/li&gt;
&lt;li&gt;Analyze your performance and learn from the problems you find challenging.&lt;/li&gt;
&lt;li&gt;Use contests as a way to measure your progress and identify areas for improvement.&lt;/li&gt;
&lt;/ol&gt;

&lt;h3&gt;
  
  
  7. Join Study Groups and Forums
&lt;/h3&gt;

&lt;p&gt;Connecting with peers who are also learning DSA can be incredibly motivating. Join study groups, online forums, or local coding meetups to exchange knowledge and stay motivated.&lt;/p&gt;

&lt;p&gt;Action Steps:&lt;/p&gt;

&lt;p&gt;Remember the following points:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Participate in online forums such as Stack Overflow or Reddit.&lt;/li&gt;
&lt;li&gt;Join study groups on platforms like Discord or Slack.&lt;/li&gt;
&lt;li&gt;Attend local or virtual coding meetups and hackathons.&lt;/li&gt;
&lt;/ol&gt;

&lt;h3&gt;
  
  
  8. Focus on Problem-Solving Skills
&lt;/h3&gt;

&lt;p&gt;While understanding theory is important, developing problem-solving skills is equally crucial. Practice applying algorithms to solve real-world problems to strengthen your analytical skills.&lt;/p&gt;

&lt;p&gt;Action Steps:&lt;/p&gt;

&lt;p&gt;Remember the following points:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Work on a variety of problems, including real-world scenarios.&lt;/li&gt;
&lt;li&gt;Analyze different approaches to solving the same problem.&lt;/li&gt;
&lt;li&gt;Review solutions and learn from others' code.&lt;/li&gt;
&lt;/ol&gt;

&lt;h3&gt;
  
  
  9. Track Your Progress and Stay Consistent
&lt;/h3&gt;

&lt;p&gt;Consistency is key in mastering DSA. Regular practice and tracking your progress will help you stay on course and achieve your goals.&lt;/p&gt;

&lt;p&gt;Action Steps:&lt;/p&gt;

&lt;p&gt;Remember the following points:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Keep a record of problems solved and topics covered.&lt;/li&gt;
&lt;li&gt;Set short-term and long-term goals for your DSA journey.&lt;/li&gt;
&lt;li&gt;Reward yourself for milestones achieved to maintain motivation.&lt;/li&gt;
&lt;/ol&gt;

&lt;h3&gt;
  
  
  10. Seek Help When Needed
&lt;/h3&gt;

&lt;p&gt;If you find yourself stuck on a concept or problem, don't hesitate to seek help. Online resources, mentors, and coding communities can provide valuable assistance and guidance.&lt;/p&gt;

&lt;p&gt;Action Steps:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Post questions on forums or seek help from peers.&lt;/li&gt;
&lt;li&gt;Watch tutorials or read articles on challenging topics.&lt;/li&gt;
&lt;li&gt;Reach out to mentors or join online courses for additional support.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Conclusion:&lt;br&gt;
Returning to DSA after a hiatus is Entirely feasible with the right approach and mindset. By evaluating your current situation, establishing a solid programming foundation, devising a structured plan, honing your skills on coding platforms, participating in contests, and maintaining consistency, you can effectively reignite your DSA journey. Remember, the key is to stay motivated, practice regularly, and seek help when needed. Embrace the challenge and savor the learning process—your future self will Thank you!&lt;/p&gt;

&lt;p&gt;ALL THE BEST FROM MY SIDE&lt;/p&gt;

</description>
      <category>cpp</category>
      <category>dsa</category>
      <category>programming</category>
      <category>sde</category>
    </item>
    <item>
      <title>Getting Started with the MERN Stack</title>
      <dc:creator>Manan Sarraf</dc:creator>
      <pubDate>Mon, 22 Jul 2024 03:14:40 +0000</pubDate>
      <link>https://dev.to/manan_sarraf_73/getting-started-with-the-mern-stack-385n</link>
      <guid>https://dev.to/manan_sarraf_73/getting-started-with-the-mern-stack-385n</guid>
      <description>&lt;ol&gt;
&lt;li&gt;Introduction to the MERN Stack&lt;/li&gt;
&lt;li&gt;Setting Up Your Development Environment&lt;/li&gt;
&lt;li&gt;Creating the Backend with Node.js and Express.js&lt;/li&gt;
&lt;li&gt;Connecting to MongoDB&lt;/li&gt;
&lt;li&gt;Building the Frontend with React&lt;/li&gt;
&lt;li&gt;Integrating the Frontend and Backend&lt;/li&gt;
&lt;li&gt;Running and Testing Your Application&lt;/li&gt;
&lt;li&gt;Conclusion&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;--&amp;gt; &lt;strong&gt;Introduction to the MERN Stack&lt;/strong&gt;&lt;br&gt;
The MERN stack is a combination of technologies that allows you to build full-stack applications using JavaScript. Here’s a brief overview of each component:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;MongoDB: A NoSQL database system that utilizes a document-oriented data model, allowing for flexible and scalable data storage.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Express.js: A robust web application framework for Node.js, dedicated to facilitating the development of web applications and APIs with its minimalistic and flexible nature.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;React: A prominent JavaScript library for crafting dynamic and interactive user interfaces, maintained by Facebook with a focus on efficiency and component reusability.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Node.js: A powerful JavaScript runtime environment built on Chrome's V8 JavaScript engine, enabling the execution of JavaScript code on the server-side, and adept at handling concurrent requests with its event-driven architecture.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;MongoDB: A NoSQL database that stores data in JSON-like documents.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Express.js: A web application framework for Node.js, designed for building web applications and APIs.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;React: A JavaScript library for building user interfaces, maintained by Facebook.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Node.js: A JavaScript runtime built on Chrome's V8 JavaScript engine, allowing you to run JavaScript on the server.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;--&amp;gt; &lt;strong&gt;Setting Up Your Development Environment&lt;/strong&gt;&lt;br&gt;
Sure, here's a clearer version of the text:&lt;/p&gt;

&lt;p&gt;Before we begin, please ensure that the following are installed on your machine:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Node.js and npm (Node Package Manager)&lt;/li&gt;
&lt;li&gt;MongoDB (You can utilize MongoDB Atlas for a cloud-based solution)&lt;/li&gt;
&lt;li&gt;A code editor such as Visual Studio Code&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;To verify if Node.js and npm are installed, run the following commands in your terminal:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F6hfd2yqm4u6nqkue1wun.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F6hfd2yqm4u6nqkue1wun.png" alt="Image description" width="800" height="128"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;--&amp;gt; ** Creating the Backend with Node.js and Express.js**&lt;br&gt;
First, let's create a new directory for our project and navigate into it:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F0p568ogqu3zl6mwfs36a.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F0p568ogqu3zl6mwfs36a.png" alt="Image description" width="800" height="124"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Initialize a new Node.js project:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fnjai4bqafnd4902qu30a.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fnjai4bqafnd4902qu30a.png" alt="Image description" width="800" height="91"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Install express.js&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fg5d7gzyirc4mqrkic628.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fg5d7gzyirc4mqrkic628.png" alt="Image description" width="800" height="92"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Create an index.js file in the root of your project:&lt;br&gt;
const express = require('express');&lt;br&gt;
const app = express();&lt;/p&gt;

&lt;p&gt;app.get('/', (req, res) =&amp;gt; {&lt;br&gt;
  res.send('Hello, MERN Stack!');&lt;br&gt;
});&lt;/p&gt;

&lt;p&gt;const PORT = process.env.PORT || 5000;&lt;br&gt;
app.listen(PORT, () =&amp;gt; console.log(&lt;code&gt;Server running on port ${PORT}&lt;/code&gt;));&lt;/p&gt;

&lt;p&gt;Run the server:&lt;br&gt;
node index.js&lt;/p&gt;

&lt;p&gt;Note: You should see the message Server running on port 5000. Visit &lt;a href="http://localhost:5000" rel="noopener noreferrer"&gt;http://localhost:5000&lt;/a&gt; in your browser to see the message "Hello, MERN Stack!".&lt;/p&gt;

&lt;p&gt;--&amp;gt; &lt;strong&gt;Connecting to MongoDB&lt;/strong&gt;&lt;br&gt;
Install the MongoDB driver:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fekzy5xn66sj9h9bb8e5b.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fekzy5xn66sj9h9bb8e5b.png" alt="Image description" width="800" height="94"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Update index.js to connect to MongoDB:&lt;br&gt;
const express = require('express');&lt;br&gt;
const mongoose = require('mongoose');&lt;br&gt;
const app = express();&lt;/p&gt;

&lt;p&gt;// Connect to MongoDB&lt;br&gt;
mongoose.connect('mongodb://localhost:27017/mern-tutorial', {&lt;br&gt;
  useNewUrlParser: true,&lt;br&gt;
  useUnifiedTopology: true,&lt;br&gt;
})&lt;br&gt;
.then(() =&amp;gt; console.log('MongoDB connected'))&lt;br&gt;
.catch((err) =&amp;gt; console.log(err));&lt;/p&gt;

&lt;p&gt;app.get('/', (req, res) =&amp;gt; {&lt;br&gt;
  res.send('Hello, MERN Stack!');&lt;br&gt;
});&lt;/p&gt;

&lt;p&gt;const PORT = process.env.PORT || 5000;&lt;br&gt;
app.listen(PORT, () =&amp;gt; console.log(&lt;code&gt;Server running on port ${PORT}&lt;/code&gt;));&lt;/p&gt;

&lt;p&gt;Note: Make sure your MongoDB server is running. If you're using MongoDB Atlas, replace the connection string with your Atlas connection string.&lt;/p&gt;

&lt;p&gt;--&amp;gt; Building the Frontend with React&lt;br&gt;
In the root of your project directory, run the following command to create a new React app:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fr6wnl6du9h6fski584h9.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fr6wnl6du9h6fski584h9.png" alt="Image description" width="800" height="93"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Navigate to the client directory:&lt;br&gt;
&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fr3clslkgul7i0nkadppk.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fr3clslkgul7i0nkadppk.png" alt="Image description" width="800" height="92"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Start the React development server:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3hpfuv3daf3kyz9s6lig.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3hpfuv3daf3kyz9s6lig.png" alt="Image description" width="800" height="99"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Note:You should see the default React app running at &lt;a href="http://localhost:3000" rel="noopener noreferrer"&gt;http://localhost:3000&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;--&amp;gt; &lt;strong&gt;Integrating the Frontend and Backend&lt;/strong&gt;&lt;br&gt;
We'll set up a simple proxy to connect our React frontend with the Express backend. In the client directory, open the package.json file and add the following proxy configuration:&lt;/p&gt;

&lt;p&gt;"proxy": "&lt;a href="http://localhost:5000" rel="noopener noreferrer"&gt;http://localhost:5000&lt;/a&gt;"&lt;/p&gt;

&lt;p&gt;Now, let's fetch data from the backend. In the client/src/App.js file, update the component to fetch data from the Express server:&lt;br&gt;
import React, { useEffect, useState } from 'react';&lt;br&gt;
import './App.css';&lt;/p&gt;

&lt;p&gt;function App() {&lt;br&gt;
  const [message, setMessage] = useState('');&lt;/p&gt;

&lt;p&gt;useEffect(() =&amp;gt; {&lt;br&gt;
    fetch('/')&lt;br&gt;
      .then(response =&amp;gt; response.text())&lt;br&gt;
      .then(data =&amp;gt; setMessage(data));&lt;br&gt;
  }, []);&lt;/p&gt;

&lt;p&gt;return (&lt;br&gt;
    &lt;/p&gt;
&lt;br&gt;
      &lt;br&gt;
        &lt;h1&gt;{message}&lt;/h1&gt;
&lt;br&gt;
      &lt;br&gt;
    &lt;br&gt;
  );&lt;br&gt;
}

&lt;p&gt;export default App;&lt;/p&gt;

&lt;p&gt;--&amp;gt; &lt;strong&gt;Running and Testing Your Application&lt;/strong&gt;&lt;br&gt;
To run the entire application, open two terminal windows. In the first window, navigate to the root of your project directory and start the Express server:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbjke2qjhev7ly0jvb3yw.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbjke2qjhev7ly0jvb3yw.png" alt="Image description" width="800" height="92"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;In the second window, navigate to the client directory and start the React development server:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F5grkng3yeg6a3k07jyrb.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F5grkng3yeg6a3k07jyrb.png" alt="Image description" width="800" height="88"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;--&amp;gt; &lt;strong&gt;Conclusion&lt;/strong&gt;&lt;br&gt;
Congratulations! You've successfully set up a basic MERN stack application. You now have a foundation to build more complex applications using MongoDB, Express.js, React, and Node.js. Keep exploring and adding features to your application to enhance your skills and understanding of the MERN stack.&lt;/p&gt;

&lt;p&gt;Feel free to share your progress and ask questions in the developer community. Happy coding!&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>javascript</category>
      <category>beginners</category>
      <category>programming</category>
    </item>
  </channel>
</rss>
