The best ReactJS & NextJS folder structure | How to organize and scale your React project

React is a HTML rendering JavaScript library. Not a web development framework as it is often wrongly called. If it were a framework, React would decide how we should organize our files. Instead it leaves this up to you. This video shows you my prefered folder structure for making large React projects that are easy to maintain and scale.

🕑 Timestamps
00:00 Intro
01:17 Project setup and SURPRISE CAT 🐈
05:42 React Router and Page Components
11:14 Layout Components
17:47 App Provider
20:42 Posts module Main Feed page component
24:14 Nested Posts Router
27:48 usePosts custom hook
39:19 Rendering Post components
44:17 Users module Profile page component
48:43 UserContextProvider
52:53 useUserContext hook
55:17 LogIn component
1:00:20 logInWithUsername UserContext function

[drupaldeveloper]

Lovely dunglish, haha but thank you for this video learned something again! (:

[chismail]

Thanks for this useful tutorial.
About the context issue:

type UserContextType = {
user: UserType | null;
isLogin: (username: string) => Promise<void>;
};

const UserContext =
user: null,
isLogin: async () => {},
});

is it good? 🤔

[fadilalfarhan]

Hi,
How does this work with the nextjs 13,
do i put common and modules inside the app folder?