Overview
The UOW Sculptures Admin Dashboard is a multi-functional and comprehensive admin dashboard designed for UOWAC staff to manage data for the UOW Sculptures mobile app. The frontend of the app is built using Next.js (SSR React), Ant Design, and styled-components, while the backend utilizes TypeScript Node.js, PostgreSQL, Auth0 for authentication, and AWS S3 for cloud storage.
Features
- General trends and statistics of the system: Get an overview of the trends and statistics of the system.
- Customized date picker: Easily select a time interval to view trends and statistics.
- User proportion statistics: View statistics on user proportions.
- View sculptures list: Browse and search through a list of sculptures with sorting options.
- View sculptures detailed information: Access detailed information about each sculpture.
- View social statistics of sculptures: See statistics on likes, comments, and visits for each sculpture.
- Populate data for new sculpture: Easily add data for a new sculpture, including map integration and image upload.
- User management: Manage users with search and sort functionality.
- User profile: Access and edit user profiles.
- Recent activity management: Manage recent activities within the system.
Installation
To install the UOW Sculptures Admin Dashboard, follow these steps:
- Download and install Node.js and npm.
- Open your terminal and navigate to the project directory.
- Run the following command to install the required dependencies:
npm install
- To start the development server, run:
npm run dev
- Open your browser and go to http://localhost:3000 to see the app.
For production use, follow these additional steps:
- Build the project by running:
npm run build
- Start the production version of the app with the following command:
npm run start
Summary
The UOW Sculptures Admin Dashboard is a powerful tool for UOWAC staff to manage data for the UOW Sculptures mobile app. With its user-friendly interface, comprehensive features, and robust technology stack, it provides an efficient solution for data management and analysis.
- Next.js
Next.js is a React-based web framework that enables server-side rendering, static site generation, and other powerful features for building modern web applications.
- React
React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components
- LESS
Less CSS is a dynamic stylesheet language that extends the capabilities of CSS, allowing developers to write cleaner, more modular, and reusable stylesheets with features like variables, mixins, and nested rules.
- Styled Components
Styled Components is a popular library for styling React components using CSS syntax. It allows you to write CSS in your JavaScript code, making it easier to create dynamic styles that are specific to each component.
- Ant Design
Ant Design is a React UI library that provides a set of pre-designed components and design resources for building high-quality, responsive web applications.
- Dashboard
A dashboard style website template is a pre-designed layout that features a user interface resembling a control panel or dashboard. It typically includes charts, graphs, tables, and other data visualization tools that allow users to monitor and analyze data in real-time.
- Eslint
ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.