New File Structure

[akhilmhdh]

📦src
┣ 📂api : To save all the api
┣ 📂config : To save all the config like request config etc
┣ 📂const : To save all the global const
┣ 📂assets : To save all shared assets like images, css
┣ 📂components : Reusable components for ui
┃ ┗ 📂Typography : just and eg
┃ ┃ ┣ 📜index.jsx :
┃ ┃ ┗ 📜Typography.jsx
┃ ┃ ┗ 📜Typography.test.jsx
┃ ┃ ┗ 📜Typography.stories.jsx
┣ 📂context : For react various context
┣ 📂store : For global store : effector.js
┣ 📂hooks : Custom Hooks
┣ 📂layouts : Layouts of the app
┣ 📂pages : Various pages/ containers
┃ ┗ 📂HomePage : each page add components with test inside
┃ ┗ 📂components : page specific components
┃ ┗ 📜Homepage.jsx: Main file
┣ 📜index.jsx : Entry point - re-exported one from main component
┣ 📂routes : Routing of the app
┣ 📂services : Various services like google oauth etc
┣ 📜app.jsx : Main app
┣ 📜index.css : Baseline/ reset css
┣ 📜index.jsx : Entry point

Sidenotes:

1. Use PascalCase for components
2. User camelcase for rest of the things
3. Use index.js and folders for components
4. Use named export
5. .helper component file like component.helper.js for helper function

This is bit big structure but well decoupled
Suggestions are welcome