Git Product home page Git Product logo

react_template's Introduction

A ready template for a quick start with react. ๐Ÿš€

GitHub Pages

Demo


โœจ Features

  • ๐ŸŒ™ Dark Mode: [DARK, LIGHT]
  • ๐ŸŽจ Template Color: [YELLOW, BLUE, GREEN, RED, PURPLE, GREY]
  • ๐Ÿ“ฅ Header Types: [STATIC, FIXED, HIDE, ELEVATE]
  • ๐Ÿ“ Scroll to Top
  • ๐Ÿ“ฑ PWA
  • ๐Ÿ”’๏ธ Authentication Types: [WEB3, OAUTH, EMAIL, MOBILE]
  • ๐Ÿ’พ Database Types: [MONGO, MARIA, POSTGRES]
  • ๐Ÿ‘ฝ๏ธ API Types: [REST, GRAPHQL]
  • ๐Ÿคก Mock Server (Mock API)
  • ๐Ÿ“Š Prometheus (Metrics)
  • โœ… Test (Mocha, Chai, Jest)

๐Ÿ“ How to Edit

  1. Clone the project
  2. Edit Home.js & Page1.js (or add other Pages) in Client\src\Content\Screens path
  3. Modify (or add) name of your pages in:
    3.1. Main.js (Client\src\Content) for routing.
    3.2. ListItems.js (Client\src\Content\Header\Drawer) for Show in Menu.
  4. Modify values of .env file
 ** Only modify files of `Content` folder (client\src\Content), .env file & index.html. **

โšก๏ธ How to Run

JavaScript Badge React Badge MUI Badge web3dotjs Badge

Frontend:

In the client directory, you can run:

npm start

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

Default Values of .env file:
REACT_APP_SERVER_URL=""             >>  Empty String for Mock Web Server or
                                    >>  Input Your Server Address for Real Server
REACT_APP_THEM_MODE="DARK"          >>  DARK or LIGHT
REACT_APP_THEM_COLOR="PURPLE"       >>  YELLOW, BLUE, GREEN, RED, PURPLE or GREY
REACT_APP_HEADER_TYPE="STATIC"      >>  STATIC, FIXED, HIDE or ELEVATE
REACT_APP_AUTH_TYPE="WEB3"          >>  WEB3, OAUTH, EMAIL or MOBILE

JavaScript Badge Express Badge GraphQL Badge ApolloGraphql Badge Docker Badge Prometheus Badge Grafana Badge

Backend:

If you want to run the Real Server, First edit the .env file (in client).

REACT_APP_SERVER_URL="http://localhost:4000"

  • PROMATHEUS="false"

    In the server directory, you can run:

    npm start


  • PROMATHEUS="true"

    For active Prometheus metrics on server, first run PLG docker compose:

    PLG


    Then run `docker-compose.yml` in `server\docker`

Now open http://localhost:4000 to view it in your browser.


Docker Badge MariaDB Badge MongoDB Badge PostgreSQL Badge

Database:

You can use Docker to run the database.

MongoDB | MariaDB | PostgrSQL

react_template's People

Contributors

barkand avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

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.