Code Monkey home page Code Monkey logo

next-13.4-alchemy-boilerplate's Introduction

    Next.js 13.4 BoilerPlate Base

Basic boilerplate for Next.js projects using Typescript, Tailwind; with testing features from Jest & React Testing Library


    Features

Testing
=> Jest
=> React Testing Library
Commits
=>
Imports
=> @ = ./src
=> # = ./public

    Project State

Project version updated for Next.js 13.4.8 [This project will be maintained to remain current with Next.js @latest until otherwise noted.] This is ready to use in its current state project is set up with Jest and React Testing Library for code testing, it has been configured to work with type script. Custom imports have been set up but are currently not working within the testing enviroment. Eslint settings still a WOP refining the configs for Jest & Testing Library as well as Typescript. Uses ESLint to parse to Typescript. Sets specific rules for for testing envrioment (files within the tests directory or files with names ending in .spec.js, .test.js, .ts, .jsx, or .tsx). Lots of rule modifications I collected from a few other react projects. Configured Import Resolver to handle custom import settings.

๐Ÿš€ Tailwind CSS Extensions


๐ŸŒˆ Neon Shadows

To-Do
Tailwind CSS Settings
Add Husky & Commit Error Catching

    How to use

Getting Started

Install Dependencies

npm i

Start Dev Enviroment

npm run dev

A README page runs on http://localhost:3000 in your browser. This will eventually contain more in depth documentation.[COMING_SOON!]

This project uses next/font to automatically optimize and load Inter, a custom Google Font. As a result the SWR compiler must be used & babel cannot be used.

Testing

This project uses Jest and React Testing Library for testing of components, libraries, utilties & application pages

Testing Dependencies

Jest 29.5.0
Jest Enviroment JsDom 29.5.0
Testing Library React 14.0.0
Testing Library Jest-dom 5.16.5

Install Dependancies

npm install --save-dev jest jest-environment-jsdom @testing-library/react @testing-library/jest-dom

Testing Commands

npm test

Runs the jest command; which runs all staged tests

npm test:watch

Runs the jest command with --watch flag; which runs all tests in watch mode

npm test:coverage

Runs the jest command with --coverage flag; which indicates that test coverage information should be collected and reported in the output.

next-13.4-alchemy-boilerplate's People

Contributors

digitl-alchemyst avatar

Watchers

 avatar

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.