Nextjs Graphql Adminpanel

screenshot of Nextjs Graphql Adminpanel
nextjs
react
material-ui
prisma

Admin panel built with NextJS(Typescript), Material UI, Apollo Client & GraphQL. In the backend, Prisma 2 with Nexus and Mysql is used.

Overview:

This product is a NextJS/GraphQL Admin Panel that is inspired by Material UI. It is built using a tech stack that includes React (Next JS), Typescript, Apollo Client, GraphQL, Material UI, Prisma 2, Nexus, and MySQL.

Features:

  • Frontend React (Next JS): This admin panel is built using Next JS, a popular React framework that allows for server-side rendering and static site generation.
  • Typescript: The project is written in Typescript, a statically typed superset of JavaScript that helps catch errors early.
  • Apollo Client: Apollo Client is used for managing the GraphQL queries and caching in the frontend.
  • GraphQL: The project uses GraphQL for querying and mutating data from the server.
  • Material UI: The user interface of the admin panel is inspired by Material UI, a popular design system for building responsive web applications.
  • Backend GraphQL (Prisma 2): Prisma 2 is used as the backend GraphQL server, providing a type-safe and auto-generated API for accessing the database.
  • Nexus: Nexus is used to declaratively define the GraphQL schema and resolvers in TypeScript.
  • MySQL: MySQL is used as the database for storing and retrieving data in the backend.

Summary:

This NextJS/GraphQL Admin Panel is built using a modern tech stack and inspired by Material UI. It provides a user-friendly interface for managing data with features such as dashboard, products, categories, and editable product details. The installation process is detailed in the project's Readme file, and feedback and contributions are encouraged as the project is open source.

nextjs
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

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

material-ui
Material UI

material-ui adds classes to Tailwind CSS for all common UI components. Classes like btn, card, etc. This allows us to focus on important things instead of making basic elements for every project.

prisma
Prisma

Prisma is a server-side library that helps developers read and write data to the database in an intuitive, efficient and safe way.

dashboard
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.

fullstack
Fullstack

A fullstack boilerplate provides a starter application that includes both frontend and backend. It should include database, auth, payments, user roles and other backend services to build a fully featured saas or webapps.

graphql
Graphql

A website that uses GraphQL as a query language to manage data fetching and state management. This includes features such as a strongly typed schema, client-side caching, and declarative data fetching to streamline data management and optimize website performance.

typescript
Typescript

TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.