Skip to content

NodeGeeks/amplify-nextjs-dashboard-boilerplate

 
 

Repository files navigation

NextJS AWS Amplify Gen 2 Dashboard Boilerplate

This project is a boilerplate for quickly setting up a dashboard-style application using NextJS, Tailwind CSS, AWS Amplify Gen 2, and Amplify UI. It's designed to help developers get up and running quickly with a modern, scalable, and cloud-ready web application.

Asana Project

Feel free to join the Asana Project!

NodeGeeks

Check out the geeks behind the project, visit our NodeGeeks website, or join our discord!

Features

  • NextJS: React framework for production-grade applications
  • Tailwind CSS: Utility-first CSS framework for rapid UI development
  • AWS Amplify Gen 2: Simplified backend development with TypeScript
  • Amplify UI: Pre-built UI components for faster development
  • Dashboard Layout: Pre-configured layout for admin/dashboard applications
  • Authentication: Built-in authentication flow using AWS Cognito
  • Responsive Design: Mobile-friendly and responsive out of the box

Prerequisites

  • Node.js (v14.x or later)
  • npm or yarn
  • AWS Account
  • AWS CLI configured with your credentials

Getting Started

  • in progress

Customization

  • in progress

Deployment

Follow AWS Guide at https://docs.amplify.aws/nextjs/start/quickstart/nextjs-pages-router/ starting at step 2, because you should have already forked this repository.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Components

Autocomplete

A customizable autocomplete component that allows users to search and select from a list of options. It supports dynamic filtering of options based on user input.

Chip

A component for displaying and managing a collection of chips (tags). It supports both free text input and selection from predefined options.

ColorSelection

A color picker component that allows users to select colors. It can output colors in either HEX or RGB format.

Dashboard

A flexible dashboard component that can display multiple panels. Each panel can be configured with custom content and layout options.

DataTable

A dynamic data table component that interfaces with a data model. It supports CRUD operations, real-time updates via subscriptions, and custom column rendering.

DynamicComponent

A flexible component that can render any Amplify UI component dynamically based on provided options. It supports nested components and custom props.

DynamicForm

A form component that generates input fields dynamically based on a given data structure. It supports various field types and can handle nested objects and arrays.

DynamicInput

A versatile input component that can render different types of input fields (text, number, date, boolean) based on the specified type.

MenuLinks

A navigation component that renders a list of links with optional icons. It supports preloading data and custom routing.

Modal

A reusable modal component that can be opened and closed. It provides a customizable title and content area.

MultiSelectField

A form field component that allows users to select multiple options from a dropdown list. It supports checkboxes and custom styling.

OrderedList

A draggable and sortable list component. Users can reorder items by dragging, and the component provides callbacks for order changes.

Panel

A container component used in the dashboard to display content in a structured layout. It can contain tables, forms, or other components.

Popover

A floating component that can be anchored to another element. It's useful for displaying additional information or controls.

Table

A sortable table component that can display data in a tabular format. It supports custom column definitions and sorting functionality.

Acknowledgments

  • NextJS team for the amazing React framework
  • Tailwind CSS for the utility-first CSS framework
  • AWS Amplify team for simplifying cloud development

About

NextJS AWS Amplify Gen 2 Dashboard Boilerplate

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 99.5%
  • Other 0.5%