There is no need for writing boring boilerplate any more :)
@reactjs template with redux-toolkit and typescript included, And needed libs and pkgs installed and included as well.
In the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:3000
to view it in the browser.
Launches the test runner in the interactive watch mode.
Builds the app for production to the build
folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
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.
.../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
- 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
If you don't know how to contribute or where you can start.. I suggest to visit those links below
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.
Feel free to star the repo
follow me on twitter @salihcodev