Giter Club home page Giter Club logo

nextjs-boilerplate's Introduction



NextJs Boilerplate

A Better template with NextJs with technologies to improve development.

Wakatime

View Demo ยท Report Bug ยท Request Feature

image

Table of Contents
  1. About The Project
  2. Getting Started
  3. Configuration
  4. Contributing
  5. License
  6. Deploying
  7. Contact

About The Project

๐Ÿ›  Built With

The following tools were used in building the project:

  • Next JS
  • React
  • TypeScript
  • Styled Components
  • Storybook
  • Jest
  • Testing-Library
  • Codecov
  • Cypress
  • ESLint
  • Prettier
  • Stylelint
  • Handlebars
  • Actions
  • Editorconfig

(back to top)

๐ŸŒˆ Storybook

Storybook is a frontend workshop for building UI components and pages in isolation. Thousands of teams use it for UI development, testing, and documentation.


โฌ‡๏ธ Start Storybook

# With npm
npm run storybook

# With yarn
yarn storybook

# With pnpm
pnpm storybook

โฌ‡๏ธ Build Storybook

# With npm
npm run build-storybook

# With yarn
yarn build-storybook

# With pnpm
pnpm build-storybook


(back to top)

๐Ÿ… Lighthouse




(back to top)

๐Ÿ” Codecov

Codecov provides metrics and insights into the results of tests through code coverage reports. Coverage reports are used to determine which lines of code were tested and which lines were not tested, which may contain bugs and syntax errors.


(back to top)

๐Ÿš€ Getting Started

Prerequisites

To clone and run this application, you'll need Git and NodeJs (which comes with npm) installed on your computer.

Installation

  1. Clone the repository.
git clone https://github.com/GabrielGuedess/NextJs-Boilerplate
  1. Go into the repository
cd NextJs-Boilerplate
  1. Install dependencies.
# With npm
npm i

# With yarn
yarn

# With pnpm
pnpm i
  1. Start project.
# With npm
npm run dev

# With yarn
yarn dev

# With pnpm
pnpm dev

Note If you're using Linux Bash for Windows, see this guide or use node from the command prompt.

(back to top)

๐Ÿšจ Configuration

  • Cypress
    • Add CYPRESS_PROJECT_ID to Github.
    • Add CYPRESS_RECORD_KEY to Github.
  • Chromatic
    • Add CHROMATIC_PROJECT_TOKEN to Github.
  • Lighthouse
    • Add LIGHTHOUSE_BADGER_TOKEN to Github.

See the open issues for a full list of proposed features (and known issues).

(back to top)

๐Ÿ‘ Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement".

  1. Fork the Project
  2. Create your Feature Branch (git checkout -b feature/NewFeature)
  3. Commit your Changes (git commit -m 'Add some NewFeature')
  4. Push to the Branch (git push origin feature/NewFeature)
  5. Open a Pull Request

(back to top)

๐Ÿ“„ License

Distributed under the MIT License. See MIT license for more information.

(back to top)

๐ŸŒ Deploying


Deploy with Vercel

(back to top)

โญ Contact

Gabriel Guedes - @GabrielRGuedess - [email protected]

Project Link: https://nextjs-boilerplate-gabrielguedess.vercel.app


Made with โ™ฅ by ๐Ÿ‘จโ€๐Ÿš€ Gabriel Guedes ๐Ÿ‘‹ Get in touch!

(back to top)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.