Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/brenoliradev/lumx-studios-test

Frontend test for Lumx Studios
https://github.com/brenoliradev/lumx-studios-test

Last synced: 26 days ago
JSON representation

Frontend test for Lumx Studios

Awesome Lists containing this project

README

        

🚀 Boilerplate and Starter for Next.js, Tailwind CSS and TypeScript ⚡️ Made with developer experience first: Next.js, TypeScript, ESLint, Prettier, Husky, Lint-Staged, VSCode, Netlify, PostCSS, Tailwind CSS.

### Features

Developer experience first:

- 🔥 [Next.js](https://nextjs.org) for Static Site Generator
- 🎨 Integrate with [Tailwind CSS](https://tailwindcss.com)
- 🎉 Type checking [TypeScript](https://www.typescriptlang.org)
- ✅ Strict Mode for TypeScript and React 18
- ✏️ Linter with [ESLint](https://eslint.org) (default NextJS, NextJS Core Web Vitals, Tailwind CSS and Airbnb configuration)
- 💡 Absolute Imports
- 🛠 Code Formatter with [Prettier](https://prettier.io)
- 🦊 Husky for Git Hooks
- 🚫 Lint-staged for running linters on Git staged files
- 🤖 SEO metadata, JSON-LD and Open Graph tags with Next SEO
- ⚙️ [Bundler Analyzer](https://www.npmjs.com/package/@next/bundle-analyzer)

- 💻 [Components and Design Patterns](https://github.com/gabrieldemian/evil-nextjs-boilerplate/tree/dev)

### Getting started

Run the following command on your local environment:

```
git clone [email protected]:gabrieldemian/evil-nextjs-boilerplate.git my-project-name
cd my-project-name
npm install
```

Then, you can run locally in development mode with live reload:

```
npm run dev
```

Open http://localhost:3000 with your favorite browser to see your project.

```
.
├── README.md # README file
├── next.config.js # Next JS configuration
├── public # Public folder
│ └── assets
│ └── images # Image used by default template
├── src
│ ├── components # Components folder
│ ├── layout # Atomic layout components
│ ├── pages # Next JS pages
│ ├── styles # PostCSS style folder with Tailwind
│ ├── templates # Default template
│ └── utils # Utility folder
├── tailwind.config.js # Tailwind CSS configuration
└── tsconfig.json # TypeScript configuration
```

### Deploy to production

You can see the results locally in production mode with:

```
$ yarn build
$ yarn start
```

The generated HTML and CSS files are minified (built-in feature from Next js). It will also removed unused CSS from [Tailwind CSS](https://tailwindcss.com).

You can create an optimized production build with:

```
npm run build-prod
```

Now, it is ready to be deployed. All generated files are located at `out` folder, which you can deploy with any hosting service.