goker-dev / superplate-sample

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

A SAMPLE PROJECT

This project was generated with superplate. openapi-typescript-codegen

Getting Started

superplate is a Next.js all-in-one project generator. Create your project with the tools you need without spending hours on setting them up.

You SHOULD add these packages fist.

pnpm add -D openapi-typescript-codegen fs request
pnpm add axios react-hook-form iron-session @tailwindcss/forms

And then, you SHOULD edit the generator.js file.

So now, you can generate your base api by

pnpm run codegen

The script download the spec.json and generate the openapi base (models, schemas, services) under the /rest folder.

After then, you can create your api calls under the pages/api/ folder.

Available Scripts

Running the development server.

    pnpm dev

Building for production.

    pnpm build

Running the production server.

    pnpm start

Learn More

To learn more about superplate, please check out the Documentation.

TailwindCSS

A utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup.

Go To Documentation

SASS/SCSS

Sass is a stylesheet language that’s compiled to CSS. It allows you to use variables, nested rules, mixins, functions, and more, all with a fully CSS-compatible syntax.

Go To Documentation

Fetch

Next.js has a built-in polyfill for the fetch API. You don't need to worry about using it on either server or client side.

Go To Documentation

Storybook

Storybook is an open source tool for developing UI components in isolation for React, Vue, Angular, and more. It makes building stunning UIs organized and efficient.

Go To Documentation

SVGR

Transform SVGs into React components.

Go To Documentation

Environment Variables

Use environment variables in your next.js project for server side, client or both.

Go To Documentation

Reverse Proxy

Proxying some URLs can be useful when you have a separate API backend development server and you want to send API requests on the same domain.

Go To Documentation

Bundle Analyzer

Use webpack-bundle-analyzer in your Next.js project. Visualize size of webpack output files with an interactive zoomable treemap.

Go To Documentation

SWR

React Hooks library for data fetching from Vercel

Go To Documentation

React Query

Hooks for fetching, caching and updating asynchronous data in React.

Go To Documentation

react-use

A Collection of useful React hooks.

Go To Documentation

React Redux

Redux helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test.

Go To Documentation

RTK Query

RTK Query is a powerful data fetching and caching tool

Go To Documentation

next-i18next

next-i18next is a plugin for Next.js projects that allows you to get translations up and running quickly and easily, while fully supporting SSR, multiple namespaces with codesplitting, etc.

Go To Documentation

ESLint

A pluggable and configurable linter tool for identifying and reporting on patterns in JavaScript. Maintain your code quality with ease.

Go To Documentation

Prettier

An opinionated code formatter; Supports many languages; Integrates with most editors.

Go To Documentation

lint-staged

The concept of lint-staged is to run configured linter (or other) tasks on files that are staged in git.

Go To Documentation

Testing Library

The React Testing Library is a very light-weight solution for testing React components. It provides light utility functions on top of react-dom and react-dom/test-utils.

Go To Documentation

Cypress

Fast, easy and reliable testing for anything that runs in a browser.

Go To Documentation

Docker

Docker simplifies and accelerates your workflow, while giving developers the freedom to innovate with their choice of tools, application stacks, and deployment environments for each project.

Go To Documentation

Github Actions

GitHub Actions makes it easy to automate all your software workflows, now with world-class CI/CD. Build, test, and deploy your code right from GitHub.

Go To Documentation

pnpm

Go To Documentation

License

MIT

About

License:MIT License


Languages

Language:TypeScript 94.5%Language:JavaScript 4.7%Language:SCSS 0.5%Language:Dockerfile 0.3%