DEV Community: Aryan Neupane

🚀 Building StayEase: My Full-Stack Vacation Rental Platform (Node.js + MongoDB + Bootstrap)

Aryan Neupane — Tue, 12 Aug 2025 01:33:20 +0000

Hey folks! 👋 I’m excited to share my latest project — StayEase, a full-stack web application I built to streamline vacation rental bookings.
It’s live here:https://stayease-9sga.onrender.com/

🌟 The Idea

Booking vacation rentals online can feel overwhelming — multiple tabs, hidden fees, sketchy listings. I wanted to build something simple, clean, and trustworthy for travelers and hosts alike.

StayEase is my take on that challenge:

Guests can discover, browse, and securely book vacation properties.
Hosts can list their properties with rich details and images.
Both sides enjoy a smooth, intuitive interface.

🛠️ Tech Stack

I went with a Node.js + Express backend and MongoDB Atlas for cloud database hosting, paired with Bootstrap for a clean, responsive UI.

Here’s the full stack:

Frontend: EJS templates, Bootstrap 5, Vanilla JS
Backend: Node.js, Express.js
Database: MongoDB Atlas (Mongoose ODM)
Auth & Security: Passport.js, bcrypt, Helmet, express-session
Hosting: Render.com (backend) + MongoDB Atlas (database)
Image Handling: Cloudinary for image storage

🔑 Key Features

📍 Listings Page – Browse properties with images, descriptions, and locations.
📝 Create & Edit Listings – Hosts can manage their properties easily.
🔐 User Authentication – Secure login/signup with encrypted passwords.
💬 Reviews & Ratings – Guests can leave feedback on properties.
🛡️ Secure Payments (Future Scope) – Planned Stripe integration.

⚙️ Architecture

views/        # EJS templates
routes/       # Express route handlers
models/       # Mongoose schemas
public/       # Static assets (CSS, JS, images)
app.js        # Main application entry point

MVC Pattern for organized separation of concerns
Middleware for authentication, authorization, and error handling
Modular route structure for scalability

🚀 Deployment

Database: Hosted on MongoDB Atlas for global accessibility
Backend: Hosted on Render.com (free tier works great for dev/testing)
Environment Variables: Managed securely with .env files (never committed to git!)

💡 Lessons Learned

UI consistency matters — aligning all pages to a unified Bootstrap theme makes a huge difference.
Cloud database setup — MongoDB Atlas made deployments painless compared to local DB hosting.
Security early on — Helmet + session management from day one saved me from late-stage headaches.
Keep routes clean — splitting routes by resource type (listings.js, users.js) keeps the codebase readable.

🔮 What’s Next

Search & Filter — Make it easier to find properties by location, price, amenities.
Payments Integration — Stripe or PayPal for seamless bookings.
User Dashboard — Personalized area for bookings, favorites, and hosting tools.

🙌 Final Thoughts

StayEase was a fun challenge that helped me sharpen my full-stack development skills — from database design to deployment.

Check out the repo here: https://github.com/AryanNeupane/StayEase
Live demo: https://stayease-9sga.onrender.com/

💬 What do you think? I’d love your feedback on the UI, features, or any ideas for improvements!

Express v5 Error: “Missing parameter name at position 1” — Caused by * in Routes

Aryan Neupane — Sun, 20 Jul 2025 12:19:37 +0000

While upgrading a Node.js project from Express v4 to v5, I encountered a confusing error that looked something like this:

At first, I thought it was something deep in the code, but after narrowing it down, the issue came from this familiar catch-all route:

js
// Express v4
app.all("*", (req, res) => { res.send("Not Found"); });

Turns out, Express v5 introduced a breaking change to how route paths are matched using path-to-regexp.

🧨 The Problem
In Express v5, wildcards must now be named. That means * alone is no longer valid.
Using /* or "*" without a name causes the following internal error:
Missing parameter name at position X
(comes from path-to-regexp used internally by Express)
✅ The Fix
To fix this, you need to name the wildcard route like so:
// Updated for Express v5
app.all("/*splat", (req, res) => { res.send("Not Found"); });

Or to catch root path / as well:
app.all("/{*splat}", (req, res) => { res.send("Not Found"); });
📌 What Changed?
In Express v5, the path-to-regexp matching syntax was updated. Wildcards like * must now follow the same naming rule as :param. So use /*splat or /{*splat} instead of plain *.

You can read the official explanation here:
👉 Express v5 Migration Guide

🧠 Lesson Learned
Don’t assume that old catch-all routes will still work in Express 5. If you see weird path matching errors, always check for named wildcards. 💬 Your Turn
If you’ve run into a similar “wait, why is this broken?” moment while upgrading dependencies, share it below! Let's save others the headache.

📌 The Official Reason
“The wildcard * must have a name, matching the behavior of parameters :. Use /splat instead of /.”
https://expressjs.com/en/guide/migrating-5.html#path-syntax

🧠 My Takeaway
Even a small syntax like "*" can lead to a confusing stack trace when libraries upgrade. Always check migration guides for subtle changes like this.

💬 Your Turn
If you’ve run into a similar “wait, why is this broken?” moment while upgrading dependencies, share it below! Let's save others the headache.

How I Built My First Employee Management System in React Without a Backend 🚀

Aryan Neupane — Sat, 26 Apr 2025 08:34:22 +0000

Hello developers! 👋
I’m Aryan Neupane, currently on a mission to become a full-time cross-platform app developer in 6 months.
Today, I’m super excited to share my journey of building my first full Employee Management System (EMS) — entirely using React, Context API, and LocalStorage (without a real backend!).

https://github.com/AryanNeupane/Employee-Management-System.git

🛠️ The Motivation
When I started learning React, I wanted to challenge myself by building something more than just a To-Do list or simple app.
That’s how the idea of creating an Employee Management System came in — a system that handles user login, role-based dashboards, and task management.

⚙️ What I Built
Authentication Simulation:

Separate login for Admin and Employees.

Handled using React's Context API and stored session info in LocalStorage.

Separate Dashboards:

Admins can manage employees and assign tasks.

Employees can view their assigned tasks.

Task Management:

Create, view, assign, and delete tasks.

Data persists across browser reloads via LocalStorage.

State Management:

Created AuthContext for authentication state.

Created TaskContext for managing tasks.

🛠 Tech Stack Used
ReactJS

Context API

JavaScript (ES6)

HTML5/CSS3

LocalStorage (for simulating backend persistence)

🧠 Key Learnings
Handling authentication flows without using libraries like Firebase.

Managing state globally with Context API.

Structuring bigger React apps into separate components and contexts.

Working with LocalStorage to save and retrieve data dynamically.

📈 Challenges Faced
Managing who is logged in and redirecting to the right dashboard.

Persisting tasks separately for employees and admins.

Structuring state between multiple Context Providers.

But overcoming these made me much stronger with React fundamentals! 🚀

🔥 What’s Next?
Learn and build apps in React Native (mobile app development!)

Connect future projects to real databases (e.g., Firebase, Supabase).

Keep building my portfolio with real-world projects!

📢 Final Words
If you're just starting out in web or app development,
I highly recommend you try building a real system like this early on.
It teaches you authentication, state management, and thinking like a full-stack developer — even without a backend!

Thanks for reading! 🙌
If you want to follow my journey, feel free to connect with me here or on LinkedIn.
Let’s keep building together! 🚀

I Built My First Weather App Using React & OpenWeatherMap API — A Beginner’s Experience

Aryan Neupane — Tue, 22 Apr 2025 19:10:24 +0000

I Built My First Weather App Using React & OpenWeatherMap API — A Beginner’s Experience

Hi Devs 👋

I'm Aryan Neupane, and I recently started my 6-month journey to become a full-time cross-platform app developer. I’ve been sharing my learning in public, and today I’m excited to share my experience building a weather app using React and the OpenWeatherMap API.
This was my first time working with APIs — and wow, it felt like leveling up!

🧠 What I Wanted to Learn

I didn’t just want to follow a tutorial and copy-paste code. My goal was to understand how to build a real-world feature.

Here’s what I focused on:

Making a city-based weather search
Using an external API (OpenWeatherMap)
Handling user input
Managing states in React
Dealing with errors (like invalid cities)

⚙️ How the App Works

The user types a city name
When they click “Get Weather”, the app fetches data from the OpenWeatherMap API
It displays temperature, weather condition, and location
If something goes wrong (like an empty or wrong input), the app shows a friendly error message

📚 What I Learned

React Hooks — especially useState and useEffect
How to fetch data using the fetch() API
Basic async/await concepts
Conditionally rendering based on loading/error state
Reading API docs and making sense of JSON

This was also my first time feeling like I was “talking to the internet” through APIs — and it was kind of magical 😄

🖥️ Tech Stack

React (with Vite)
OpenWeatherMap API
Basic CSS ## GitHub
🧑‍💻 GitHub Repo: https://github.com/AryanNeupane/React-Weather-App.git ## live on : https://react-weather-app-aryanneupanes-projects.vercel.app/ ## 🧠 Final Thoughts

This might be a small project, but it taught me how to bring dynamic data into my app and make it interactive for users. I feel way more confident now to try APIs and build real apps.

If you're just starting out — trust me — it’s okay to feel confused at first. But once you see that weather data show up after your first fetch request... you’ll feel unstoppable.

🧵 Follow My Journey

I'm learning in public every day!

Come say hi on [X] https://x.com/AryanNe2060 or
[LinkedIn] https://www.linkedin.com/in/aryanneupane/ 😊

And feel free to share your projects with me too!

React #100DaysOfCode #BeginnerDev #APIs #OpenWeatherMap #LearningInPublic #WebDev

I Built My First React App: A Beginner's Walkthrough of a Simple To-Do App.

Aryan Neupane — Fri, 18 Apr 2025 17:26:56 +0000

Hey everyone!
I'm currently on a 6-month journey to become a job-ready cross-platform app developer. I'm learning in public and sharing everything I build.

Today, I want to share my first React app — a simple To-Do List — and walk you through what I learned as a complete beginner.

⚙️ What I Used
React (with Vite)
JSX for templating
useState for handling state
Basic HTML/CSS
Visual Studio Code
Git + GitHub for version control

📚 Key Concepts I Learned
JSX: How HTML works inside JS
Components: Reusable building blocks
State with useState(): To store & update task lists
Event Handling: Buttons, inputs, and how React responds to user actions
Rendering Lists: Using .map() to display tasks dynamically
Conditional Rendering: Show/hide things based on logic

Hers
💻 How the App Works

User enters a task in the input field
Clicks “Add” to add it to the list
Can remove tasks by clicking “Delete”

🧠 What I Struggled With
Updating state immutably at first felt weird
Remembering when to use event.target.value
Keeping the code DRY (not repeating logic)
But figuring these things out is what made it fun!

Here's my GitHub link : https://github.com/AryanNeupane/React-Todo-app

💡 What’s Next?
Next up: diving into React Router, APIs, and then heading into React Native to start building mobile apps!

🙌 Final Thoughts
If you're also starting out with React, I hope this blog gives you a real idea of how it feels to build your first project. It's challenging but totally doable if you stick to it.

Let’s keep building and learning together!