DEV Community: Alexandru Ene

Get Started with React Hook Form

Alexandru Ene — Mon, 17 Nov 2025 10:17:13 +0000

Introduction

Hi, guys!

Recently, I spent some time improving my React skills. And the feeling that I will never know enough never goes away, but that is another talk. Just know it is perfectly normal to feel this way.

This is how I found out about React Hook Form. Ok, actually, it wasn't first time I heard about it, but now I just decided to learn more about it. So I just read their docs a little bit and decided I will share the knowledge with you.

I won't dive too deep into the subject. The goal is to get as familiar as possible with this library.

So let's get started!

What is React Hook Form and Why Should You Use It?

It is a light library that helps you manage forms easily in React.

What it offers:

Light

Provides an intuitive experience, with rich features, all of these while staying light and not relying on other dependencies.

Performance

It reduces the amount of code, it reduces the number of re-renders, due to its use of uncontrolled components by default and offers faster mounting and reduced validation computations. Because the form components don't update the state with every keystroke, the components and its children don't re-render.

Validations

React Hook Form leverages existing HTML markup and makes form validation easy.

Error Handling

It provides an errors object which you can use to retrieve errors.

Loading State

Methods like isSubmitting, isLoading, isValidating makes managing loading state more intuitive.

Installation and Basic Usage

React Hook Form is easy to setup. Start by using the following command in your terminal:

npm install react-hook-form

Imagine how you do it normally without React Hook Form:

import { useState } from 'react';

const Form = () => {
  const [ name, setName ] = useState('');

  return (
    <form>
      <input onChange={() => setName(e.target.value)} value={name} />
    </form>
  );
};

This is fine, right? It is a very small form, won't create any problems, hopefully. But what if it scales? What if instead of one input you get 10? Imagine you have to manage that huge form state, together with loading and error handling. And think about performance and the amount of code written. The number of re-renders will be huge, maybe the app will be sluggish.

And this is how it comes to the rescue. Let's demonstrate some basic usage:

import { useForm } from "react-hook-form";

export default function App() {
  const { register, handleSubmit } = useForm();
  const onSubmit = (data) => console.log(data);

  return (
    /* "handleSubmit" will validate inputs before invoking "onSubmit" */
    <form onSubmit={handleSubmit(onSubmit)}>
     {/* register your input into the hook by invoking the "register" function */}
     <input {...register("example")} />
     <input type="submit" />
    </form>
  );
}

When you call useForm(), the function returns a number of useful functions. We will talk about some of them in the next sections, but two of the most important ones are register and handleSubmit.

register function, as the name implies, will register your input into the hook and will apply validation rules to it. What does it mean? It means you now don't need useState and onChange and value to manage your input state. It is managed by React Hook Form, but leveraging uncontrolled components.

When you actually use it inside an input, the syntax is this:

<input {...register("name"), validations} />

It accepts two parameters. The first one will be a string and it's going to be a name of your choosing. Keep in mind that this is like applying a name attribute on a HTML tag and you are going to use this name with other useForm() functions as well. The second attribute is an object with validations, which we'll discuss in the next section. So you could have something like this:

import { useForm } from "react-hook-form";

export default function App() {
  const { register, handleSubmit } = useForm();
  const onSubmit = (data) => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
     <input {...register("firstName", { reguired: true, maxLength: 20 })} />
     <input type="submit" />
    </form>
  );
}

handleSubmit will receive your form data only if input validation ended successfuly. It accepts two callbacks, one for success and one for errors.

import { useForm } from "react-hook-form";

export default function App() {
  const { register, handleSubmit } = useForm();
  const onSubmit = (data) => console.log(data);
  const onError = (errors) => console.log(errors);

  return (
    <form onSubmit={handleSubmit(onSubmit, onError)}>
      <input {...register("firstName")} />
      <input {...register("lastName")} />
      <input type="email" {...register("email")} />
      <input type="submit" />
    </form>
  );
}

Validations, Error Handling and Loading

React Hook Form aligns with HTML standard for form validations. This means it supports rules like:

required
min
max
minLength
maxLength
pattern
validate

Let's see how it works:

import { useForm } from "react-hook-form";

export default function App() {
  const { register, handleSubmit } = useForm();
  const onSubmit = (data) => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
     <input {...register("firstName", { reguired: true, maxLength: 20, minLength: 1 })} />
     <input type="number" {...register("age", { required: true, min: 18, max: 99 })} />
     <input type="number" {...register("experience"), { pattern: /\d/ }}
     <input type="number" {...register("lastName"), {
       validate: { (lastName) => if (!lastName) => 'Last name is required' }
     }} 
     <input type="submit" />
    </form>
  );
}

While some of them are naturally logical and intuitive, the validate rule asks for some explanations. It is an object where you can insert as many validation methods (functions) as you need. For example:

register('fieldName', {
  validate: {
    // 1. First Validation Function
    mustBeAdult: (value) => value >= 18 || "Must be 18 or older",
    // 2. Second Validation Function
    isEvenNumber: (value) => value % 2 === 0 || "Must be an even number",
    // 3. Third Validation Function
    notZero: (value) => value !== 0 || "Cannot be zero",
  },
});

How does error handling work with validate rule? The validation functions run in the order they are defined and if a validation function returns true, validation passes for that rule.

If a function returns a string like "Must be 18 or older", that string is treated as the error message, and validation stops for that field immediately and will display the error message from the first function that fails.

There are other rules for validations inside register function as well. Read more about them here.

To handle errors in React Hook Form is easy. You first have to destructure the useForm() hook and get the formState, which you will then destructure to get errors:

import { useForm } from 'react-hook-form';

const Form = () => {
  const { register, handleSubmit, formState: {errors} } = useForm();

 return (
    <form onSubmit={handleSubmit(onSubmit)}>
     <input {...register("firstName", { reguired: 'Name required', maxLength: { value: 20, message: 'No more than 20' }} )} />
     {errors.firstName.message && <p>{errors}</p>}
     <input type="number" {...register("age", { required: true, min: { value: 18, message: 'At least 18' }, max: 99 })} />
     {errors.age.message && <p>{errors}</p>}
     <input type="submit" />
    </form>
  );
}

The syntax for writing errors is something like this:

{...register("age", { required: true, min: { value: 18, message: 'At least 18' }})}

And instead of required: true, you can also give this property a string value, which will act as an error message. Now if the field is not filled you will see 'Name required' under it. Notice that when you register your input, the errors object will get a key that will match the name you registered the input with. And that key will be an object which will hold the 'message' property. That is how you can smartly access the errors for every field. No headache required. So in our case:

  errors.firstName.message
  errors.age.message

The formState also holds other useful properties. Check them all here. We'll also discuss here some of them that are related to loading state: isSubmitting, isLoading, isValidating.

All of these three are booleans. And you guessed right, isSubmitting is true during the time the form is submitting. You might use it when you want to disable a submit button during form submission. isLoading only works with default async values and it is true when the form is loading these values. Example:

const { formState: { isLoading, isSubmitting } } = useForm({
  defaultValues: async () => await fetch('/api');
})

We didn't say anything about default values in useForm as props yet. But it is easy to understand. It's like using defaultValue in React. However, as the documentation recommends:

The defaultValues prop populates the entire form with default values. It supports both synchronous and asynchronous assignment of default values. While you can set an input's default value using defaultValue or defaultChecked (as detailed in the official React documentation), it is recommended to use defaultValues for the entire form.

So you will use isLoading if you have default values that are async, in other words, if those values, that you want as defaults for your inputs, take time until they are loaded into your form.

The last one, isValidating is going to be true during validation, otherwise false. Example for all:

import { useForm } from "react-hook-form";
import { useState } from 'react';

export default function App() {
  const [ value, setValue ] = useState();
  const { register, handleSubmit, formState: {errors, isSubmitting, isLoading, isValidating},
  } = useForm({
    defaultValues: async () => await someValue().then((value) => setValue(value)); 
  });
  const onSubmit = (data) => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
       {isValidating? <p>Validating your form...</p> : <p>Validated successfuly!</p>}
      {isLoading? <p>The value is loading</p> : <p>{value}</p>}
      <input {...register("test")} />
      <button disabled={isSubmitting? true : false}>{isSubmitting? 'Submitting...' : 'Submit'}</button>
    </form>
  );
}

UseForm Functions and Props

When you call useForm(), you make available a useful set of properties and methods. Some of them we already discussed, like register, formState, handleSubmit. Some others are unregister, setErrors, watch, setValue, reset, setFocus. And there are more.

Note that all these returned functions from useForm() have some other options as their second parameters. Chech the documentation for more information.

Now let's say a thing or two about these form above for now, just to get the hang of it.

You will want to use unregister when you need to programmatically remove a field's data and validation rules from the form state. Imagine you have some fields in your app that are conditionally rendered. Imagine a field that is not rendered if a checkbox is not checked, being conditionally rendered. Without unregistering this field, even if the field is not there visually, it exists as state and validation. When you submit the form, the form is also submitted with data from this field, that you didn't even use. You can expect some problems in your app if you don't unregister.

You can do this programatically using useEffect. This is a cleanup that will run whenever the component will unmount. So this how you remove the field's state and data.

const { unregister } = useForm();

useEffect(() => {
  return () => {
    unregister("fieldName");
  };
}, [unregister]);

However, there is another approach, a more modern one, that implies enabling automatic unregistration:

Just like using defaultValues prop, this is another prop in useForm that clean up the field state when the component unmounts and makes your code much cleaner. Note that this is false by default.

const methods = useForm({
  // Set this option to true
  shouldUnregister: true, 
});

The setErrors and setValue are both valuable when you need to programatically set other errors that are maybe not validation related, such as network errors or so and when you want to set a value, when clicking a button, for example.

const { unregister } = useForm();

// pretend it's a network error
if (networkError) {
  setError('name of the field', { type: string, message: 'Network error'});
}

// pretend you clicked a button to change an input value 
if (buttonClicked) {
  setValue('name of the field', value);
}

The reset function allows you to reset the whole form state. It accepts options which allow for partial reset. setFocus allow to set focus on a field programatically. It accept a string value, which is going to be the name of the field you want to focus on and some options as an object.

The watch function lets you subscribe to input changes. Keep in mind that this will activate re-rendering. You can watch a sinlge field, multiple fields of your choice or the entire form.

// single field
const form = watch();

// multiple fields
const names = watch([ 'firstName', 'lastName' ]);

// entire form
const name = watch("name");

The useForm() accepts props. We have already seen some of them earlier, like defaultValues, shouldUnregister. But there are many others: disabled, errors, values. And also there some specific ones that are related to validation libraries, like zod and yup, which are called resolvers. You can read more about them here.

Implementation with Zod + TypeScript

We have seen that React Hook Form also accepts validations by default. If you want to go even further, you can make use of Zod and TypeScript. These are modern ways of validating user inputs and make your app more robust.

You can create a Zod schema and apply it to the hook. This is how:
First you have to install the resolvers.

npm i @hookform/resolvers

Then you import it, create the schema and use it in the props of useForm() hook;

import { zodResolver } from '@hookform/resolvers/zod;

interface schema {
  firstName: string,
  lastName: string
}

const { register, handleSubmit } = useForm<schema>({
  resolver: zodResolver(schema)
});

This will validate your input against the schema and return with either errors or a valid result.

React Hook Form doesn't only support Zod. It also supports schema-based form validation with Yup, Superstruct or Joi.

Conclusion

I hope I made React Form Hook at least a bit more easier to start with. Now you've got the basics down... Next step is to go a little deeper according to your needs.

Check out the official documentation

As for more mature developers, what do you think about React Hook Form?

Connect with me

I am open for work, for collaborations, for freelancing or just tech related discussions.

So for anything, just let me know, leave me a message and I'll get in touch as soon as possible!

Write me an Email: alexandru.ene.dev@gmail.com
Follow me and see my work on Github: alexandru-ene-dev
Let's be friends on: LinkedIn: alexandru-ene-dev
Let's chat on Discord: alexandru.ene.dev
Find me also on Dev.to: alexandru-ene-dev

Please, do tell me if you have any sugestions for new content or how to improve it. Your feedback is important to me!

Thank you so much again for reading and I will see you in the next one soon! Happy coding! :)

Understanding Next.js Client Routing - The Fundamentals

Alexandru Ene — Thu, 23 Oct 2025 18:21:27 +0000

Intro

Hi, guys!

In this post we're going to talk about Next.js routing. This time we will only cover the core concepts of routing and in another post we will learn more about advanced concepts for a complete guide.

In this guide I am going to use TypeScript. If you use JavaScript, just remove the types where necessary.

Topics

The Core Route Files
Dynamic Routing
Typescript Helpers

The Core Route Files

To define routes in Next.js, we use file-system based routing, which mean we use files and folders from within our app.

When installing the Next.js app using:

npx create-next-app@latest

Next.js will create a folder app. You can safely delete everything inside it to remove the noise. This is of course not necessary, but I recommend doing it just to see every file in action without those boilerplate code from Next.js.

Now, let's create our first page, adding a page.tsx file inside app folder. This is actually the index page or homepage that you will see if you access http://localhost:3000.

But don't access it right now! Because you just deleted whatever was inside the app folder (if you followed my bad advice, kidding), your app is now missing essential parts, namely layout.tsx file. If you were to try to access http://localhost:3000 now without this file, you will see this error:

Missing <html> and <body> tags in the root layout

To fix this error from above, we have to create a layout.tsx file like so inside app folder:

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html>
      <body>
        {children}
      </body>
    </html>
  )
};

Notice the default export, it is mandatory.

This file's purpose is about sharing UI between pages. It's called this way because it's defined at the root of the app directory. They can say it better than me:

A layout is UI that is shared between multiple pages. On navigation, layouts preserve state, remain interactive, and do not rerender. The root layout is required and must contain html and body tags.

Imagine header, footer, aside, they persist between pages. They don't change no matter what page you are on.

The children of this function are pages and nested layout. The UI that persists, in our case Header and Footer components, is going to be a sibling of these children:

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html>
      <body>
        <Header />
        {children}
        <Footer />
      </body>
    </html>
  )
};

Keep in mind that, when creating a page, you must default export it. Otherwise, you will see a similar error:

The default export is not a React Component

export default function Page() {
  return <h1>Hello Next.js!</h1>
}

To create a route to /about or /contact or any other single routes you can think of, inside app folder, you create a new folder whose name should match the route you need. Inside this folder, it is mandatory to have a file called page.tsx.

Keep in mind that a folder inside app folder is a route only if it includes a page.tsx file.

Apart from page.tsx and layout.tsx, there is also not-found.tsx. By default, if you access a page that doesn't exist, Next.js has your back and you will see the 404 status code and a message This page could not be found.

If you like to customize it, inside app folder, add a file not-found.tsx and inside it add some code:

export default function NotFound() {
  return <div>Not found!!!</div>
};

You can also have not-found.tsx files inside your pages folders and style it differently. Next.js will look for the closest one.

So there you have it, three core files in Next.js: page.tsx, layout.tsx and not-found.tsx.

Dynamic Routing

Dynamic Routing allows us to render content for an infinite number of URL paths. It's essential for rendering product pages, blog posts, or user profiles or anything you could think of, as long as it will take an infinite amount to code manually. In the App Router, we define these dynamic segments using square brackets [].

For example, instead of manually creating a route for each individual blog post, you can create a dynamic segment to generate the routes based on blog post data.

1. Nested Routes

A nested route is a route composed of multiple URL segments. Something like this: /blog/posts/post-one. To create a nested route, for instance, just nest folders into each other:

Create a blog folder, inside it create a posts folder, then inside posts folder create post-one folder... I think you got the idea. And don't forget to include the page.tsx files inside them.

2. Dynamic Segment

This is the most common one.

In your file structure it will look like this: app/products/[slug]/page.tsx.

This segment will match /products/123 or /products/222 or /products/1000 or anything else... Could even match not only a number, since the url is a string anyway, but things like /products/shoes or /products/books.

The value (123 or 222 or shoes or books) is accessible in your page.tsx component via the params prop:

export default async function Product(
  props: PageProps<'/products/[slug]'>
) {
  const { slug } = await props.params
  return <h1>Blog post: {slug}</h1>
}

Read down below about this Typescript helper: PageProps.

3. Catch-all Segments

We use these when we need a route to match paths with one or more segments or even none (a documentation site). To use it, just think of a simple dynamic segment and add three dots before the name like so:

app/docs/[...slug]/page.tsx

This can match /docs/v1/api or /docs/get-started or /docs/v1/api/blabla or just /docs.

The parameters are received as an array of strings and you can access them by their index. So let's say the url is /docs/v1/api:

export default async function Docs(
  props: PageProps<'/docs/[...slug]'>
) {
   const array = (await params).slug;
  return <h1>Blog post: {slug}</h1>
}

In this case array will be ['v1', 'api'].

Something to notice, there should be at least one segment present in the URL, like /docs/api, whenever in the folder that contains the catch-all slug there is no page.tsx. So for example if in the folder docs you don't have a page.tsx, navigating to /docs will result in a 404 Not Found error. This can be fixed with an optional catch-all segment or just add a page.tsx inside the parent folder of the slug.

4. Optional Catch-all Segments

This is the most flexible one, allowing the route to match paths with zero or more segments.

To use it, wrap a normal catch-all segment with a new set of square brackets: app/settings/[[...slug]]/page.tsx.

This can match /settings and /settings/profile/edit or /settings/profile/edit/any-other-settings.

So what is the difference between this and a normal catch-all segment? The difference is that it also handles the base path /settings without needing a separate page.tsx file.

So to access these paths, it's not very different:

export default async function Settings(
  props: PageProps<'/settings/[[...slug]]'>
) {
   const array = (await params).slug;
  return <h1>Blog post: {slug}</h1>
}

So in case the url is /settings/account/name, for example, the array will be ['account', 'name']. If the url consists of the base only, /settings, array will be undefined, and the same in the case of a normal catch-all segment.

These dynamic patterns are the core of building scalable URL structures in Next.js. Mastering them gives you full control over your application's routes. And the good part is that they don't look so intimidating...

Typescript Helpers

When using TypeScript, we need a way to tell our components exactly what types of data they get as props. The App Router introduces two helper types that handle this by reading your file structure: PageProps and LayoutProps.

PageProps, it is used with page.tsx files. Let's imagine this piece of code, manually typed, ugly:

export default async function Page(
  { params }: 
  { params: Promise<{ slug: string }>}
) {
  const slug = (await params).slug;
  return <h1>Blog post: {slug}</h1>
}

Now this type is automatically aware of the [slug] segment and PageProps automatically infers { id: string } for params.

export default async function Page(props: PageProps<'/blog/[slug]'>) {
  const { slug } = await props.params
  return <h1>Blog post: {slug}</h1>
}

The LayoutProps helper is designed to type the components responsible for the UI structure: your layout.tsx files.

// LayoutProps ensures 'children' is correctly typed as a node.
export default function ProductsLayout({ children }: LayoutProps) {
  return (
    <section>
      <h1>Products Navigation</h1>
      {/* The entire nested route's content renders here */}
      {children} 
    </section>
  );
}

So how do helpers help?

Using these helpers is the standard and recommended practice because they keep your component types in sync with your routing, eliminate manual types and prevents errors.

These helpers ensure that if you ever change a folder name from [productId] to [itemId], TypeScript will update the required type in your page.tsx, and your code editor will send an error if you try to access the old prop name.

Conclusion

If you happened to read this far, you did notice the basics are not so hard to grasp. They are real fun, actually, I'd say. They simplify the process of routing. Compared to React Routing, where you have to install a third party dependency (React Router Dom), Next.js Routing is more friendly and effective. It's just there.

Feedback

If you did read until here, thank you so much! I hope you learned something today and I didn't waste your time.

As always, I am waiting for your feedback. I want to improve my teaching style, so you can tell me what I do wrong. I take no offense. But do offend me, I challenge you. :) Maybe we'll all learn something after all. Even tell me if you like me to write a specific post. I am happy to hear your ideas.

Connect with me

Leave me a message and I'll get in touch as soon as possible!

Write me an Email: alexandru.ene.dev@gmail.com
Follow me and see my work on Github: alexandru-ene-dev
Let's be friends on: LinkedIn: alexandru-ene-dev
Let's chat on Discord: alexandru.ene.dev

Thank you so much again for your time and I will see you in the next one soon! Happy coding! :)

My First Next.js Project - Developer Portfolio Website

Alexandru Ene — Sun, 19 Oct 2025 18:32:06 +0000

Intro

Hi, everybody! Just finished an important project, my personal portfolio as a web developer, created with Next.js. I decided that I would use a simple design, nothing too fancy, but something to practice Next.js with. And in the end I practiced even more: Tailwind, Figma, React, deployment and more... It may not be perfect, I am aware, that's why I am planning some updates in the future, but... I learned something. And it was fun! Ok, not always, but that's another talk! :)

Live Demo / GitHub

You take a look right here: LIVE DEMO

See the source code on GitHub: SOURCE CODE

Features

Project showcase with live demo and GitHub links
Downloadable resume
UX friendly
Responsive design for mobile and desktop
Light/dark theme
Simple animations

Technologies Used

Framework: Next.js
Styles: Tailwindcss
Design: Figma
Deployment: Vercel

Feedback

I always appreciate the time you spend reading my posts. I encourage you to leave me some feedback, it is always valuable for me and welcome.

If you liked it, give it a star or a comment just HERE.

And follow me for more: On Dev Community. Thank you!

Also, you can show your work too. Let's get inspired and learn from each other! :)

Connect with me

If interested, I am also open for collaborations!

So for anything, just let me know, leave me a message and I'll get in touch as soon as possible!

Write me an Email: alexandru.ene.dev@gmail.com
Follow me and see my work on Github: alexandru-ene-dev
Let's be friends on: LinkedIn: alexandru-ene-dev
Let's chat on Discord: alexandru.ene.dev

Thank you so much again for your time and I will see you in the next one soon! Happy coding! :)

Next.js - My First Impressions

Alexandru Ene — Fri, 10 Oct 2025 05:57:55 +0000

Intro

Hey, guys! Recently I've started getting familiar with Next.js. You know, I've been always so curious about learning new stuff and not just for hype or to show off because you can make an infinite carousel with your stack, but for its utility. So I wanted to share my first impressions.

What Is Next.js?

In a nutshell, it is a framework built on top of React created by Vercel, for building full-stack web applications. It takes what React can do and adds a few more features like:

Optimizations for images, fonts and scripts
Routes using the file system
CSS support, like CSS modules, Tailwind
Server side rendering (SSR)
Built-in API Routes
and more...

So far so great, I'd say!

Create Your First Next.js app

I noticed getting started is very straightforward. You just open a terminal and you go like this:

npx create-next-app@latest

So, next you will meet a few prompts like:

PS C:\Users\Alexandru\Desktop\next> npx create-next-app@latest
√ What is your project named? ... .
√ Would you like to use TypeScript? ... No / Yes
√ Which linter would you like to use? » ESLint
√ Would you like to use Tailwind CSS? ... No / Yes
√ Would you like your code inside a `src/` directory? ... No / Yes
√ Would you like to use App Router? (recommended) ... No / Yes
√ Would you like to use Turbopack? (recommended) ... No / Yes
√ Would you like to customize the import alias (`@/*` by default)? ... No / Yes
Creating a new Next.js app in C:\Users\Alexandru\Desktop\next.

And that's it. You just created a fullstack app from scratch! Well, not quite, but you are closer now!

What I Noticed

1. Built-ins
After creating the Next app, there are a lots of built-ins. Tailwind and Typescript are already configured. It also initializes a git repository and creates a .gitignore file with some stuff that you shouldn't push to git, like node_modules, .env, build.

2. Basic app structure
The folder structure is simple. It mainly looks like this:

my-next-app
  /node_modules
  /public                // some svgs here
  /src/app               // the App Router
    globals.css 
    layout.tsx           // the root layout, required
    page.tsx             // your homepage at /
  .gitignore
  next.config.ts         // app configuration
  package.json           // scripts, dependencies
  tsconfig.json          // typescript configurations

3. The Routing System
With Next.js, forget about forgeting to install the react-router-dom dependency and then ask yourself why does the console spits errors at you and your app dies. Forget about your old React Router...

There are actually two ways of doing it.

1. Inside /src/app folder, you can choose for having a /pages folder and there you setup your routes as files. Every file name should match the route path you need.

For example, if you need a route to /about, you go to /src/app/pages and there you create a file called about.tsx, if you use Typescript. And this file is your basic day-to-day React component.

2. The second choice you have is actually the new way of doing things. Inside /src/app folder you create a folder that should match your route path and inside it you create a file called page.tsx.

For example, if you need a route to /contact, you go to /src/app/, create a folder called 'contact' and then inside id create a file called 'page.tsx'.

4. The Components
It is just like having components in React. So cool! But these components are somehow special. Every time you create a component in Next.js, again, just like in React, this component is at the same time a client component and a server component, so to speak...

Whenever you check these points:

State and event handlers: onClick, onChange
Lifecycle logic: useEffect
Browser-only APIs: localStorage, window
Custom hooks you need a client component. And you have to use it like this:

'use client'

import { useState } from 'react'

export default function Button() {
  const [ state, setState ] = useState(...);
}

If you need a server component and you check these boxes:

Fetch data from databases or APIs
Use API keys, tokens, and other secrets
Reduce the amount of JavaScript sent to the browser just do nothing, your simple React component in Next.js is already a server component by default.

5. Use Effect Hook
Something interesting, when using server components and need to fetch data, you don't need useEffect anymore, without which you would cause an infinite render in React.

export default async function Page() {
  const res = await fetch(url)
  ...
}

How to Approach Learning

Recently I have tried a different approach when it comes to learning. I am giving myself a project, a big one, a great challenge. And then I am thinking about improvements I want to make or new tools or languages I would like to learn and so on. I make a quick intro, like a very small crash course for that language, tool etc, like the foundation, to get the bigger picture. Then I start working on that specific project, learning and applying what I need on that project immediately.

Something like, you want to create a blog and at the same time you want to learn Next.js or other framework. You get a short intro. And now you need to create the app. So you go documenting, googling, tutorials and then do it yourself. And then you need the navigation, which needs routing. You go learn how to do that and apply it on your blog immediately.

This is learning by building. And I noticed it sticks better. I will bring some updates on how it goes in the future.

And another tip to learn better would be to read the documentation, which is sometimes boring, I know. But it does the job.

If you want to know more, the documentation for Next.js is right HERE.

In Conclusion...

I was very excited with learning something new like Next.js. It seemed like an easy-going friend, chill and nice.

After putting lots of hours in my last project, I kinda got bored, you know. Like I needed a refreshment. I wanted to know I am not stuck. When learning new stuff, it gives you this pleasant feeling that you are moving on to the next level, that you are making progress.

Of course, this is just the beginning. There is a lot more to learn. But I am happy I did it.

Let's talk

Feel free to share your experiences in the comments. And, people that used Next.js for longer, what would be your advice?

As for me, thank you for reading and see you in the Next.js one! :)

My First Real Project - Progressio Fullstack Ecommerce Website

Alexandru Ene — Sun, 28 Sep 2025 08:03:34 +0000

Intro

After 2 months of efforts, my project is ready: a fullstack e-commerce website called Progressio. It's not real though. You can't really buy anything and not all the pages are filled. But it was so fun (not always though).

For some reasons, the code source is private. But I can walk you through if you have any questions.

Live Demo

You can login with these test credentials:
email: test@test.com
password: Test12341!

Live Demo

Features

User Registration & Login
JWT Auth with Protected Routes
Products Listing
Search
Cart & Favorites (synced with MongoDB + localStorage)
Light/Dark/OS Theme Toggle (saved per user + localStorage)
Recently Viewed Products
Profile Page with:
- Avatar
- Name & Password change
- Cart & Favorites sync
- Account Delete
Error & Success Feedback for All Actions
Fully Responsive Design
Basic Accessibility & Performance

Tech Stack

Frontend: React + TypeScript + CSS
Backend: NodeJS + Express + TypeScript
Database: MongoDB + Mongoose
Authentication: JWT (JSON Web Token)
Password Hashing: bcrypt
Deployment: Vercel & Render

A Few Words

This project started as a challenge, but it taught me a lot. I look at what I built and I know it's not perfect. There were lots of other features I wanted to implement. But I felt like moving on and had to give myself some credit. My goal of connecting all the dots together was complete. And I feel more capable now.

Feel free to tell me what you think. Your feedback is important to me.

Setting Up Node.js + TypeScript for Deployment

Alexandru Ene — Sun, 14 Sep 2025 21:24:56 +0000

Just a word before

Hey, guys! I didn't post anything in a while. I focused on a project and it was hard for me to keep up with everything. The good news is that I got into its final stage, kind of. And as soon as it is ready, I will share it here with you. Because I will really need your feedback, good or bad.

I guess I couldn't keep my word and post every week. I am truly sorry. So now that I am here, I think this is a good moment for me to remind myself to push some more. That's how we grow, right?

Introduction

Whenever I start a project and have to deal with Node and TypeScript, I always forget stuff about tsconfig.json, the scripts to include in package.json, what types to include, why on earth I get 1 million of Cannot find module and Cannot use import statement errors, why do TypeScript shout that much about types and so on.

In a nutshell, I can't remember the setup very well. And I always feel disappointed in me, like can't you just remember for once everything, but like everything, in this world? Damn...

Overview

Initialization
tsconfig.json and package.json
Scripts
Dependencies
Render Tips
Conclusion

1. Initialization

This should be easy, like very. Unless your brain decides it's not, so why not forget everything? So let's keep this in mind:

We initialize Node.js, which will create a package.json file. We'll edit this later to suit our needs.

npm init -y

We setup TypeScript: we'll have our nice tsconfig.json file, which we should be very careful about later on.

npx tsc --init

We keep our folder structure clear

/project-root
  /src
    index.ts
  /dist
  package.json
  tsconfig.json
  .env
  .gitignore

src/: our code goes here

dist/: compiled JavaScript code after running tsc

.env: for environment variables which we never commit

.gitignore: brain, remember to ignore node_modules, .env, and dist/

2. tsconfig.json and package.json

My basic modern TypeScript config is this:

{
  "extends": "@tsconfig/node22/tsconfig.json",
  "compilerOptions": {
    "outDir": "dist",
    "rootDir": "src",
    "target": "ES2022",
    "module": "nodenext",
    "moduleResolution": "nodenext",
    "strict": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "skipLibCheck": true
  },
  "include": ["src"],
  "exclude": ["dist", "node_modules"]
}

Why? It is as simple and easy to remember as possible. And it works. But, if I am here telling you this, it means I can't still remember every line. I sometimes look at them and wonder: what is your purpose? So let's quickly recap...

"extends": "@tsconfig/node22/tsconfig.json": a preset TypeScript configuration designed for Node.js targeting ES2022 that follows best practices, saves time and gives a smaller tsconfig file and up-to-date benefit. You can install it wiht this command: npm install -D @tsconfig/node22.

outDir: where the compiled JS goes - usually dist/

rootDir: where your source TypeScript files live - usually src/

target: the JS version to compile to, we use ES2022 to tell TypeScript to compile the code to JS that uses features supported in ES2022

module: what kind of JavaScript module syntax TS outputs (CommonJS, ESM), it enables the use of import/export syntax (ES Modules) instead of require and tells TypeScript to emit native ESM JavaScript instead of CommonJS (which uses require)

moduleResolution: how TypeScript finds and resolves imported modules/files, it should match module

strict: enables all strict type checks

esModuleInterop: allows default imports to work, even if those modules don't actually have a default export (like import express from 'express')

forceConsistentCasingInFileNames: all file and folder names in import paths should now match the actual casing of the files and folders, so we don’t accidentally import ./UserService instead of ./userservice

skipLibCheck: skips type-checking of node_modules and other libraries, to speed up builds and reduce type errors by not checking their .d.ts files

Now, since we’re using modern ES Modules ("module": "nodenext" in tsconfig.json), we also need to tell Node.js to treat our files as ESM - otherwise, even if you use import/export, Node will throw errors or expect require(). To do that, we add this line inside our package.json file:

"type": "module"

3. Scripts

Now it's time to define the scripts we'll use to build, run, and develop our app. Again, brain, remember this, in our package.json file we should have:

"scripts": {
  "dev": "concurrently \"tsc --watch\" \"nodemon\"",
  "build": "tsc",
  "start": "node dist/index.js"
}

"dev": "concurrently \"tsc --watch\" \"nodemon\"": When we run npm run dev, tsc --watch tells TypeScript to watch our src/ folder and automatically recompile .ts files into .js in the dist/ folder whenever we make changes. Nodemon watches our compiled files in dist/ and restarts the server when they change. So, we write TypeScript, it compiles and nodemon restarts the app. Great choice if you want to develop exactly the way your app builds.
"build": "tsc": Runs TypeScript compiler once, outputting all .js files from src/ folder into the dist/ folder. We should use this before deploying our app, especially on platforms like Render, which expects npm run build.
"start": "node dist/index.js": Starts the app by running the compiled JavaScript in the dist/ folder.

4. Dependencies

Setting up a Node + TypeScript project means installing both the libraries we use and their type definitions.

Sometimes I get stupid errors because I miss the libraries. For me, for now, these are the basics:

npm install express dotenv cors jsonwebtoken bcryptjs cookie-parser mongoose zod multer

But... TypeScript doesn’t know how to type most libraries by default, so we install in dev dependencies their @types/* versions:

npm install -D @types/express @types/node @types/cors @types/jsonwebtoken @types/cookie-parser @types/multer @tsconfig/node22 concurrently nodemon

We always include @types/node for basic Node types and the preset TS configuration we talked at point 2, @tsconfig/node22.

We also need this nodemon.json file for nodemon to work:

{
  "watch": ["dist"],
  "ext": ".js",
  "exec": "node dist/index.js",
}

5. Render Tips

I had some problems when trying to deploy my backend. It was my first time, so I missed a lot of things. I tried Heroku, but then found Render and sticked with it.

These are the steps so Render will build our app corectly and deploy for the world to see:

We must first push our project on git
For an Express basic server, when using Render we go to Dashboard, then we click Add New and select Web Service and then we select the git repository
We set the build command in Render: npm install && npm run build. Render needs first to have all the dependencies. Only after it can build correctly.
We set the start command in Render, which is: npm start.
We make sure .env variables are configured in Render before trying to deploy it. I noticed once you deploy, you can't modify the env in their dashboard. I got real crazy trying to find those settings and failed miserably. Damn... If someone knows something, just let me know in the comments.

6. Conclusion

Now I hope that after writing this I won't forget anymore how to configure my server to be deployable without any errors... And I hope this is true for you too.

Joke aside, setting up Node.js with TypeScript can feel overwhelming at first. Especially because you handle more things at once. But once you break it down step by step, it’s actually not that painful. That's always the key in understanding and doing it properly. Break it until it's not working anymore. Kidding, I mean just break it into more manageable pieces. Take more steps to accomplish a task and you will succeed.

And don't be like me, before trying to deploy, make sure you actually have a index.ts file in your src folder! Silly me!

If you find it helpful, join the comments section and say what you have on your mind. What are your tips? I'd love to hear it!

Thank you for reading and see you in the next one!

Why New Dev Posting Trend is Quite Dissapointing

Alexandru Ene — Sun, 03 Aug 2025 07:51:46 +0000

I always wanted to write. I love to write. I kept learning to code for myself for months (10 months), before making the decision to start writing blog posts. I was always so afraid to write, because I didn't think I have enough to share with others. I wanted to give something valuable and always felt that, nevermind, it is already there. So I just waited..

I remember my first post. It was here on dev. It was messy, it almost looked like I don't know what I am talking about. And yes, I had no idea what I was doing. It was a mix of a hello and some motivational speech and also some JavaScript code taken as a joke. Maybe not a good joke.

I decided to post once a week. Even considered posting twice sometimes, but it seems I can't. Even posting once a week is too much. And I have to be honest, I have to force myself to do it. I have to think about what I am gonna write. And I never know what I am going to do on Sunday. It has to be valuable for me at first, so I can decide if it is good for others to see. It is so much work and trouble. So I spend hours just to write a 2 minutes text.

And I still think about if it worth it or not. Do people actually care about my posts? Are these posts helpful? I don't wanna do it like just because. I don't wanna be lame, I don't wanna be boring, I don't wanna be like just to post there something. I want to be really good at it. But am I? Should I stop? I push myself, I force myself and I still do it. And it is not perfect, still not perfect. It will never be enought. But I see the struggle and the hard work. And I just hope it will pay off sometime. I want to be helpful. I really do.

Now, I also love reading others posts. I can find a variety of topics here on dev. And it just refreshes my memory. It's like study material. See some JavaScript tips and tricks here, some React performance stuff there, some css that I completely forgot about. It's so helpful.

But nowadays I feel something is off. And listen, I know some people will be mad on me and I am truly sorry. But I am just honest, so be honest with you too. It's like people don't care about what they post, they don't bother thinking themselves, they just copy paste. I don't see their struggle, their hard work, their knwoledge, their motivation to help others, to inspire them. Where is their passion?

I see a lot using Artificial Intelligence to autocomplete some text that they should have wrote themselves in the first place, bad use of it. I use AI, no hypocrite here. But I let it help me, I sometimes need some guidance. I don't let it control everything, I don't let AI do my job. Because he can't do it, he sucks at it really. It is just a tool, not a real developer, not a real writer.

I am so sorry about doing this, but this is a chance for everyone to realize they just tell lies to themselves, that they don't do theirselves no service. You don't get value doing this, you don't learn. Again, I hate pointing fingers, but I am trying here to prove my point, so check this out, it is a post from dev:

Check this post here

How does it look? Can you be serious about your work and still do this? Can you be satisfied? Is this enough? Is this what you are looking for when struggling on a project and need some help? Is it helpful after all? You tell me! But be honest!

That's why I think this posting trend is so dissapointing... Don't you think?

Guys, don't steal from yourself. I know it takes so much time to learn. And you also have to give something back, to post something good, helpful, reltable. And this is also time consuming, like very. But don't just rush prompt the AI and copy here and job done. Let's just flex those brain muscles. This is how we grow into real developers. We take and give back. We don't pretend that we give, just like we don't pretend when taking.

After reading this, you might be angry with me. Can I ask something from you? Don't be angry with me. I am not insulting anyone, I am just trying to help. Think deeply about it. Realize.

Tell me what you think.

TypeScript & Express Headaches: Lessons from A Day of Nightmare

Alexandru Ene — Sun, 27 Jul 2025 10:56:32 +0000

Introduction - The Struggle is Real

Ever had one of those days when your code just stubbornly refuse to cooperate, throwing errors that makes no sense and you are just getting crazy trying to fix them? I bet you had!

For me it happened yesterday! I was working on the backend for my project and I wanted to work with TypeScript and Express. I worked with Express before, but with JavaScript instead. So I just thought, what could go wrong? And just right then the world started to fall apart...

Does TS1259: Module 'cors' can only be default-imported using the 'esModuleInterop' flag sounds familiar to you? Or what about error TS1192: Module 'cors' has no default export? It certainly does to me! So let's fix them!

The Nightmare Unfolds - The Root of All Problems

1. First Problem - Outdated Dependencies

My code was very basic:

import express from 'express';
import dotenv from 'dotenv';
import cors from 'cors';

dotenv.config();
const app = express();
app.use(cors());
app.use(express.json());

app.post('/api/register', (req, res) => {
  const { username } = req.body;

  if (!username) {
    return res.status(400).json({ 
      success: false, 
      message: 'Username is required'
    });
  }

  return res.status(201).json({ 
    success: true, 
    message: `Hello, ${username}!` 
  });
});

const PORT = process.env.PORT || 5000;
app.listen(PORT, () => {
  console.log(`Server listening on PORT: ${PORT}`);
});

But somehow I would get this huge weird error, basically from nowhere:

No overload matches this call.

The last overload gave the following error.

Argument of type '(req: Request<{}, any, any, ParsedQs, Record>, res: Response, number>, next: NextFunction) => Response<...>' is not assignable to parameter of type 'Application>'.

Type '(req: Request<{}, any, any, ParsedQs, Record>, res: Response, number>, next: NextFunction) => Response<...>' is missing the following properties from type.

Basically it said I was poorly using a middleware somewhere, but I didn't have any except express.json()... I initially thought TypeScript was somehow breaking my code, so I applied the any type as a workaround — just to see if the return type of the route’s callback was causing the issue. Strangely, the error disappeared. But I knew this wasn’t the proper TypeScript approach. I searched online, chatted with AI, double-checked everything… but nothing in my code seemed to be wrong.

The fix: I deleted node_modules, package.json, and package-lock.json, then reinstalled only the necessary dependencies from scratch. That resolved the issue. The root cause seemed to be mismatches between my installed dependencies, their type definitions, and my current project configuration. Even though the project was only a few days old, some of the dependencies were already outdated or incompatible, which caused things to break.

2. Second Problem - Default Imports Confusion

I was happy all the problems have completely gone. But have they? I compiled the code and tried to run the server. There were no visible VS Code errors, like nasty red squiggles. But the console said otherwise:

Can only be default-imported using the 'esModuleInterop' flag
Module has no default export

So the console said somewhere in my tsconfig.json esModuleInterop flag (that allow default-style imports (import express from 'express') from CommonJS modules) should be set to true. But in my config the flag was already set to true:

{  
  "extends": "@tsconfig/node22/tsconfig.json",
  "compilerOptions": {
    "rootDir": "./src",
    "outDir": "./dist",
    "noEmitOnError": true,
    "esModuleInterop": true
  },
  "include": ["src/**/*.ts"],
  "exclude": ["node_modules"]
}

I struggled and I thought and finally found a workaround that looks weird to me and unclear, but it at least fixed the errors. It imports the entire module namespace (* as ...) and then checks if the module has a .default export. If it does, it uses that; otherwise, it falls back to the full module.

In plain terms: "Use module.default if it exists (like in ESM), otherwise just use the module itself (like in CommonJS)."

import * as corsExports from 'cors';
import * as expressExports from 'dotenv';

const cors = (corsExports as any).default || corsExports;
const express = (expressExports as any).default || expressExports;

const app = express();
app.use(cors());

The fix: I wasn’t comfortable using any, it felt like a shortcut, not a proper solution. So I removed the workaround and rewrote the imports the clean way, just like before. Then I double-checked that my tsconfig.json had "esModuleInterop": true, and my package.json included "type": "module". Finally, I deleted the old server.js (compiled output) and recompiled the project from scratch. I even restarted VS Code, sometimes can help! To my surprise, it worked! No more errors.

If you change tsconfig.json, but don't recompile everything or delete old compile output, old, outdated and incompatible code could still be running. So keep in mind, always reset your output and recompile after changes.

Conclusion

This experience taught me how easily small configuration mismatches in TypeScript and Node.js can lead to confusing errors even when the code looks correct. Using any might hide the problem temporarily, but the real fix comes from understanding and properly setting up the environment.

Once I cleaned up my outdated dependencies, enabled esModuleInterop, set "type": "module" in package.json, and recompiled everything cleanly, everything worked exactly as expected. From now on, I’ll know to check the config first, not just the code.

So let's talk, really waiting for your feedback! How do you fix stubborn TypeScript errors in Node.js projects? What are your debugging strategies?

Implementing Light/Dark Theme - My Struggles and Tips

Alexandru Ene — Sun, 20 Jul 2025 12:49:02 +0000

Introduction

Recently I wanted to implement a Light/Dark theme for a website I am working on currently. At first I thought it couldn't be that hard, right? I told myself I just change some colors and I am good to go. But not long after I faced the real challenge, because it was way more trickier than it looked.

So in this post I would like to talk about the struggles I faced and the solutions I found along the way. Hopefully, I will save you some headaches.

What I Tried & What I Struggled With

When I started working on my website project, I thought of using dark colors for the design. I did my research, checked tons of webpages to see what I am missing and what I should implement. So I noticed I don't have a toggle button to change to a light theme.

Specificity & Poor Planning. So I started mixing some media queries prefers-color-scheme, because I wanted my website to automatically detect the user system preferences, and then I worked on the button itself. And here I ran into css specificity problems, because my css file was totally a mess. The body element had a .dark-theme by default, because that was my design in the first place. I played a little with developper tools on Chrome and changed user preference to light. That class on the body element was somehow overwriting the media query and my website turned up half light and half dark, because of specificity issues. There was no user preference theme at all.
Hardcoded Color Values & Poor Custom Variables. When I tried to change colors from dark to light, I noticed there is a lot of work to be done. I did actually got tired of rewriting the selectors just to change some colors. It felt like I was working on two different websites all at once. I did use a few poor custom variables and try to change them to their opposite values when the body element had .light-theme class. But I noticed some problems. The contrast was totally off. A color was working nice on certain backgrounds, but failed miserably on others. And the hardcoded values? Well, I have to search them and turn them into css custom properties. But I still failed.
Repeating Code. I ended up writing a lot of repetitive code just to make it work. I had body.light-theme and body.dark-theme selectors and media (prefers-color-scheme: light) and they just repeated the same selectors, but with just a few values changed here and there. It was not DRY at all, hard to read and too much of struggle.

How I Solved It

I had to clean everything up. Instead of hardcoded colors everywhere in my CSS, I carefully defined all of them as custom properties in the :root selector. It made everything easier to override and manage.

:root {
  --bg-color: #ffffff;
  --text-color: #111111;
  --accent-color: #0077ff;
}

html.dark-theme {
  --bg-color: #121212;
  --text-color: #eeeeee;
  --accent-color: #4dabf7;
}

Instead of targeting body or specific elements, I added the theme class directly on the html tag using React. This helped avoid specificity issues and made the cascade cleaner.

const changeTheme = (e: MouseEvent) => {
  const target = e.currentTarget as HTMLElement;
  const html = document.documentElement;
  if (!target) return;

  if (target.dataset.theme === 'os') {
    html.classList.remove('light-theme', 'dark-theme');
  } else if (target.dataset.theme === 'light') {
    html.classList.remove('dark-theme');
    html.classList.add('light-theme');
  } else {
    html.classList.remove('light-theme');
    html.classList.add('dark-theme');
  }
};

I later implemented a button that lets users choose between light mode, dark mode, and system preference.

This approach made my code cleaner, more maintainable, and much easier to extend later.

What I Learned

Custom properties are so worth it. Taking that extra time to define them properly will defend me from starting over again, rewriting and retrying.

A clean structure matters. Most of my issues came from messy, not organized CSS. Once I cleaned that up, everything else got easier.

I don't need any frameworks to do it the right way. I am not planning using Tailwind for this project. But I might look into it a bit later.

Final Words

Implementing a light/dark theme may seem easy at first, but it can become a challenge if your CSS isn’t well organized or if you don’t plan carefully. Using CSS custom properties and managing theme classes at the right DOM level made all the difference for me — it simplified maintenance and solved many headaches around specificity and repetition. If you’re starting this journey, take the time to structure your styles cleanly; it will save you hours of frustration later.

Now I am curious, how would you implement it without so much trouble? Let's discuss pros and cons!

I hope sharing my struggles and solutions helps you! Happy coding and see you in the next one!

Not in the Mood to Code? You Are Not Alone

Alexandru Ene — Sun, 13 Jul 2025 12:13:27 +0000

I don't see that much talking about it, but everyone experiences this sooner or later. That moment when you feel bored, you don't feel like getting your hands on the keyboard. You know you have to do it, it's your main task for the day, but it's just too hard to get the work done.

That's normal. So I wanted to talk about it.

Throughout my learning journey, every now and then I experienced this feeling: some kind of boredom or laziness, a resistance to go sit at the desk and code. No project, not even a console.log, just plain mental block. You know how it feels? It is very disturbing, because it makes you question your goals. I would think that, if I don't feel like coding, maybe I am not really in love with it and in life you always have to do what you love, but that's not quite true, right?. And sometimes this wouldn't go away for a few days.

In my experience, I noticed a few causes:

I was very overwhelmed when I first started learning to code, because the roadmap looked infinite and my brain couldn't just deal with it and stopped working and pretend he is just bored. I would feel lost for a day or two and then had to force myself into doing it with this trick: I tell myself I will do code, but just for 10 minutes. If I decide to stop after 10 minutes, that's a win anyway. And if I carry on longer, that's even better. And this would end up usually in a 1-3 hours long session.
Sometimes I would just want to do something else, like playing video games or going for a walk or so. When I miss things, I want to do those things, so then maybe I don't care that much about coding in that very moment. Let's just have some fun, says the brain. It's healthy to allow yourself some distractions regularly.
There were projects that I got bored of. You know that moment when something small, easy, but repetitive kill the fun completely. You just had enough of coding chores, but feel like you had enough of coding itself entirely. My solution is to temporarily step away from boring stuff and start something fresh.
Not having enough challenge doesn't keep me as engaged as working on a more difficult project. If it doesn't get my attention, it spoils my overall mood. So I have to dream bigger and push myself doing something more real, even if I don't know where to start. That challenge is the fuel.
Sometimes I just need some rest. If I am tired, I will only stare at my computer and even get a headache from having too much.

Now when I experience this feeling, I am just more aware. I ask a lot of questions and dig deep into the causes. And I remind myself that, just because I have a bad day, doesn't mean I don't love what I do.

So I am curious, what are your reflections on these days when you are not in the mood for coding? What do you think about it and what do you do to get back on track?

Take the day off?
Force yourself into just doing it?
Feelig confused and guilty about it?

I would love to hear your thoughts, from a beginner or a seasoned dev perspective. Share what you think in the comments and let's learn from each other stories!

10 Months as a Self-Taught Dev - Reflecting on My Developer Journey

Alexandru Ene — Sun, 06 Jul 2025 07:48:54 +0000

Introduction

When I created my first post, I was mainly thinking about documenting my journey and I had no idea how to do it and didn't even think about it being a blog.

Then I was inspired by generous developpers here on Dev.to who spent time on sharing knowledge with others and now I want myself to give, to share with you what I learned.

So here I am on my 4th post!

What I've Learned

Technical

I started with HTML, CSS and JavaScript. And they said it is easy, but I struggled with them and it took me long before becoming comfortable enough. Before using VS Code, I was writing code on notepad. It helped actually. It forced me to remember stuff, to write code carefully and to debug. Now, I am very good at finding missing letters, commas, brackets and so on. :)

Then I continued my journey learning version control. It was weird at first, but I gradually started to understand. But even now I find myself looking for some commands. And there is still room to learn more Git. It will always be.

Next I learned React. I spent almost one month on tutorials and small projects. It wasn't easy at first, but now I feel ok enough.

After that, I learned NodeJS, Express, mongoDB and mongoose. I still have to practice and to learn some more, but having the basics makes me feel comfortable, because now I can work on bigger projects, like MERN stack apps.

And lastly I learned TypeScript. This happened in the last two weeks. Now I am planning of using it with react, to really see what it has to offer.

So there is a lot more to be done...

Personally

The most important thing I realized is that I don't have to be perfect. I don't have to go full speed everyday and it is perfectly fine to take breaks, even full days.

Consistency is key. I have to keep showing up, even if it is less than 1 hour a day.

Doubting myself is no longer my enemy. It just shows me what I should polish more. Whenever I doubt, I ask myself why. Is it a concept I don't fully get? If so, let's practice some more!

I now accept this is going to take a lot of time. This is not a 6 months marathon or a 1 year marathon. This is a lifelong journey.

Progress is not always visible, that's why I have to look back, open my eyes wide and see it and accept what I have been going through and what I have done.

Sharing with others helps me understand better. Documenting my journey, teaching something I learned, showing up here every week, helps me reflect deeply, build my momentum and my resilience.

Challenges I've Faced

No matter how much I enjoyed coding, throughout my journey I had those moments of getting stuck, not knowing what to do and doubting myself.

Learning How to Learn
At first it took me so long to learn how to learn. When I first started 10 months ago, I only knew I want to be a frontend developper, but I lacked the structure and the discipline. I didn't think about roadmaps back then. I should have focused more on making a progress map and having a clear structure of what to do, because it is hard to learn and not knowing what to learn make it even harder.
Time Management
Although I had a lot of time to learn, it was often hard to do the job. Lots of distractions and finding the perfect life balance is not an easy task. Time was really fast and I didn't know how much to learn and how much is enough. I could easily miss a day because I was so busy doing other things. I had to force myself to be consistent, even if it was only 30 minutes a day.
Impostor Syndrome
I often felt like an impostor. I remember, when I was learning JavaScript, trying to create a small application and having no idea what to start with. I was telling myself I am not good enough, maybe web development is not for me. I was doubting myself. Comparing to others made things worse. A lot of advertising saying that you could become a web developper in 4 months and when after 4 months I still struggled with CSS, I felt like a failure. But it helped to remind me that no matter how long it takes, I am not broken, I can do it at my own pace.

Now I know this is just part of the process. I know I will always fall, but I will always have to get up and keep going.

What's Next?

For the next weeks I am planning working on more projects which I will share with you, of course. And I will focus more deeply on fundamentals. I will build on top of what I learned, before moving on to new tools.

I would like to make this a weekly blog first and later on I will post twice a week. This will keep me accountable, it forces me to show up and do the job. I will do this even if the posts may not be perfect, incomplete or small.

Final Words

These 10 months were really tough, not only technically, but also on a personal level: ups and downs, roadblocks, confussion, far far from perfect. But I am looking back now and I acknowledge the progress. Even if I don't see it, I know it is there.

If you are struggling too, remember that progress takes time and you don't have to be perfect. Small steps at a time matter. You keeping showing up matter.

As always, feel free to say what you think. Your feedback is important to me.

Thank you for reading and see you in the next one!

Build a Login App using React and Express (Step by Step Guide)

Alexandru Ene — Sun, 29 Jun 2025 18:23:11 +0000

Introduction

In this tutorial, I will show you step by step how to create a login app using React for frontend and Express for backend.

Note This guide is not meant to teach you React and Express from scratch. I assume that if you are here, you already have a basic understanding of both technologies.

What I will focus on instead is helping you connect React and Express together to create a fullstack login system. I'll do my best to explain things as simply and clearly as possible.

And... It is going to be a long one. So I will take the blame for it, but hopefully you will learn something and I will learn something from your feedback.

What We'll Cover

1. Frontend - React

- Creating a react application with vite tool
- Using components and props to share and manage state
- Controlled components for handling forms
- React hooks: useState, useEffect, useContext, useNavigate
- Module imports/exports
- Error handling with try...catch blocks
- Sending server requests with fetch
- Storing the JWT token in localStorage
- Persisting user sessions across page reloads
- Routing using React Router
- Structuring and organizing the app

2. Backend - Express

- How to create a basic Express server
- Parsing JSON request bodies using express.json()
- Enabling cross-origin requests with CORS
- Creating /register and /login routes
- Hashing passwords using bcryptjs
- Storing user data temporarily in memory
- Verifying user credentials during login
- Creating JWT tokens with jsonwebtoken
- Sending the token to the frontend
- Middleware for protecting routes using token verification
- Creating a protected /profile route that only works with a valid token

Let's get started!

Project Setup

I will live a link here for the repository, in case you want to play with it: Login App

We will start by creating two folders: one for the frontend and one for the backend. We should place them inside a parent folder, which you can choose any names for, but I will call it 'login-app'.

You can use your favorite code editor like Sublime or VS Code. Personally I will stick with VS Code.

🖥️ 1. Backend – Express Setup

Now let's open the terminal. If you are in VS code, a quick way is to press: Ctrl + ` (on Windows) or Cmd + ` (on Mac)

Start by creating a folder for the backend, then open the folder and then initialize node:

mkdir backend
cd backend
npm init -y

Install the necessary dependencies:

npm install express bcryptjs jsonwebtoken cors

Since we’ll be using ES modules, make sure your package.json file includes this line:
"type": "module"

And also inside package.json file change "main": "index.js" to "main": "server.js".

Now create a file called server.js and add the following code:

// import the required packages
import express from 'express';
import cors from 'cors';

// initialize express app
const app = express();

// allow frontend to connect with the backend
app.use(cors());

// Allow express to parse JSON
app.use(express.json());

// simple route for testing the server
app.get('/', (req, res) => {
  res.send('Backend is running!');
});

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

This is our basic express server setup.

What we did:

Imported express and cors at the top
Enabled CORS to allow frontend to connect to our server
Enabled JSON parsing using express.json()
Created a simple test endpoint at /
Started the server on port 5000

Now let's test it. Start the backend server:

node server.js

In your terminal you should see something like:

PS C:\Users\Alexandru\Desktop\login-app\server> node server.js
Server running on port 5000

✅ Our backend is now live at http://localhost:5000

🖥️ 2. Frontend – React Setup with Vite

Now let’s create the frontend app using Vite.

First press Ctrl + c or Cmd + c in the terminal to close the connection. Let's navigate to parent folder using cd ... Then let's run npm create vite@latest. Name your folder 'frontend', choose React and JavaScript, then navigate to frontend folder and install the dependencies. Like so:

cd ..
npm create vite@latest
cd frontend
npm install
npm install jwt-decode react-router

Then start the React server:

npm run dev

✅ The frontend will be available at http://localhost:5173 (or something similar) and you should see something like this:

  VITE v6.3.5  ready in 1046 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

Our folder structure at this point should look mostly like this:

my-login-app/
├── backend/
│   ├── server.js
│   └── package.json
├── frontend/
│   ├── src/
│   ├── public/
│   └── vite.config.js

Now, before moving forward, you would want to close the server, again. In your terminal press Ctrl + C or Cmd + C. Why? Our code is broken for now, because we miss essential parts and you will get nasty error popping up in the console. So bear with me, we will get to the end together.

Add styles to our app

Let's add some styles for our UI. Add this code to a styles.css file inside your src folder:

:root {
  box-sizing: border-box;
}

*, *::before, *::after {
  box-sizing: inherit;
}

body {
  margin: 0;
  background-color: hsl(240, 91%, 10%);
  color: white;
  font-family: Arial, Helvetica, sans-serif;
  overflow: clip;
}

input {
  font-family: inherit;
}

header {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  white-space: nowrap;
  gap: 1em;
  padding: 1em;
  text-align: center;
  font-size: clamp(.75rem, 1rem + 1vw, 1.5rem);

  img {
    width: 25%;
    max-width: 100px;
    aspect-ratio: 1 / 1;
  }
}

.login-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1em;
  margin-top: 2em;
}

.input-wrapper {
  display: flex;
  flex-direction: column;
  gap: 1em;

  input {
    width: 100%;
    max-width: 20em;
    padding: .25em 1em;
    border-radius: 10px;
    outline: none;
    font-size: 1.5rem;
    text-align: center;
    transition: 300ms;
  }

  input:focus,
  input:hover {
    box-shadow: 0 5px 15px 1px hsl(30, 92%, 55%);
  }
}

.login-btn {
  margin-top: 1em;
  padding: .25em 1.5em;
  border: none;
  border-radius: 10px;
  font-family: inherit;
  font-size: 1.5rem;
  font-weight: bold;
  cursor: pointer;
  transition: 200ms;
}

.login-btn:hover,
.login-btn:focus {
  box-shadow: 0 5px 15px 1px hsl(30, 92%, 48%);
}

.signup-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 1em;
  margin-top: 3em;
}

.signup-btn {
  margin-top: 0;
  font-size: 1rem;
}

.status {
  height: 20px;
  margin-top: 1em;
  text-align: center;
}

.error-status {
  color: hsl(0, 100%, 50%);
}

.ok-status {
  color: hsl(120, 97%, 45%);
}

.greeting {
  text-align: center;
}

.logout-btn {
  display: block;
  width: 10em;
  margin-inline: auto;
  font-size: 1rem;
}

You can of course design the app to your preferences, but I wanted to make sure we have a little bit of visuals here and to make our life a little easier.

Build The Login/Register Form

Let's create a folder called components inside src folder. Once we are inside the components folder, let's add the following files: Form.jsx, Main.jsx and Header.jsx. We'll take them one by one, but for now let's focus on building our login form.

In your Form.jsx file, add the following:

// our reusable form component for login and register
export default function Form(props) {
  return (
    <form className="login-form" onSubmit={props.handleSubmit}>
      <div className="input-wrapper">

        <input
          onChange={props.handleUsernameInput}  // update username state on change
          value={props.username} // controlled input by username state
          type='text'
          placeholder='Username' />

        <input
          onChange={props.handlePasswordInput} // update password state on change
          value={props.password} // controlled input by password state
          type='password'
          placeholder='Password' />
      </div>

      <button className="login-btn">
        {props.submitBtnText}
      </button>
    </form>
  )
}

What we did:

We created a form component that receives props from its parent Main.jsx to manage state and actions:

handleSubmit: Function called when the form is submitted.

handleUsernameInput and handlePasswordInput: Functions to update the username and password states on input change.

username and password: State values controlled by the parent component, passed down as props.

submitBtnText: Text displayed on the submit button ("Login" or "Register"), so the form can be reused in login and register contexts.

Build The Header Component

Not our main focus here, but easy to implement and will give our app some design to look a little better.

Add this code in your Header.jsx file:

// insert the import here
export default function Header() {
  return (
    <header>
      // insert the img tag here
      <h1>Login App</h1>
    </header>
  );
}

Make sure you have an 'images' folder inside src folder and a picture for you to use. Feel free to choose whatever you like.

Note: I am getting an error when trying to publish the post because I tried to import the image inside the file, that's why that import line and image tag is removed. But on your local machine, add the import to your file and write the img src attribute like this:
import logo from 'some-source'
<img src={logo} alt="logo" />

It is better to import the images instead of passing a url path to src attribute:

The images will be optimized, which will help with performance
It ensures path safety, we avoid incorect relative paths
Safer for refactoring: renaming the image or changing its location will break the imports, so better error handling

Set up Authentication Logic / Build Main Component

Let's move forward with our Main.jsx file. Add this code to your Main component:

// Import hooks and dependencies
import { useState, useContext } from 'react';
import { useNavigate } from 'react-router';
import { ProfileContext } from '../contexts/profileContext.jsx';
import Form from './Form.jsx';
import { registerUser, loginUser } from '../services/authServices.js';

export default function Main() {
  // Access the login function from context
  const { login } = useContext(ProfileContext);

  // Hook from React Router to navigate pages
  const navigate = useNavigate();

  // State for form input
  const [ username, setUsername ] = useState('');
  const [ password, setPassword ] = useState('');

  // State to store server response or error
  const [ data, setData ] = useState('');
  const [ err, setErr ] = useState(null);

  // State to toggle between login and signup/register mode
  const [ isLoginMode, setLoginMode ] = useState(true);

  // Texts that change depending on login/signup mode
  const submitBtnText = isLoginMode ? 'Login' : 'Sign up';
  const toggleBtnText = isLoginMode ? 'Sign up' : 'Login';
  const modeText = isLoginMode ? 'No account yet?' : 'Already have an account?';

  // Form submit handler
  const handleSubmit = async (e) => {
    e.preventDefault();

    try {
      // Decide which function to call based on mode
      const calledFunction = isLoginMode ? loginUser : registerUser;
      const result = await calledFunction(username, password);

      // Store server response
      setData(result);

      // If login/signup was successful
      if (result.token) {
        login(result.token); // Save token in context + localStorage
        navigate('/profile'); // Redirect to protected profile page
      }
    } catch (err) {
      console.log(err);
      setErr(err);
    }
  };

  // Toggle between login and signup modes
  const handleSignUpText = () => {
    setLoginMode(prev => !prev);
  };

  // Handle input updates
  const handleUsernameInput = (e) => {
    setUsername(e.target.value);
  };

  const handlePasswordInput = (e) => {
    setPassword(e.target.value);
  };

  return (
    <>
      {/* Display server messages */}
      <div className={data.success ? 'status ok-status' : 'status error-status'}>
        {data.message}
      </div>

      {/* Our reusable form component */}
      <Form
        handleSubmit={handleSubmit}
        handleUsernameInput={handleUsernameInput}
        handlePasswordInput={handlePasswordInput}
        username={username}
        password={password}
        isLoginMode={isLoginMode}
        submitBtnText={submitBtnText}
      />

      {/* Toggle login/signup button */}
      <div className="signup-wrapper">
        <p>{modeText}</p>
        <button onClick={handleSignUpText} className="login-btn signup-btn">
          {toggleBtnText}
        </button>
      </div>
    </>
  );
}

I know this looks heavy and it is because our Main component is doing the hard work for our frontend, but there are a few things that happen here and I will list and explain them.

What we did:

Handled form input using useState
Toggled between login and signup mode
Sent form data to the backend using fetch (via helper functions loginUser and registerUser)
Shared state from context using useContext
Stored JWT tokens using login() from context
Redirected the user to /profile route on successful login using useNavigate
Renderd a reusable component and displayed dynamic messages
Handled errors with try...catch

So when we start our app, what we see is two inputs controlled by state, username and password respectively. And we have two buttons. The top button is the submit button and the bottom one's role is too toggle between submit modes: between logging and registering a user. The toggle mode button will also update the texts properly.

If you don't have an account you click on the button from below and you change the state: isLoginMode is now set to false and you are now in register mode. If you now click the submit button, you will call handleSubmit() function. This will check for the mode you are in (for now it's registerMode) and will call the proper helper function (loginUser or registerUser which we'll talk about soon) with two arguments, which are the values from inputs held in username and password state.

You will receive a response from the server, which it is saved in data or err states and you will see some dynamic text appear on the screen, could be an error message or a success one.

If you want to login, suppose you already have an account, when you submit, you call handleSubmit(), which will call loginUser() with username and password, you receive the token from the server, you save it in localStorage via login() function and you redirect to /profile route.

If it is still too hard for you to understand, just know that it will make more sense when we put all the pieces together and we make a recap. I know I was a little verbose, I felt like I should talk more, but hopefully it makes more sense now.

Create Profile Page, Context and Api Services

Let's go to src folder and create a pages folder, a contexts folder and a services folder.

Inside pages folder let's create a file called Profile.jsx. Inside contexts folder let's create a file called ProfileContext.jsx. And lastly, let's create a authServices.js file inside services folder.

Profile.jsx

This is the component we redirect users to after they log in. It displays a greeting using the user’s name (decoded from the JWT), and provides a logout button.

Here’s the code:

// import required modules and hooks
import { ProfileContext } from "../contexts/ProfileContext.jsx";
import { useContext } from 'react';
import { useNavigate } from 'react-router';

export default function Profile() {
 // Extract user info and logout function from context
  const { user, logout } = useContext(ProfileContext);
  const navigate = useNavigate();

  // Handler for logout button
  const handleLogout = () => {
    const confirmation = confirm('Are you sure you wanna logout?');
    if (confirmation) {
      logout(); // Remove token from localStorage
      navigate('/'); // Redirect to home page (login screen)
    }
  };

  return (
    <>
      {/* Display a greeting using username */}
      <h1 className="greeting">Hello, {user.user || 'Guest'}!</h1>

      {/* Logout button */}
      <button onClick={handleLogout} className="login-btn logout-btn">Logout</button>
    </>
  );
}

What we are doing here:

We access the user information and logout function using useContext(ProfileContext)
The user's name was extracted earlier from the JWT and stored in context
handleLogout() removes the token from localStorage and navigates back to the main page
We use conditional rendering to show 'Guest' in case something goes wrong and user.user is empty
This component only becomes meaningful once the token is successfully stored and decoded, so it relies on our authentication flow working correctly

Context.jsx

Let's write one more! Add this to your Context file:

// Import dependencies
import { createContext, useState, useEffect } from "react";
import { jwtDecode } from 'jwt-decode';

// Create the context object
export const ProfileContext = createContext();

// Define the provider component
export const ProfileProvider = ({ children }) => {
  // Store user info in state
  const [ user, setUser ] = useState('');

  // Function to log in a user
  const login = (token) => {
    localStorage.setItem('token', token); // Save token to localStorage
    const decoded = jwtDecode(token); // Decode JWT to get username
    setUser({ user: decoded.username }); // Store username in context state
  };

  // Function to log out a user
  const logout = () => {
    localStorage.removeItem('token'); // Clear token from localStorage
  };

  // On initial load, check if there's a token and decode it
  // Persistent login across page refresh
  useEffect(() => {
    const token = localStorage.getItem('token');

    if (token) {
      const decoded = jwtDecode(token); // Decode token on page refresh
      setUser({ user: decoded.username }); // Restore user context state
    }
  }, []);

  // Provide context value to children
  const value = { user, login, logout };

  return (
    <ProfileContext.Provider value={ value }>
      { children }  {/* Render all children inside this provider */}
    </ProfileContext.Provider>
  );
};

What we did:

Created a global context: a context object we can use with React's useContext() hook anywhere in the app. It allows components to access shared data — in this case, the logged-in user's info and the ability to log in or out
Set up the context provider: the ProfileProvider component wraps our entire app (check App.jsx), and gives access to user, login(), and logout() to any component that consumes the context
Stored JWT token so that a user logs in, their JWT token is stored in localStorage, which means the login can persist even after a page reload

authService.js

We are getting closer to the end of our frontend work. Add this to authService.js file:

// Base URL of our Express backend server
const url = 'http://localhost:5000';

// Function to handle user registration
const registerUser = async (username, password) => {

  // error handling
  try {
    const res = await fetch(`${url}/register`, {
      method: 'POST', // HTTP POST request
      headers: { 'Content-Type': 'application/json' }, // Sending JSON
      body: JSON.stringify({ username, password }) // Payload
    });

    // Check if request was successful
    if (!res.ok) {
      console.error('Registration failed');
      return res.json(); // Still return the error message
    }

    return res.json(); // Return server response (success, token, etc.)
  } catch (err) {
    console.error(err);
  }

};

// Function to handle user login
const loginUser = async (username, password) => {
  // error handling
  try {
    const res = await fetch(`${url}/login`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ username, password }),
    });

    if (!res.ok) {
      console.error('Login failed');
      return res.json(); // return the error message
    }

    return res.json(); // Server sends back token if login successful
  } catch (err) {
    console.error(err) 
  }   
};

// Export both functions so we can use them elsewhere
export { registerUser, loginUser };

What we did

Sent a POST request to /register with username and password in the body. The server hashes the password and stores the user. If successful, it responds with a success message. If not, an error is returned
Sent a POST request to /login with the same credentials. The server checks if the user exists and if the password matches. If valid, it sends back a JWT token. We’ll later save this token to localStorage so the frontend knows the user is authenticated
Placed these API functions in a separate authService.js file to keep our React components clean, to encourage reusability and to make it easier to update API logic in one place

What else? We structured the app, into folders and files. By doing this we created a more scalable app, easier to debug and easier to read.

Update App.jsx and Main.jsx

Our app is still broken at this point. We have to make a few changes to App.jsx and main.jsx, which we didn't touch since we created the React application. So let's go first to App.jsx and modify it so it will look like so:

// Import React components and routing tools
import Header from "./components/Header.jsx";
import Main from "./components/Main.jsx";
import Profile from "./pages/Profile.jsx";
import { BrowserRouter as Router, Routes, Route } from 'react-router';

// Import the context provider to manage global user state
import { ProfileProvider } from "./contexts/ProfileContext.jsx";

function App() {
  return (
    <Router>
      {/* Header that is always visible */}
      <Header />

      {/* Wrap the app in ProfileProvider to share user state */}
      <ProfileProvider>
        <Routes>
          {/* Home route – renders login/signup form */}
          <Route path='/' element={<Main />} />

          {/* Protected profile route */}
          <Route path='/profile' element={<Profile />} />
        </Routes>
      </ProfileProvider>
    </Router>
  );
}

export default App;

What we did here

Used <Router>, <Routes>, and <Route> from react-router to enable routing between pages
Added the Header: this component displays the app’s title and is shown on all pages
Wrapped the app with ProfileProvider, this gives all components access to the global user context. It lets us share login/logout logic across the app
Defined Routes: / - loads the Main component, which holds the login/signup form /profile - loads the Profile component, which shows the user’s profile page

Let's continue with main.jsx file:

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import App from './App.jsx'
import './styles.css'

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>,
)

One more thing to do is to remove these files: App.css and index.css. These are some styles from React and Vite, which we don't need since we have our own.

Backend Logic - Express Setup

We are going now to implement the backend logic into our app. This is how server.js file should look. Let's update it as following:

// Import necessary packages
import express from 'express';
import jwt from 'jsonwebtoken';
import bcryptjs from 'bcryptjs';
import cors from 'cors';

// Temporary in-memory user storage
const users = [];

// Secret key for signing JWTs
const SECRET_KEY = 'my_secrete_key';

// Initialize the Express app
const app = express();

// Middleware to handle CORS and parse incoming data
app.use(cors());
app.use(express.json());
app.use(express.urlencoded({ extended: true }));


// Register Route
app.post('/register', async (req, res) => {
  try {
    const { username, password } = req.body;

    // Check if user already exists
    const user = users.find(user => user.username === username);
    if (user) return res.status(400).json({ success: false, message: 'User already exists' });

    // Hash the password before storing it
    const salt = await bcryptjs.genSalt(10);
    const hashedPass = await bcryptjs.hash(password, 10);

    // Store user in memory
    users.push({ username, password: hashedPass });

    res.status(201).json({ success: true, message: 'New user created!', users });
  } catch (err) {
    console.error(err);
    res.status(500).json({ success: false, message: 'Internal server error' });
  }
});


// Login Route
app.post('/login', async (req, res) => {
  try {
    const { username, password } = req.body;

    // Check if the user exists
    const user = users.find(user => user.username === username);
    if (!user) return res.status(404).json({ success: false, message: 'User not found' });

    // Verify password
    const isPassValid = await bcryptjs.compare(password, user.password);
    if (!isPassValid) {
      return res.status(404).json({ success: false, message: 'Invalid password' });
    }

    // Create a JWT token
    const payload = { username };
    const token = jwt.sign(payload, SECRET_KEY, { expiresIn: '24h' });

    res.status(200).json({ token, success: true, message: 'Logged in successfully!' });
  } catch (err) {
    console.error(err);
    res.status(500).json({ success: false, message: 'Internal server error' });
  }
});


// Middleware to Protect Routes
const loginMiddleware = async (req, res, next) => {
  const authorization = req.headers['authorization'];
  const token = authorization && authorization.split(' ')[1];

  // Check if token exists
  if (!token) {
    return res.status(401).json({ success: false, message: 'Inexistent or invalid token' });
  }

  // Verify token
  jwt.verify(token, SECRET_KEY, (err, user) => {
    if (err) return res.status(403).json({ success: false, message: 'Invalid token' });

    req.user = user;
    next();
  });
};


// Protected Profile Route
app.get('/profile', loginMiddleware, (req, res) => {
  const username = req.user.username;
  res.json({ success: true, message: `Welcome, ${username}!` });
});


// Start the Server
const PORT = 5000;
app.listen(PORT, () => {
  console.log(`Server running on port: ${PORT}`);
});

What we did

For user registration, we check for duplicate usernames. We hash the password before storing. We store the user in an in-memory array (only for simplicity)
For our Login system, we verify user existence and correct password. We generatea a JWT token for authenticated access.
Protected route /profile can only be accessed if a valid JWT is sent in the request headers
Middleware: validates incoming JWT tokens to protect routes, in our case /profile

Note In a real-world app, we would:

Store users in a database (not memory)

Use HTTPS and stronger secrets

Refresh tokens

Handle errors more robustly

Use a different structure for backend logic, like moving routes and middleware to their own files, storing secret keys in a .env file, using a database (like MongoDB) and so on

Important: Let's start both servers for the frontend and for the backend to test our app!

Go to VS Code and open two terminals, we will use one for backend and the other one for frontend. You can rename them if you want. Go to one of them and run these commands:

cd backend
node server.js

Now open the other terminal and run these commands:

cd frontend
npm run dev

Now you should have two terminals with these results:
For frontend:

  VITE v7.0.0  ready in 217 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

For backend:

PS C:\Users\Alexandru\Desktop\login-app\backend> node server.js
Server running on port: 5000

What this means is that both servers are now working and we could use our app! To open the app go to this link in your browser http://localhost:5173/ or whatever link vite gave you.

Now try to create an account and login with the wrong credentials or the good ones. Write on purpose a bad password or a bad username and look at the dynamic status messages. Those comes from the server, check the routes in the server.js.

Try to write this app by yourself from scratch, no help at first. See how much you can remember. Read the app again and again until you understand the code.

Just one more small thing, if you care, just change the title of the app in index.html file to something like 'Login App' or anything, it will look better!

Final Section

1. Recap of What We Built

We used:

React (Vite) for the frontend
Express for the backend
JWT for authentication
Context API for managing user state
LocalStorage for session persistence
Protected routes for user-only access

We covered how to:

Handle login and registration
Hash passwords securely
Send and store JWTs
Restrict access based on authorization
How to structure our frontend

2. Next Steps and Sugestions

Now that you have this foundation, here are some ideas to work on:

Store users in a real database (MongoDB, PostgreSQL)
Add form validation both for backend and frontend
Try to improve security a little: use HTTPS, rate limiting
Add refresh tokens for better session handling
Do Deploy your app (like Vercel + Render or Netlify + Railway)
Improve the UI with a CSS framework like Tailwind or Bootstrap or even plain css, like do better than me!
Change that nasty confirm pop up that appears when you want to log out! I know, I missed that! Or I did it on purpose to give you some homework...

Remember, the best way to learn more is to keep building and experimenting. Try breaking this app and fixing it again. That’s how you learn stuff! And be proud of what you achieved! 🔥

3. Final Words

If you made it this far, thank you!
I really hope you learned something valuable, and I’d love to hear your thoughts:

Did I miss something?
Was this tutorial helpful?
What could be clearer?
What topic should I cover next?

Please leave a comment, share your feedback (even the bad stuff), ask me anything or just say hi. I’d love to connect!

If you want to support me:
You can find me: here
Drop a ❤️
Follow me for more tutorials like this
Share this with someone who might find it useful

Thanks again for reading and happy coding!