This template forms the basis for line-of-business web applications. Frequently, partners need a simple CRUD interface for applications like:
- inventory management
- project/task tracking
- document submittal
The template supports these application types by providing an application shell with common features such as:
- authentication
- dialogs for data entry
- data tables
- form validation
- file uploads
- drag-and-drop
- Excel spreadsheet support
A venture squad will be able to copy this template and modify it to suit their venture's need.
The template is built with:
- React
- TypeScript
- Material UI
- Vite
- Supabase
Additional dependencies are added to support individual features
The responsive shell that provides a toolbar, navbar, and aside.
The DAS template uses Supabase for user authentication and authorization. Implementation for Google and Microsoft authentication is provided.
The DAS template uses Supabase for data storage. It is anticipated that applications requiring RDBMS support would use this. Examples of lists, dialogs, and forms with validation are available. The file src/setions/tickets/TicketTable.tsx and src/setions/tickets/TicketGrid.tsx are entry points for the example.
The DAS template includes support for displaying Markdown. The typical use-case is to display privacy policies and/or terms and conditions. The content on the page can be stored as a application resource to allow changes withou redployment. One consequence of supporting Markdown is not using Tailwind CSS. Tailwind removes default formatting from HTML components (e.g. h1 renders plainly with default font size and weight). Markdown is implemented with react-markdown.
The DAS template includes an example of uploading, reading, as listing of files in Supabase's storage system. The use-case for this could include storing documents, like release forms, for an application. The file src/setions/file-storage/UploadPage.tsx is the entry point for the example.
The DAS template includes an example mapping page src/sections/maps/MapPage.tsx. Maps were implemented with react-map-gl & maplibre-gl.
The DAS template includes an example of drag-and-drop use src/pages/dragdrop/DragDropPage.tsx. Drag and drop is implemented with @dnd-kit/core and @dnd-kit/sortable.
The DAS template includes an example of parsing a spreadsheet. it is implemented with xlsx.
The template includes components that provide common functionality and enforce standards. The components should be used in venture applications to meet required behaviors. This consistency will allow maintainers to have fewer points of support.
The application shell includes a 10 second timer. The RefreshContext can be used to refresh components with current data.
const { refresh } = useContext(RefreshContext)
useEffect(() => {
// Refresh action
ticketService.getTickets(NUM_TIX)
.then((tix) => setTickets(tix))
}, [refresh])
The application shell includes a linear progress indicator. The indicator is in the shell header and displays when the LoadingContext is set. Components can use the LoadingContext to control the indicator.
const { setLoading } = useContext(LoadingContext)
useEffect(() => {
setLoading(true)
ticketService.getTickets(NUM_TIX)
.then((tix) => setTickets(tix))
.finally(() => setLoading(false));
}, [setLoading])
A base theming added based on primary and secondary color of project logo and branding including a background primary color in main and minimal layout and secondary color for profile / login / 404 buttons.
This base theming could be easily changed for different ventures by changing two following primary and secondary color in src/themes/palette file.
const primaryColor = "#00728f" const secondaryColor = "#ef3825"
These two colors was used for DAS Admin Template and should be changed for other projects in addition to change logo and Application name in env file
The application is deployed at Google's Firebase as a static website. GitHub's workflow action adds site secrets to the build before deploying.
Note: You need to be given access on the supabase project
- Go to https://supabase.com/ and set up an account using your Digital Aid Seattle Email.
- Note: You should have been granted access prior to this set-up to be able to access the next part
- Go to supabase dashboard https://supabase.com/dashboard/organizations
- Click on "League of Women's Voters WA"
- Click on "women_voters@digitalaidseattle.org's Project"
-
On the side menu look for "API Docs" on the right side you can get the supabase url.
-
On the side menu go to Project Setting > API Keys this is where you get the anon key.
Clone the project found at https://github.com/digitalaidseattle/league-of-women-voters in your local machine.
VITE_SUPABASE_URL=
VITE_SUPABASE_ANON_KEY=
SUPABASE_GOOGLE_CLIENT_ID=
SUPABASE_AUTH_EXTERNAL_GOOGLE_SECRET=
- This allows the local server to act as the auth service.
npm install
npm install -g supabase
supabase init
supabase start
npm run dev
You can stop the containers by running command below
supabase stop
Environment variables for the connecting to Supabase must be added to the hosting platform as well as the .env.local file. Squad members must obtain the supabase url and auth_anon_key for accessing the Supabase project.
Contents of the navbar, the drawer of links on the left of the application window, can be modified by changing the contents of /src/menu-items/index.tsx.
Contents of the toolbar, the links at the top the application window and left of the profile button, can be modified by changing the contents of /src/toolbar-items/index.tsx. The file /src/sections/tickets/TicketToolbarItem contains an example of what can be done with a toolbar item.
Since the template uses react-router-dom for application routing, there is no requirement to placement new pages in the pages folder. It is by convention that new pages are placed there. For the page to be included in the application src/pages/routes.tsx must be updated to include the new page.
The logo, displayed in the upper left hand of the application window and elsewhere, can be modified in /src/components/Logo/Logo.tsx. The image files should be placed in the /src/assets/images/ directory.