fransachmadhw / react_admin_ui_v1

✨ A Beautiful Admin Dashboard UI Built with React TypeScript ✨

React Admin UI is a beautiful and open-source Dashboard User Interface Prototype built with TypeScript and React based. Surprisingly, this is my first time building a User Interface prototype with a bit complex components. So, my goal is IT agencies or even individual developers could use this prototype to brings insight for their future projects.

Have a look at the preview of React Admin UI for a comprehensive list of prototype's features, core values and use cases.

This repository contains the core system of React Admin UI Prototype, splitted into two different directories. Backend is for the JSON API (It is already configured for Vercel deployment), and Frontend is for the whole User Interface prototype.

💎  Features and Consist of

• ⚡️ React 18 TypeScript with Vite
• 🎯 Declarative Routing with React Router v6
• 📋 Seamless Data Fetching with React Query v5
• ✨ Optimized Icons with React Icons v5
• 🎨 Tailwind CSS v3 as the Styling Foundation
• 👓 Daisy UI v4 as the Base Design System
• 🕶 Material UI v5 for optimized Data Grid
• 📊 Beautiful Charts with Recharts v2
• 🤯 And many more...

🚀  Installation and How to use

See below for a quickstart installation and usage examples.

Backend

Install all dependencies listed in package.json inside backend directory.

cd backend

npm install

By default, I already deployed the API to run in Vercel environment. The live API can be accessed from https://react-admin-ui-v1-api.vercel.app/. However, in case you would like to configure the backend by yourself, you can run below.

nodemon ./src/index.ts

And the API can be accessed locally from http://localhost:5000.

Frontend

Install all dependencies listed in package.json inside frontend directory.

cd frontend

npm install

npm run dev

If you would like to change the default API endpoint, you can go to ApiCollection.tsx.

And then, the app can be accessed from http://localhost:5173/.

📫  Have a question? Would like to chat? Ran into a problem?

Obviously you can always reach out to me directly via a formal approach such as Email or LinkedIn.

🤝  Found a bug? Suggesting a specific feature?

Feel free to file a new issue with a respective title and description on the the fransachmadhw/react_admin_ui_v1 repository. If you already found a solution to your problem, we would love to review your pull request!

✅  Requirements

React Admin UI requires a Node version higher or equal to 20.11.0 LTS. Have a look at the dependencies and devDependencies section in the package.json inside backend and frontend to find the current list of the requirements of React Admin UI.

📘  License

React Admin Dashboard UI Prototype is released under the terms of the BSD-3-Clause.