View Demo | Download | More Templates | Discord Community | Support Forum
Originally a premium product priced at $69+, made available for free in January 2025! 🎉
Looking for a perfect codebase generator for your Startup? Try Flatlogic AI Web App Generator - our new tool, sort of a template++.
- Ex-Premium: This template was previously paid. Enjoy it for free now. 😉
- React + Bootstrap + Material-UI: A powerful combination for building modern web apps.
- Join the Community: Flatlogic Discord is where the action happens.
- Free Node.js Backend: Pair it up with this backend to go full-stack.
-
Clone the repo
git clone https://github.com/flatlogic/sofia-react.git cd sofia-react -
Install dependencies with Node.js 22.12 or newer
npm ci --legacy-peer-deps
The explicit flag retains the existing React 18/Router 5 and legacy form-library peer constraints; no global bypass is configured.
package-lock.jsonis the canonical dependency graph. The superseded Yarn lock is removed after clean installation and full runtime/development audit verification. -
Run the app
npm start npm run start:backend
Vite serves http://127.0.0.1:5173. The first command keeps demo mode, and the second enables the existing backend integration and endpoints in
src/config.js. -
Build and verify
npm run build npm run preview npm audit npm test PLAYWRIGHT_DEV=1 npm test
The production build is written to
build/. Tests use locally installed Google Chrome and API fixtures in production preview and backend development mode. They check authentication, user-table search/sort/pagination/view, Markdown tables/task lists with sanitized HTML preview, actual chart output, calendar, vector map and logout, and fail on browser page errors. JWT unit regressions preserve the old decoder's malformed-token/null contract. Live backend/OAuth/external Google Maps are not exercised. Existing React/MUI/Sass component/deprecation warnings remain.React 18, Router 5, Redux, forms, SCSS and assets are retained. The vulnerable CRA build graph is replaced by Vite. Unmaintained Showdown is replaced with markdown-it and task-list support, with DOMPurify applied at the preview boundary. ApexCharts 3 keeps its compatible exact React adapter 1.5.0, and Highcharts uses its current color factory.
-
Docker support
docker build -t sofia-react . docker run -p 3000:3000 -d sofia-reactThe development container uses Node 22, the npm lockfile and backend mode, and binds its Vite server to port 3000. Docker execution requires a locally installed Docker engine.
- Fully Responsive Layout
- React 18
- Bootstrap 4.6
- Material-UI Components
- React Hooks
- Redux for State Management
- Authentication Pages
- Numerous Chart Libraries
- Static Sidebar
- React 18
- Bootstrap 4.6
- Material-UI
- Redux
- Webpack
- JavaScript (ES6)
- Dashboard
- User Management (Profile, Edit Profile, Change Password)
- E-Commerce (Product Grid, Product Page, Management)
- Forms (Validation, Wizard)
- Charts (Bar, Line, Pie, Mixed)
- Tables (Basic, Material-UI Tables)
- Maps (Google, Vector)
- Icons
- Notifications
- Login / Register / Error Pages
| Material | Transparent | Classic | Sofia | Flatlogic | |
|---|---|---|---|---|---|
| React | React Material Admin | Light Blue React | Sing App React | Sofia React | One React |
| Angular | Angular Material Admin | Light Blue Angular | Sing App Angular | - | - |
| Vue | Material Vue | Light Blue Vue | Sing App Vue | - | - |
| Bootstrap | - | Light Blue HTML5 | Sing App HTML5 | - | One Bootstrap |
Additionally, these templates are tailored for specific business needs:
- E-Commerce Frontend (React) - A complete e-commerce solution.
- Bookkeeper UI (React) - Accounting dashboard for finance management.
- User Management Template (React) - User authentication and management.
- Star this repo ⭐ - show some love.
- Report bugs - but be nice.
- Join the Discord - meet fellow devs.
Flatlogic AI Software Engineer builds modern business software so you don't have to. Our AI Software Development Agent helps you generate, deploy, and maintain enterprise applications with minimal effort.
This template is free to use. Modify it, break it, make it your own. Just don’t try to sell it back to us. 😎
Questions or feedback?
Join our Flatlogic Community Discord or visit our support forum. We might even reply!