Coder Social home page Coder Social logo

gobeam / truthy-react-frontend Goto Github PK

View Code? Open in Web Editor NEW
97.0 2.0 28.0 7.92 MB

Truthy CMS's Frontend application written in ReactJS & Redux Saga. This project includes UI implementation of User Management, Role Management, Permission Management, Email Module, Account Settings, OTP, RBAC support, Localization, and many more.

Home Page: http://157.245.148.131:3000

License: MIT License

HTML 0.26% JavaScript 94.89% Shell 0.02% SCSS 4.00% Less 0.77% Dockerfile 0.05% Procfile 0.01%
reactjs react-template react-redux-boilerplate react-redux-saga-boilerplate react-redux-saga react-cms react-admin-template open-source react-antd reactjs-boilerplate

truthy-react-frontend's Introduction

Truthy Logo

Truthy CMS (ReactJS Starter)

This repository is frontend part of Truthy CMS written in ReactJS & Redux-Saga. For Backend API please visit https://github.com/gobeam/truthy. Ant design (https://ant.design/) is used as an UI library. This project includes User Management, Role Management, Permission Management, Email Module, Account Settings, OTP, RBAC support, Localization, and many more. Hope you like it.
If you love it don't forget to share your experience. If you want to contribute to the Truthy CMS in any way like API, Frontend, Design, Logo you're more than welcome to do so. Our plan is to make this no. 1 CMS maintained by open-source community.

View Live here

truthy-react-frontend package.json version ruthy-react-frontend Lines of code Open Source Helpers

Buy Me A Coffee

Created by Roshan Ranabhat (gobeam) and maintained with ❤️ by an amazing team of awesome developers.

Check Live code deployed here: Frontend: Truthy CMS Backend API Docs: Swagger Docs

Truthy CMS

Table of Contents


Getting Started

This project was created to help developers by bootstrapping basic modules that need to be present while creating a standard CMS. The main motto of this project was to save precious time while developing CMS and focus more on the core part. This project is trying to follow the best possible standard to make it optimized and production-ready. Hope you like it. If you love it don't forget to share your experience.


Prerequisites

NodeJS https://nodejs.org/en/


Available Scripts

npx truthy-react-cms project_name

This commands downloads the latest version of truthy-react-cms

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.

Hot reload is supported on the development environment page will reload if you make edits.
You will also see any lint errors in the console.

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.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

yarn lint

Lints all the files inside ./src and shows the result without fixing.

yarn lint:js:fix

Lints all the files inside ./src.


Setup

First, you need to clone the project

git clone https://github.com/gobeam/truthy-react-frontend.git

After cloning the project copy .env.sample and save it as .env

cp .env.sample .env

In the .env file, you have to provide the following fields

#environment type (development, production)
NODE_ENV=development

#frontend application URI
REACT_APP_URI=http://localhost:3000

#Backend API URI (setup from: https://github.com/gobeam/truthy)
REACT_APP_API_BASE_URI=http://localhost:7777

If you want to run locally

yarn start

If you want to use Docker to deploy it on production or development stage

docker build -t truthy-frontend .
docker run truthy-frontend -p 3000:80

File Structure

This project follows the following file structure:

app
├── app                  
│   └── assets                              * Assets that are imported into your components(images, custom SVG, etc).
│   └── common                              * Common helpers function, hooks, translation messages, and layouts
│   └── component                           * Components of the projects that are not the main views.
│       └── ...
│   └── containers                          * Components that are connected to the redux-saga and receive updates.
│       └── <domain container>
│           └── index.js
│           └── action.js
│           └── constants.js
│           └── Loadable.js
│           └── messages.js
│           └── reducer.js
│           └── saga.js
│           └── selector.js
│   └── helpers                             * Common Helper functions.
│   └── hooks                               * Feature to use state and other React functionalities without writing class.
│   └── i18n                                * Translation files.
│   └── reducers                            * Pure function that takes an action and the previous state of the application and returns the 
│   └── routes                              * Routes list.
│   └── scss                                * Scss files for the project.
│   └── services                            * Common services file.
│   └── store                               * The Redux action types in action-type.js, reducers, selectors, and main store in the 
│   └── utils                               * Common utils.
│   └── app.js                              * Main app component.
│   └── global-style.js                     * Global styles.
├── build                                   * Build files when `yarn build` is run.
├── internals
│   └── scripts                             * Scripts.
│   └── webpack                             * Webpack configuration.  
├── server                                  * Node server to run the application. 

Some important root files

.
├── .editorconfig                           * Coding styles (also by programming language).
├── .env                                    * Environment variables (env.production, env.local, env.uat, etc).
├── .eslintrc.json                          * ESLint configuration and rules.
├── .prettierrc                             * Formatting Prettier options.
├── Dockerfile                              * Docker file for prod environment.
├── Dockerfile.dev                          * Docker file for dev environment.

Application Security

Throttle

By default Throttle has been implemented on API endpoints in Truthy Backend API

Two Factor Authentication (2FA)

User Will have 2FA authentication option available to be turned on or off. For 2FA time-based one-time password is used. A time-based one-time password (TOTP) application automatically generates an authentication code that changes after a certain period of time. Applications like Authenticator, 1Password, Authy etc. can be used to generate TOTP. When you enable 2FA, you will be sent a QR code in your email which should be scanned from above mentioned application and TOTP will be generated by those applications.

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change. Please make sure to update tests as appropriate. - see CONTRIBUTING.md for details. If you want to be featured in contributors list on our home page please add PR on https://github.com/gobeam/truthy-contributors to provide your details.


Sponsors


License

Released under the MIT License - see LICENSE.md for details.


Acknowledgement

truthy-react-frontend's People

Contributors

gobeam avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

truthy-react-frontend's Issues

code doesn't run locally

I created a template out of this and pulled it into a local repo where I tried to run it normally.

But running yarn build and yarn start keep causing issues with missing modules and dependencies in the bundle.

There isn't documentation on the dependencies this project was based on so I'm unable to debug the issue myself.

Remember me not working

Describe the bug
It appeard that the remember me functionality is not working after the 15 minute expiration with a page reload. I'd expect the page to just refresh, however I get redirected to the login page as the session has expired.

To Reproduce
Steps to reproduce the behavior:

  1. Log in with the remember me checkbox ticked.
  2. Wait 15 mins.
  3. Refresh the page.

Expected behavior
I would expect the page to simply reload and stay logged in.

Dark mode and theme toggle

Is your feature request related to a problem? Please describe.
With the increasing popularity of a dark mode, it would be nice for it to be implemented here.

Describe the solution you'd like
A toggle switch should be added perhaps either in the header or navbar?

Demo doesn't work

  1. Register a new account
  2. Click to Active Account link
  3. Keep loading...

image
image

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.