August 14, 2023

A ready template for a quick start with react

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

View Github