mryesiller / react-project-structure

Small and medium size project folder structure

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

SOURCEFILE

Assets

This folder contains all the media assets, such as images, videos, json files, etc..

  • Fonts --> font is a set of text characters, numbers, punctuation, and symbols which have a specific style, weight, size, and effect.
  • Images --> a visual representation of something
  • styles --> some external css files
  • theme --> Iam using Material UI . theme settings in here.

Components

This folder contains all the Presentational/Stateless Components as discussed above.

  • Footer --> Textual information, such as a title, date, or page number, positioned in the bottom margin of a page and usually repeated throughout a document.
  • Header --> A navigation bar is a section of a graphical user interface intended to aid visitors in accessing information.
  • Layouts --> Area where fixed templates will be created.
  • Section --> The area where the fixed parts of each partition will be created.
  • UI --> File where micro elements are organized
    • button
    • card
    • forms
    • image
    • input
    • spinner --> Loader
    • text

Config

They allow you to customize how you interact with an application or how an application interacts with the rest of your system.

Pages

  • Admin
  • Auth --> this the place of register and login pages.
  • Dashboard --> Control Panel
  • Error --> 404 Error not found pages or others.
  • Home --> First index page. Welcome page.
  • Sections --> Other sections in the dashboard.

Routes

Navigation section

Services

  • Api --> axios,fetch,REST files
  • Constants
  • Locales --> Languages settings en-US tr-TR etc.
  • LocalStorage
  • Test
  • Utils --> Helper functions

Store

Contains global store or global context that are getting used across product.

  • Actions
  • Context
    • User
    • Section
  • Reducers

App.js

İndex.js

About

Small and medium size project folder structure


Languages

Language:HTML 43.0%Language:JavaScript 30.2%Language:CSS 26.8%