DEV Community: Kajal Deore

MERN Stack Practice

Kajal Deore — Tue, 28 Jan 2025 05:14:17 +0000

10 Practical Components to Build While Learning MERN Stack

Kajal Deore ・ Jan 19

10 Practical Components to Build While Learning MERN Stack

Kajal Deore — Sun, 19 Jan 2025 17:11:32 +0000

The MERN stack—comprising MongoDB, Express.js, React.js, and Node.js—is an excellent choice for full-stack development. If you’re diving into MERN development and prefer a hands-on approach, building modular components is a great way to hone your skills. Here are 10 practical components and features you can create to strengthen your MERN stack expertise:

1. Authentication System
Start with the basics: create secure login and sign-up forms. Add validation on both the frontend (React) and backend (Node.js with Express). Use JSON Web Tokens (JWT) for user authentication and include a "Forgot Password" feature to handle password resets.

Key Features:

User authentication with JWT.
Password hashing using Bcrypt.
Email-based password reset functionality.

2. User Dashboard

Design a personalized dashboard that displays user-specific data after login. This project will help you manage protected routes and dynamically fetch user-related content from your backend.

Key Features:

Personalized greetings.
Display recent activity or saved items.
Editable profile information.

3. CRUD Operations
CRUD (Create, Read, Update, Delete) operations are the backbone of any application. For practice, build a task manager or a simple blog application.

Key Features:

Add, view, edit, and delete tasks or posts.
Maintain a database using MongoDB.
Use pagination for listing tasks or posts.

4. E-Commerce Features
Step into the world of e-commerce by creating components for product listing, cart management, and order processing.

Key Features:

Product filtering and sorting.
Cart and wishlist functionality.
Order summary and history pages.

5. Social Media Features
Simulate a mini social network by creating user profiles, a follow/unfollow system, and post interactions.

Key Features:

User profiles with editable details.
Post creation, likes, and comments.
Display a feed of posts from followed users.

6. File Management System
Implement a file upload and management system to allow users to upload profile pictures or documents.

Key Features:

File upload using Multer.
Display uploaded files in the user interface.
Limit file types and sizes for uploads.

7. Real-time Features
Build real-time functionality like chat or notifications using Socket.io. This will help you learn how to handle WebSocket communication.

Key Features:

Real-time messaging between users.
Live notifications for actions like receiving a message or a new follower.
Indication of online/offline status.

8. Admin Panel
Create an admin dashboard to manage users, content, and analytics. This project will teach you about role-based access control (RBAC).

Key Features:

View and manage users.
Assign roles and permissions.
Display site activity metrics.

9. API Integration
Practice integrating third-party APIs by building a feature-rich application.

Key Features:

Integrate a weather API to display forecasts.
Fetch news articles from a public news API.
Combine multiple APIs for a dashboard-like experience.

10. Mapping and Location Features
Learn how to work with location-based features using mapping APIs like Google Maps.

Key Features:

Add a map interface.
Allow users to pin and search locations.
Display routes between two points.

Final Thoughts
Building modular components not only enhances your technical knowledge but also gives you a portfolio of mini-projects to showcase your skills. Start with simpler components and gradually move to more complex features. By the time you’ve completed these projects, you’ll be proficient in the MERN stack and ready to tackle full-scale applications.

Getting Started with MERN Stack: A Beginner's Guide

Kajal Deore — Sun, 12 Jan 2025 08:42:41 +0000

What is the MERN Stack?

MERN is like the Avengers of web development—a team of superheroes working together to create awesome web apps. Here’s the squad:

MongoDB: The chill database that stores your data in JSON-like documents. Flexible, just like your plans on a Friday night.
Express.js: The backend wizard that makes server-side development a breeze. Think of it as the brain behind the operation.
React.js: The cool kid on the block, responsible for building dynamic and interactive user interfaces. Your users will love it.
Node.js: The silent powerhouse that runs JavaScript on the server. It’s like the friend who’s always there when you need them.

Together, they make web development smooth, fast, and—dare we say it—fun.

Why Choose MERN?

Here’s why MERN is worth your time (and sleepless nights):

One Language to Rule Them All: JavaScript everywhere! Frontend, backend, database—all in one language. It’s like having a universal remote.
Scalability Goals: From your tiny side project to the next billion-dollar app, MERN scales like a pro.
Community Power: Got stuck? Google it. The MERN community probably has a meme—uh, solution—for your problem.
Customizable AF: Open-source tech means you can tweak it to your heart’s content. Go wild (but maybe keep some sanity).

Setting Up Your Environment

Before you start building your MERN masterpiece, you need to set the stage. Here’s your checklist:

Node.js and npm: Get them from Node.js official website. They’re like bread and butter—can’t live without them.
MongoDB: Download it from MongoDB official website. Pro tip: Don’t let the NoSQL term scare you. It’s not a big deal.
Code Editor: VS Code is the Netflix of code editors. Everyone uses it, and it’s great.

Verify your setup like a boss:

node -v
npm -v
mongo --version

Your First MERN App

1. Initialize the Project

Start by creating a new project. Think of it as your baby.

mkdir mern-app
cd mern-app
npm init -y

2. Set Up the Backend

Install the backend goodies:

npm install express mongoose dotenv

Create an index.js file and give life to your backend:

const express = require('express');
const mongoose = require('mongoose');
require('dotenv').config();

const app = express();
const PORT = process.env.PORT || 5000;

// Middleware
app.use(express.json());

// Routes
app.get('/', (req, res) => {
  res.send('Welcome to the MERN Stack!');
});

// MongoDB Connection
mongoose.connect(process.env.MONGO_URI, { useNewUrlParser: true, useUnifiedTopology: true })
  .then(() => console.log('MongoDB Connected'))
  .catch(err => console.log(err));

app.listen(PORT, () => console.log(`Server running on port ${PORT}`));

3. Set Up the Frontend

Switch gears to the frontend:

npx create-react-app client

Kickstart the React server:

cd client
npm start

4. Connect Backend and Frontend

Use the axios library to talk to your backend like besties.
Add this proxy setting in the React package.json file to avoid awkward silences:

"proxy": "http://localhost:5000"

Now, watch your frontend and backend have a smooth convo.

Learning Resources

Here’s your MERN stack syllabus (minus the boring lectures):

React Documentation (for when React ghosts you).
Express.js Docs (your backend cheat sheet).
MongoDB Docs (database for dummies).
Node.js Docs (JavaScript runs the world—or at least this stack).

Tips for Beginners

Keep It Simple: Don’t build the next Facebook right away. Start with a to-do list. Trust us.
Learn by Doing: Reading is great, but nothing beats rolling up your sleeves and coding.
Google is Your BFF: Stuck? Someone, somewhere, has already faced the same problem.
Master JavaScript: It’s the backbone of MERN. Nail the basics, and the rest will follow.

Conclusion

The MERN stack is your golden ticket to the web development world. It’s powerful, beginner-friendly, and super fun to work with. So, what are you waiting for? Fire up your terminal, and let’s get coding!

Remember, every expert was once a beginner who refused to give up. You got this! 🚀

A Beginner’s Guide to GSSOC, SWOC, Open Source and the GitHub Glow-Up

Kajal Deore — Sun, 05 Jan 2025 09:55:26 +0000

Contributing to Open Source with GSSOC & SWOC

If you’ve registered for GSSOC (GirlScript Summer of Code) or SWOC (Social Winter of Code) but still find yourself asking:

❔ How do I actually contribute to an open-source project?

❔ Where do I start?

❔ "Merge conflicts" sound intimidating to you?

Don't worry—you’re not alone! (I had the same issue) 😅

Let me be a little shameless here…

👩‍💻 Check out my GitHub profile — KajalDeore04. Follow me or give my repo a star and make me famous! 🌟

First of all, let me tell you that contributing to open source is truly amazing. I didn’t realize how much I’d enjoy it when I first registered.

Why YOU should start contributing:

Test your programming skills and become a God-level programmer! 🗿
Get better at using Git and GitHub. Your GitHub graph will be stacked! 💪🔥
End the cycle of sitting and wondering, "Where do I even start coding?"

Steps to Get Started:

Step 1: Find a Bug or Suggest a Feature

Start by exploring the repository for issues. Found a bug or want to add something cool? Create an issue or pick one that’s already listed and wait until the admin assigns it to you. Boom, you're ready to dive in! 🏊‍♂️

Step 2: Fork the Repo 🍴

Fork the repository you want to work on—this creates your personal copy of the project. Essential, since you can’t directly edit the admin’s repository.

Step 3: Create a Local Repository 📁

Click on "Code" and copy the Link.

git clone <copied link>

Step 4: Start Working in Your Code Editor 💻

Solve the issue and once done…

Step 5: Create a New Branch 🌿

Never work directly on the main branch. Instead, create a new branch for each task:

git checkout -b "branch-name"

Use descriptive names:

For bugs: bug/<issueNo>-<bugName>
For features: feat/<issueNo>-<featName>

Step 6: Push Your Code ✨

Stage your changes:

git add .

Commit with a message:

git commit -m "commit message"

Push it to your branch:

git push

Set the upstream branch when prompted:

git push --set-upstream origin branch-name

Step 7: The PR Party 🎉

Create a Pull Request (PR) to share your changes.

Select your branch for merging.
Mention the issue you’re solving using keywords like fixes: #42.
Describe your changes—why you made them and how they work. Attach screenshots if applicable! 📸

After Party — Keep the Main Branch Fresh 🌱

Once your PR is complete:

git switch main  
git pull upstream main

Create your next branch from the updated main:

git checkout -b "new-branch-name"

Uh-Oh, Merge Conflicts! 😱

When merge conflicts occur:

Pull the latest changes:

  git pull upstream main

Resolve conflicts by deciding what stays and what goes:

  git add .  
  git rebase --continue  
  git commit -m "Resolved merge conflicts."

Push your changes:

  git push -f

Pro Tip: Stay Updated 🔄

Keep your fork synced with the original repository to avoid conflicts:

git pull upstream main  
git push

That’s It! 🎉

Still here? Checkout my GitHub profile — KajalDeore04. Follow me or give my repo a star and make me famous! 😅🌟

Congratulations! You’ve mastered the art of contributing like a pro. Keep your branches tidy, PRs descriptive, and screenshots plentiful. Happy coding, and may the Git be with you! ✨