Forem: Berkay Sonel

A Clean React Folder Structure

Berkay Sonel — Sat, 09 May 2026 11:38:07 +0000

A Clean React Folder Structure

When building a React app, having a well-organized folder structure makes everything easier finding files, maintaining code, scaling your app, and onboarding new developers. Here's a folder layout that's worked well for many teams, with a quick explanation of what each folder does.
You don’t need to use each folder but while scaling the app with time it is easier to adapt project with this type of folder structure.

Folder Structure

src/
│
├── api/
├── auth/
├── components/
├── constants/
├── types/
├── hooks/
├── layouts/
├── locales/
├── mock/
├── pages/
├── queries/
├── routes/
├── sections/
├── services/
├── store/
├── theme/
└── utils/

Folder Descriptions

mock/
This folder is where you put mock data used for development or testing. It's great for simulating backend responses before your API is ready. You can define dummy blog posts, user data, or any sample content you might need during development.
api/
Here, you set up your Axios instance and define global configuration like base URLs or interceptors. It's the central place where all your HTTP setup lives, separate from the actual request functions.
auth/
Handles everything related to authentication. This includes storing tokens, managing login/logout logic, and setting up user context. Basically, anything that keeps track of whether the user is logged in and who they are.
components/
Contains shared, reusable UI components like buttons, inputs, modals, form fields, etc. These are your building blocks, used across different parts of the app.
constants/
Stores fixed values you might need throughout your app, like dropdown options, role lists, or status values. Unlike mock data, these are not just for testing they're actual values your app depends on.
types/
If you’re using TypeScript, this folder is great for storing global type definitions, enums, and interfaces (instead of scattering them in random files).
hooks/
A place for custom hooks that solve specific problems or add features to your components. Examples: useClipboard, useResponsive, or a custom useDebounce.
layouts/
This folder contains layout components like sidebars, headers, footers, and wrappers for different page types. It’s useful when you have multiple layout variations like admin and public views or different types of navigations.
locales/
Used for managing translations and locale-related settings. You can also store dayjs or MUI date adapters, language contexts, and other internationalization (i18n) logic here.
pages/
Similar to Next.js or other router-based setups, this defines the structure of your app’s pages. However, these files are lightweight and don’t contain full page content just the route presence and sometimes minimal setup. Actual content is handled in the sections/ folder. This way it is easier to scale your app with increasing number of pages.
queries/
If you're using TanStack Query (React Query), this is where you'd keep your query and mutation hooks. It helps to organize your data-fetching logic and caching in one place.
routes/
Here you define your app’s routes using React Router (or another router). You can also manage role-based access, lazy loads and navigation guards here. It connects what's in pages/ to the actual routing setup.
sections/
This is where the actual content of each page is built. You compose your components/ inside sections/ to create the structure and logic of each page from pages with creating folders for each page, you can create views to contain all other blocks and use it in pages. It keeps your pages/ clean and focused just on routing for larger apps.
services/
Contains simple functions that call your API using the Axios instance from api/. For example, postBlogPost(data) or getUserInfo(). Think of this as the layer between your UI and the backend. You can use this services in queries/.
store/
If you’re using a state management library (Redux, Zustand, Recoil, Jotai, etc.), keep your global stores, slices, and related logic here. This prevents mixing state with hooks/.
theme/
Stores your theme setup color schemes, typography, spacing, fonts etc. It can include your MUI theme, dark/light mode settings, and theme providers.
utils/
General utility functions that help with common tasks like formatting dates, validating input, or converting values. These are often small, pure functions reused throughout the app.

Using this structure keeps your project clean, modular, and easy to grow. It separates responsibilities well, so you're not stuffing everything into one or two folders. You can tweak it to fit your team’s style, but this setup is a solid starting point for most medium to large React projects.

Building an Authentication Starter: Lessons from Integrating Next.js, PostgreSQL, Prisma, and NextAuth

Berkay Sonel — Sat, 09 May 2026 11:36:14 +0000

Building an Authentication Starter: Lessons from Integrating Next.js, PostgreSQL, Prisma, and NextAuth

When starting a new web project, setting up user authentication can often feel like a significant initial friction. There are many components involved: managing user data, securing routes, handling different login methods, and keeping everything type-safe. My goal was to create a solid starting point for future projects, something that handles these complexities without requiring extensive setup each time. This led me to develop a Next.js authentication starter app, and I'd like to share some insights from the process.

The Foundation: Why These Technologies?

The project is built on a few core technologies, chosen for their individual strengths and how well they work together. These technologies also promising and future proof.

Next.js

I chose Next.js 14 as the application framework. Its App Router structure makes route definition and data fetching much clearer, especially for server-side rendered applications. It offers a modern approach that simplifies many common web development tasks.

PostgreSQL & Prisma

For data management, I implemented for PostgreSQL and Prisma. PostgreSQL is a widely used relational database, known for its stability. Prisma, as an ORM, significantly simplifies database interactions. It provides a type-safe way to define models and perform queries, which was a huge win for developer experience and reducing potential bugs. Defining my database schema in prisma/schema.prisma and using Prisma migrations felt a natural fit for managing changes.

NextAuth.js

NextAuth.js handles the core authentication logic. It abstracts away much of the complexity of session management, social logins (like Google and GitHub), and callback handling. Configuring it in auth.config.ts allowed me to define providers and custom callbacks easily.

Additional Tools

Resend: For sending emails related to verification and password resets. This was chosen for its developer-friendly API.
Tailwind CSS & ShadCN: To get a user interface up and running quickly. Tailwind CSS helps with rapid styling, and ShadCN provides a collection of accessible components built on top of it.
Zod: For form validation. Defining schemas in schemas/ made sure my data inputs were always correctly formatted and type-safe, preventing many common form-related issues.
bcryptjs: For password encryption, a crucial security measure.

Key Features I Focused On

This starter app includes several features designed to cover common authentication needs:

User Forms: Login, verification, update password, reset password and registration pages, supporting both email/password and social logins (Google, GitHub).
Protected Routes: Implementing middleware.ts to check user sessions before allowing access to specific parts of the application, like /settings. The user should add his/her application pages to here.
Email Verification & Password Reset: Generating secure tokens and using Resend to send emails for these critical flows.
Data Handling: A clear separation between actions/ for database mutations and data/ for read operations.

How the Project is Organized

Understanding the project's layout was important for building it and will be for anyone extending it.

app/: Contains all route definitions, including public routes like / and /auth/login, and protected routes like /(protected)/settings. App router.
actions/: Where server actions live, connecting to the database for operations like creating a new user or updating a profile.
data/: Functions for fetching data from the database, typically read-only.
components/: My reusable UI elements, keeping the interface consistent.
lib/: General utilities and helpers.
prisma/: Holds the Prisma schema and generated client for database models and migrations.
schemas/: All Zod validation schemas, ensuring data integrity.
middleware.ts: Handles route protection and authentication checks.
auth.config.ts: NextAuth configuration details, including providers and callbacks.

Insights and Lessons Learned

One of the main takeaways from putting this together was the power of explicit data validation with Zod. It really helped to catch errors early and provided clear feedback for form inputs. Separating concerns between actions/ and data/ also made the server-side logic much easier to reason about and maintain as the project grew. User can use tanstack query or useSwr for data fetching, starter pack enables every possible way that user can go.

Thinking about alternatives, I considered different ORMs like neon, but Prisma's type-safety with TypeScript was a strong argument for its use and also very easy to use, I found that Neon is another powerful alternative but for a starter kit it was too much like raw SQL. For email sending, there are many options, but Resend's API worked well for integrating token generation. These parts very easy to change and use alternative.

Concluding Thoughts

This Next.js authentication starter project is designed to offer a solid starting point for applications needing user authentication. It brings together well-regarded tools to handle many common challenges. If you're looking to kickstart a project with Next.js 14 and need a reliable authentication setup, feel free to explore it. I'm always open to hearing about different approaches or improvements!

Repo:

Next.js Auth Starter

React States Are Asynchronous, But!

Berkay Sonel — Sat, 09 May 2026 11:33:30 +0000

🧠 State Updates In React Are Asynchronous, But Not Promise!
Many developers working with React realize it over time, but it can be confusing at first:
setState (or setX with useState) functions work asynchronously, but do not return Promise.

What does this mean?

const [count, setCount] = useState(0);

setCount(count + 1);
console.log(count); // Still the old value!

In the above example, we may think that count value has increased immediately, but React batches this update and saves it for the next render. So console.log(count) still prints the old value. This shows us the following:

➡️ setState is triggered but not applied immediately.
➡️ We cannot use .then() like a Promise.
➡️ If we want to access the updated state, we have to use methods like useEffect or the state function with callback.

For example:

useEffect((() => {
 console.log("Count changed:", count);
}, [count]);

setCount(prev => prev + 1);

So the expression asynchronous but not promise comes into play here. React updates the state according to its internal planning, but it doesn't give us a promise. 🔁

Knowing this difference is very important to avoid making mistakes, especially in form operations, animations or state-dependent business logic. 👨‍💻

How to Create Beatiful Snackbar Component with Material UI + React + CSS in sx🤔

Berkay Sonel — Mon, 10 Jul 2023 14:04:04 +0000

Snackbar components play a crucial role in providing feedback and notifications to users in a visually appealing and non-intrusive manner. With the power of Material-UI and React, we can create stunning and customizable snackbars that integrate into our applications.

Prerequisites:

To follow along with this tutorial, you should have a basic understanding of React and have Material-UI installed in your project. Make sure you have set up your development environment (I suggest to use create-react-app) before proceeding.
You have to install Material UI components:

npm install @mui/material @emotion/react @emotion/styled

Let's start with a simple MUI Snackbar component:

First, we import the Snackbar component from Material-UI using the following import statement:

import Snackbar from "@mui/material/Snackbar";

Next, we define our functional component, which will return the MUI Snackbar component with the necessary state and functions. The state variable open manages the visibility of the snackbar, and the handleClose function is responsible for closing the snackbar. Here's an example of how the component may look:

import React, { useState } from 'react';
import Snackbar from '@mui/material/Snackbar';

const MySnackbar = () => {
  const [open, setOpen] = useState(false);

  const handleClose = (event, reason) => {
   // this condition will prevent dissapering Snackbar when clicking away
    if (reason === 'clickaway') {
      return; 
    }

    setOpen(false);
  };

  return (
    <div>
      <button onClick={()=>setOpen(true)}>Activate Snackbar</button>
      <Snackbar 
       open={open} 
       onClose={handleClose} 
       autoHideDuration={4000}
       message="Hello World!"
      />
    </div>
  );
};

export default MySnackbar;

So, let's break it down:

We have the open state variable that manages the open prop of the Snackbar component. By updating the open state, we control whether the Snackbar is visible or not.
The button there for just to make open state true so we can see our Snackbar.
The onClose prop of the Snackbar component is handled by the handleClosefunction. This function takes two arguments: event and reason. When the Snackbar is closed, we check the reason. If the reason is 'clickaway', indicating that the user clicked away from the Snackbar, we don't close it. This prevents the Snackbar from disappearing unintentionally.
To determine when the Snackbar should automatically close, we use the autoHideDuration prop. This prop defines the duration, in milliseconds, for which the Snackbar will be displayed before automatically closing. In our example, the Snackbar will be shown for 4000 milliseconds (4 seconds) before it closes.
Lastly, we have the message prop, which sets the text content that will be displayed in the Snackbar.

Let's look our Snackbar:

It is not the best looking Snackbar 🙄, but we can change it.

Styling Snackbar

We have the ability to customize the style of its elements using the sx prop. However, the interesting part lies in our desire to specifically style the SnackbarContent component. SnackbarContent is a component provided by Material-UI that is used as the content container within the Snackbar component.

<Snackbar 
       open={open} 
       onClose={handleClose} 
       autoHideDuration={4000}
       message="Hello World!"
       ContentProps={{
        sx:{
          //Content styles goes here
        }
       }}
/>

ContentProps is props that applied to SnackbarContent and sx is the "lets you work with a superset of CSS that packages all of the style functions exposed in @mui/system"

Let's start with a simple style change:

<Snackbar 
       open={open} 
       onClose={handleClose} 
       autoHideDuration={4000}
       message="Hello World!"
       ContentProps={{
        sx:{
          border: "1px solid black",
          borderRadius: "40px",
          color: "black",
          bgcolor: "lightgreen",
          fontWeight: "bold",
        }
       }}
/>

So, we add border, change colors and font weight.

Our new Snackbar should look like this:

It's sure better, but there is always things to improve

Let's focus the text alignment, I really like centered texts in Snackbar. But adding textAlign:"center" in sx props directly will not work, Why ?
It's because we are only styling the SnackbarContent component. SnackbarContent also contains additional containers, such as the message and action containers. To align the text properly, we need to override the styles of the message container in ContentProps, to make this happen we can use a syntax like below:

<Snackbar 
       open={open} 
       onClose={handleClose} 
       autoHideDuration={4000}
       message="Hello World!"
       ContentProps={{
        sx:{
          border: "1px solid black",
          borderRadius: "40px",
          color: "black",
          bgcolor: "lightgreen",
          fontWeight: "bold",
          textAlign: "center",
          // centering our message
          width:"100%",
          "& .MuiSnackbarContent-message":{
            width:"inherit",
            textAlign: "center",
          }
        }
       }}
/>

What are we doing here?

First we add width prop to our SnackbarContent styles, which is width:"100%", We should add this because we want to fill all the spaces of Snackbar with SnckbarContent
Then we select the message wrapper: "& .MuiSnackbarContent-message":{}, this is how we select elements in Material UI. The "&" symbol is used as a reference to the current component or container and ".MuiSnackbarContent-message" portion of the selector targets the specific class name associated with the message element within the SnackbarContent component.
Next we add, width:"inherit",textAlign: "center", inside of message container we select above.

Finally we have a centered Snackbar :

It is better right 😌

You can add additional styles to further customize the SnackbarContent component according to your preferences.

I suggest you to also add a Transition Property or change position of Snackbar easiliy with anchorOrigin.

Code Sandbox link