react-mui-core

It is a front-end starter project created using React JS, Material UI, React Hook Form.

Directory structure

Overview

Project src structure directories.

src/
├─ assets/
│  ├─ logo.svg
├─ components/
|  ├─ ...
├─ contexts/
│  ├─ ApiContext.js
│  ├─ AuthContext.js
│  ├─ AuthContextHelperMethods.js
│  ├─ LanguageContext.js
│  ├─ LanguageContextHelperMethods.js
│  ├─ ThemeContext.js
├─ guard/
│  ├─ AuthGuard.js
├─ hooks/
│  ├─ ApiUseContext.js
│  ├─ AuthUseContext.js
│  ├─ LanguageUseContext.js
│  ├─ ThemeUseContext.js
├─ i18n/
│  ├─ locale/
|  |  ├─ en.json
|  |  ├─ tr.json
│  ├─ i18n.js
├─ layouts/
│  ├─ AuthLayout.js
│  ├─ DefaultLayout.js
├─ models/
│  ├─ api/
|  |  ├─ ...
│  ├─ form/
|  |  ├─ ...
├─ pages/
|  ├─ ...
├─ redux/
│  ├─ actions/
|  |  ├─ generalAppConfigAction.js
│  ├─ reducers/
|  |  ├─ generalAppConfigReducer.js
│  ├─ slices/
|  |  ├─ generalAppConfigSlice.js
│  ├─ store/
|  |  ├─ store.js
├─ router/
│  ├─ Router.js
├─ service/
│  ├─ firebase/
|  |  ├─ index.js
│  ├─ axios.js
│  ├─ axiosHelperMethods.js
├─ theme/
│  ├─ breakpoints.js
│  ├─ components.js
│  ├─ index.js
│  ├─ shadows.js
│  ├─ typography.js
│  ├─ variants.js
├─ utils/
│  ├─ config/
|  |  ├─ config.js
│  ├─ constants/
|  |  ├─ appConstants/
|  |  |  ├─ ...
|  |  ├─ apiConstant.js
|  |  ├─ languageConstant.js
|  |  ├─ locationStateKey.js
|  |  ├─ resizeWindowConstant.js
|  |  ├─ routerConstant.js
|  |  ├─ themeConstant.js
│  ├─ helper/
|  |  ├─ localizationProviderHelper.js
|  |  ├─ localStorageOperations.js
|  |  ├─ moment.js
|  |  ├─ other.js
|  |  ├─ sessionStorage.js
├─ validations/
|  ├─ ...
├─ vendor/
│  ├─ perfect-scrollbar
├─ App.js
├─ AppTheme.js
├─ index.js

Features

Packages used dependencies

@craco/craco: A tool used to customize the configuration of React applications.

@hookform/resolvers: Resolvers for React Hook Form.

@mui/icons-material: Material-UI icon set.

@mui/lab: Experimental components of Material-UI.

@mui/material: Material-UI components for React.

@mui/styled-engine-sc: Style engine supporting SC (styled-components) themes for Material-UI.

@mui/styles: Styling library for Material-UI.

@mui/system: System components for Material-UI.

@react-google-maps/api: Library for using the Google Maps API in React projects.

@reduxjs/toolkit@1.9.7: ...

@tinymce/tinymce-react: Component for using the TinyMCE text editor in React projects.

axios: Library for making HTTP requests.

date-fns: Lightweight library for date and time operations.

deepmerge: Library used for merging objects.

firebase: Library for Firebase connection and usage.

http-status: Library for HTTP status codes.

i18next: Translation library used for multi-language support.

jss: JavaScript CSS parser used for style definitions.

jwt-decode: Library for decoding JSON Web Tokens (JWT).

moment: Library for date and time manipulation.

polished: Helper library for CSS.

react: React library.

react-country-flag: React component for displaying country flags.

react-dom: Library for rendering React applications to the DOM.

react-feather: Library for using Feather icons in React projects.

react-hook-form: React library for form management.

react-i18next: React integration for the i18next translation library.

react-number-format: React component for number formatting.

react-perfect-scrollbar: Library for using the Perfect Scrollbar in React projects.

react-redux@8.1.3: ...

react-router-dom: React uygulamalarında sayfa navigasyonu için kütüphane.

react-scripts: Command files used by Create React App.

react-toastify: React library for notification (toast) messages.

styled-components: Library used for styling with the CSS-in-JS approach.

web-vitals: Library for measuring web performance.

yup: Library used for schema validation.

Packages used devDependencies

@babel/preset-env: Default environment preset used by Babel to transform JavaScript code for a specific environment.

craco-alias: Used to add additional Babel and Webpack configuration to Create React App projects, especially for defining folder aliases.

eslint-config-prettier: Used to fix incompatibilities between Eslint and Prettier.

eslint-plugin-prettier: Used to integrate Eslint with Prettier and enforce code style.

prettier: Used to automatically format and style your code.

API Layers and Context Structures

API Context (ApiContext) Within the project, a specialized API Context structure is used for backend requests and responses. This layer facilitates communication between various components of the application and the backend.
Authentication Context (AuthContext) Processes such as register, login, resetPassword, user authentication status, and distinguishing between authenticated and guest users are managed within the AuthContext.
Theme Context (ThemeContext) The application supports the ability for users to change their preferred theme. This preference is managed within the ThemeContext. Users can dynamically switch between different themes at any time.
Language Context (LanguageContext) The application features support for multiple languages. Users can change their language preference using the LanguageContext. This allows the application to display content in the user's selected language.
AuthGuard AuthGuard serves as an intermediary layer to differentiate between authenticated and guest users. It grants access permissions to specific pages, enhancing security within the application.

These API layers and context structures effectively manage crucial features of the project, including backend integration, user session management, theme preferences, and language options.

Installation

Clone the repo:

git clone https://github.com/mzehir/react-mui-core.git
cd react-mui-core

Install the dependencies:

npm install

Set the environment variables:

cp .env.example .env

# open .env and modify the environment variables (if needed)

Commands

Running locally:

npm run start

mzehir / react-mui-core