cra-template-econsor

🚀 Get Started

To use this template, add --template econsor when creating a new app. For example:

npx create-react-app my-app --template econsor

or

yarn create react-app my-app --template econsor

Note: Avoid using Hello World as the project name.

📦 Includes

• Material UI  
• Redux Toolkit  
• Axios  
• React Router Dom  
• Data Driven Forms  

✨ Features

Built-in layout infrastructure for both anonymous and authorized states

Each page in the project must be wrapped with one of these layouts.

import AuthLayout from '../../../layout/AuthLayout';

<AuthLayout title="Login" authorize="unauthorized">
    {/*Your page content here!*/}
</AuthLayout>

import MainLayout from '../../../layout/MainLayout';

<MainLayout title="Dashboard" authorize="authorized">
    {/*Your page content here!*/}
</MainLayout>

The authorize prop can take one of three options.

• authorized Only authorized users can access this page.
• unauthorized Only unauthorized users can access this page.
• anyone Anyone can access this page.

Feature-oriented infrastructure

This infrastructure is good infrastructure, and we've been using it since we started building React apps. However, this infrastructure makes it difficult to create a new feature within the project. Like you need to create a new file in each root directory (like actions, reducers, types). You must also do the same if you want to delete a feature. And I don't need to tell you about copying a feature into another project.

Using feature-oriented infrastructure will make it easy to remove a feature or copy it to another project.

Built-in user-authentication system

SignIn

SignUp

Reset Password (missing)

Change Password (missing)

Profile (missing)

create-react-process (crp)

🚀 Get Started

CRP is a tool built by econsor used to generate an easy CRUD process by fetching data structure from strapi.

Notes:

1. Make sure you are running >= 14 node version
2. Before running the command below, you must create a file named schemas.js in the /src/config/ directory
3. Make sure the full path to your project does not contain Hello World or any instances of it (e.g. hello-world, HelloWorld)

node ./crp.js ../path/to/your/strapi/api/root/directory

This command will fetch all collection types from the strapi API and create a CRUD processs for each.

• 🟢   Already supported
• 🔵   Planned to be supported
• 🔴   No plans to support it. Has to be handled manually

After running the crp command, you will find a new folder created in the /src/features directory for each collection type you have in your strapi API. For example, if you have a collection type called Favorite Place, your /src/features directory will contain a folder named FavoritePlaces.

📂 features
┣ 📂 FavoritePlaces
┃   ┣ 📂 logic
┃   ┃   ┣ 📄 actions.ts
┃   ┃   ┣ 📄 api.ts
┃   ┃   ┣ 📄 reducer.ts
┃   ┃   ┗ 📄 types.ts
┃   ┗ 📂 views
┃       ┣ 📄 CreateFavoritePlaceDialog.tsx
┃       ┣ 📄 FavoritePlaceRow.tsx
┃       ┗ 📄 FavoritePlaces.tsx

📝 Template