Start to build awesome apps, And be more productive⚡️

There is no need for writing boring boilerplate any more :)

Description

@reactjs template with redux-toolkit and typescript included, And needed libs and pkgs installed and included as well.

Available Scripts

In the project directory, you can run:

yarn start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

yarn test

Launches the test runner in the interactive watch mode.

yarn build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

yarn eject

Note: this is a one-way operation. Once you eject, you can’t go back!

If you aren’t satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.

Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.

---

File Structure

.../ts-react-redux-toolkit-template
│
├── config-overrides.js
├── docker-compose.yml
├── Dockerfile.dev
├── Dockerfile
│
├── public
│   ├── assets
│   │   ├── fonts
│   │   │   ├── OperatorMonoLig-BookItalic.otf
│   │   │   ├── OperatorMonoLig-Book.otf
│   │   │   ├── OperatorMonoLig-MediumItalic.otf
│   │   │   └── OperatorMonoLig-Medium.otf
│   │   └── images
│   │       ├── loading.gif
│   │       ├── logo.svg
│   │       └── notfound-cover.svg
│   ├── favicon.ico
│   ├── icon.svg
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
│
├── src
│   ├── api
│   │   ├── base.ts
│   │   ├── user
│   │   │   └── endpoints-referrers.ts
│   │   └── usual-collection-crud-callers
│   │       └── endpoints-referrers.ts
│   ├── App.test.tsx
│   ├── App.tsx
│   ├── common
│   │   ├── constants
│   │   ├── interfaces
│   │   │   ├── auth
│   │   │   │   └── auth.interface.ts
│   │   │   ├── comps
│   │   │   │   ├── add-banner.interface.ts
│   │   │   │   ├── banner.interface.ts
│   │   │   │   ├── footer.interface.ts
│   │   │   │   ├── form-input.interface.ts
│   │   │   │   ├── header.interface.ts
│   │   │   │   ├── hero.interface.ts
│   │   │   │   ├── layout.interface.ts
│   │   │   │   └── notifyer.interface.ts
│   │   │   └── slices
│   │   │       └── initial
│   │   │           └── initial.interface.ts
│   │   ├── styles
│   │   │   ├── app.sass
│   │   │   ├── index.sass
│   │   │   └── utils
│   │   │       ├── _animation.util.sass
│   │   │       ├── _colors.util.sass
│   │   │       ├── _fonts.util.sass
│   │   │       ├── _helper-classes.util.sass
│   │   │       └── _mixins.util.sass
│   │   ├── types
│   │   │   ├── signin-form.types.ts
│   │   │   └── signup-form.types.ts
│   │   └── utilities
│   │       ├── localstorage-dealer
│   │       │   ├── localstorage-getters.util.ts
│   │       │   └── localstorage-setter.util.ts
│   │       └── scroll-to-top
│   │           └── scroll-to-top.util.ts
│   ├── components
│   │   ├── base
│   │   │   └── initial
│   │   │       ├── initial.comp.tsx
│   │   │       └── style.sass
│   │   └── distributed
│   │       ├── ad-banner
│   │       │   ├── add-banner.comp.tsx
│   │       │   └── style.sass
│   │       ├── banner
│   │       │   ├── banner.comp.tsx
│   │       │   └── style.sass
│   │       ├── footer
│   │       │   ├── footer.comp.tsx
│   │       │   └── style.sass
│   │       ├── form-input
│   │       │   ├── form-input.comp.tsx
│   │       │   └── style.sass
│   │       ├── header
│   │       │   ├── header.comp.tsx
│   │       │   └── style.sass
│   │       ├── hero
│   │       │   ├── hero.comp.tsx
│   │       │   └── style.sass
│   │       ├── layout
│   │       │   ├── layout.comp.tsx
│   │       │   └── style.sass
│   │       └── notifyer
│   │           ├── notifyer.comp.tsx
│   │           └── style.sass
│   ├── index.tsx
│   ├── react-app-env.d.ts
│   ├── redux
│   │   ├── hooks.ts
│   │   ├── slices
│   │   │   └── initial
│   │   │       ├── initial.slice.ts
│   │   │       └── logic
│   │   │           └── async-call.sliceLogic.ts
│   │   └── store.ts
│   │  
│   └── views
│       ├── contact
│       │   ├── contact.page.tsx
│       │   └── style.sass
│       ├── landing
│       │   ├── landing.page.tsx
│       │   └── style.sass
│       ├── not-found
│       │   ├── notfound.page.tsx
│       │   └── style.sass
│       ├── signin
│       │   ├── signin.page.tsx
│       │   └── style.sass
│       ├── signup
│       │   ├── signup.page.tsx
│       │   └── style.sass
│       └── terms
│           ├── style.sass
│           └── terms.page.tsx
│
├── serviceWorker.ts
├── tsconfig.json
├── setupTests.ts
├── package.json
└── yarn.lock
├── README.md
├── LICENSE

---

Contribution

Project naming convention

• For naming files and directories i like to use cabab-case
• For naming functions, utilities i like to use camelCase is javascript used to be
• For naming interfaces, types i like to use PascalCase

Read about naming-convention in programming (wiki)

How to contribute

If you don't know how to contribute or where you can start.. I suggest to visit those links below

• How-to-contribute (github-blog)
• how-to-contribute-to-open-source (freeCodeCamp)

Start to contribute

Things need contributions in this project

• Create constants/footer.data.ts which is should contains footer data represented in arrays of objects, Or any other DS as needed.

  • then go to build footer with this data.

• As same as footer, You can start build DS for header routes in the /constants directory.

  Also build the mobile-header menu and manage the responsiveness.

• Create additional animations /common/styles/utils/_animation.util.sass

• Remove bootstrap and its redundant dependencies then replace it with Chakra-ui OR Ant-design

• Write terms & policy data in /constants to use it later in terms page.

• Customize the project given components and modify it to be reusable as possible.

Support

Feel free to star the repo

follow me on twitter @salihcodev