Giter VIP home page Giter VIP logo

react-argon-design's Introduction

React Argon Design full-stack

Start your development with a modern Design System for Bootstrap, React and Reactstrap. React Argon System is open source, and it features many components that can help you create amazing websites. The product comes with a simple JWT authentication flow: login/register/logout.


🚀 PROMO Spring Boost Campaign 50%OFF

The discount is applicable to all products and licenses (no stock limits) until 15.MAR

Spring Boost Campaign


🚀 Built with React App Generator

  • ✅ Innovative Argon Design System - Crafted by Creative-Tim
  • ✅ React, Redux, Redux-persist
  • ✅ Full-stack ready using Node JS API Server (open-source project)
    • Features: Typescript / SQLite / TypeORM / Joy (validation) / Passport library - passport-jwt strategy.

React Argon Design - Open-Source Fullstack starter crafted by Creative-Tim and AppSeed.


Tests

Compatibility matrix using Ubuntu 18.04 LTS as reference.

NodeJS NPM YARN
v14.0.0 ✅ ❌
v15.0.0 ✅ ❌
v16.15.0 ✅ ✅

✨ How to use it

To use the product Node JS (>= 14.x) is required and GIT to clone/download the project from the public repository.

👉 Step #1 - Clone the project

$ git clone https://github.com/app-generator/react-argon-design.git
$ cd react-argon-design

👉 Step #2 - Install dependencies via NPM or yarn

$ npm i
// OR
$ yarn

👉 Step 3 - Edit the .env using the template .env.sample.

REACT_APP_BACKEND_SERVER='http://localhost:5000/api/'

👉 Step #4 - Start in development mode

$ npm run start 
// OR
$ yarn start

✨ Configure the backend server

The product comes with a usable JWT Authentication flow that provides only the basic requests: login/logout/register.

👉 API Server URL - src/config/constant.js

const config = {
    ...
    API_SERVER: 'http://localhost:5000/api/'  // <-- The magic line
};

👉 API Server Descriptor - POSTMAN Collection

The API Server signature is provided by the Unified API Definition

  • API POSTMAN Collection - can be used to mock (simulate) the backend server or code a new one in your preferred framework.

✨ Node JS API Server

The product is also open-source and is already configured to work with Berry Dashboard Template - product features:

  • Typescript / Node js / Express server
  • JWT authentication (passport-jwt strategy)
  • Persistence: SQLite

Links


Node JS API - Open-source API server built on top of Express Nodejs Framework.


Compile the API Server

👉 Step #1 - Clone the project

$ git clone https://github.com/app-generator/api-server-nodejs.git
$ cd api-server-nodejs

👉 Step #2 - Install dependencies via NPM or Yarn

$ npm i
// OR
$ yarn

👉 Step #3 - Run the SQLite migration via TypeORM

$ yarn typeorm migration:run

👉 Step #4 - Start the API server (development mode)

$ npm dev
// OR
$ yarn dev

The API server will start using the PORT specified in .env file (default 5000).


React Argon Design PRO

For more components, pages and priority on support, feel free to take a look at this amazing starter:

Argon Design React PRO is built with over 100 frontend individual elements, like buttons, inputs, navbars, alerts or cards, giving you the freedom of choosing and combining. The product comes with a simple JWT authentication flow: login/register/logout.

  • 👉 React Argon Design PRO - Product Page
    • ✅ Enhanced UI - more pages and components
    • ✅ Priority on support

React Argon Design PRO - Premium Fullstack starter crafted by Creative-Tim and AppSeed.


React Argon Design - Provided by AppSeed.

react-argon-design's People

Contributors

app-generator avatar mominur-helios avatar

Stargazers

avatar avatar

Watchers

avatar avatar avatar

react-argon-design's Issues

Runtime Warnings - Suppress if possible

Hello @mominur-helios

The kit starts & is usable but many warnings bump in the terminal.
These messages might affect in a bad way the user's trust.

Would be nice to suppress all, or at least a part.

Thank you!

My Env: Node 16, yarn

 Deprecation Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.
<w> 
<w> Recommendation: math.div($spacer, 2) or calc($spacer / 2)
<w> 
<w> More info and automated migrator: https://sass-lang.com/d/slash-div
<w> 
<w> src\assets\scss\argon-design-system\variables.scss 352:32  @import
<w> src\assets\scss\argon-design-system-react.scss 23:9        root stylesheet
<w> 
<w> Deprecation Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.
<w> 
<w> Recommendation: math.div(($r * 299) + ($g * 587) + ($b * 114), 1000) or calc((($r * 299) + ($g * 587) + ($b * 114)) / 1000)
<w> 
<w> More info and automated migrator: https://sass-lang.com/d/slash-div
<w>
<w> node_modules\bootstrap\scss\_functions.scss 57:9           color-yiq()
<w> src\assets\scss\argon-design-system\variables.scss 656:37  @import
<w> src\assets\scss\argon-design-system-react.scss 23:9        root stylesheet
<w>
<w> Deprecation Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.
<w>
<w> Recommendation: math.div($input-padding-y, 2) or calc($input-padding-y / 2)
<w>
<w> More info and automated migrator: https://sass-lang.com/d/slash-div
<w>
<w> node_modules\bootstrap\scss\_variables.scss 493:80   @import
<w> node_modules\bootstrap\scss\bootstrap.scss 9:9       @import
<w> src\assets\scss\argon-design-system-react.scss 26:9  root stylesheet
<w>
<w> Deprecation Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.
<w>
<w> Recommendation: math.div($spacer, 2) or calc($spacer / 2)
<w>
<w> More info and automated migrator: https://sass-lang.com/d/slash-div
<w>
<w> node_modules\bootstrap\scss\_variables.scss 706:37   @import
<w> node_modules\bootstrap\scss\bootstrap.scss 9:9       @import
<w> src\assets\scss\argon-design-system-react.scss 26:9  root stylesheet
<w>
<w> Deprecation $null: Passing a unit other than deg (25%) is deprecated.
<w>
<w> To preserve current behavior: $null / 1%
<w>
<w> See https://sass-lang.com/d/color-units
<w>
<w> src\assets\scss\argon-design-system\mixins\background-variant.scss 16:54  bg-gradient-variant()
<w> src\assets\scss\argon-design-system\utilities\backgrounds.scss 6:2        @import
<w> src\assets\scss\argon-design-system\utilities.scss 1:9                    @import
<w> src\assets\scss\argon-design-system\theme.scss 27:9                       @import
<w> src\assets\scss\argon-design-system-react.scss 29:9                       root stylesheet
<w>
<w> 62 repetitive deprecation warnings omitted.
<w>
<w> null

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.