Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/calebbenjin/frontendinit
Join a fast-growing community built for frontend developers to learn, build and connect. We know it is time to grow in your career, and FrontendInit is here to ace it.
https://github.com/calebbenjin/frontendinit
eslint framer-motion nextjs prettier react tailwindcss typescript
Last synced: 12 days ago
JSON representation
Join a fast-growing community built for frontend developers to learn, build and connect. We know it is time to grow in your career, and FrontendInit is here to ace it.
- Host: GitHub
- URL: https://github.com/calebbenjin/frontendinit
- Owner: calebbenjin
- License: mit
- Created: 2022-11-06T00:10:25.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-03-13T10:45:22.000Z (almost 2 years ago)
- Last Synced: 2024-11-26T12:15:40.599Z (2 months ago)
- Topics: eslint, framer-motion, nextjs, prettier, react, tailwindcss, typescript
- Language: TypeScript
- Homepage: https://frontendinitdev.vercel.app
- Size: 381 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## WELCOME TO FRONTENDINIT 📃🚀🎯
### The Frontend Engineer Growth Community
Join a fast-growing community built for frontend developers to learn, build and connect. We know it is time to grow in your career, and FrontendInit is here to ace it.
## Features
- ⚡️ Next.js 13
- ⚛️ React 18
- ⛑ TypeScript
- 📏 ESLint — To find and fix problems in your code
- 💖 Prettier — Code Formatter for consistent style
- 🐶 Husky — For running scripts before committing
- 🚓 Commitlint — To make sure your commit messages follow the convention
- 🖌 Renovate — To keep your dependencies up to date
- 🚫 lint-staged — Run ESLint and Prettier against staged Git files
- 👷 PR Workflow — Run Type Check & Linters on Pull Requests
- ⚙️ EditorConfig - Consistent coding styles across editors and IDEs
- 🗂 Path Mapping — Import components or images using the `@` prefix
### Development
To start the project locally, run:
```bash
yarn dev
```
Open `http://localhost:3000` with your browser to see the result.
### Requirements
- Node.js >= 12.22.0
- pnpm 7
### Directory Structure
- [`.github`](.github) — GitHub configuration including the CI workflow.
- [`.husky`](.husky) — Husky configuration and hooks.
- [`public`](./public) — Static assets such as robots.txt, images, and favicon.
- [`src`](./src) — Application source code, including pages, components, styles.
### Scripts
- `yarn dev` — Starts the application in development mode at `http://localhost:3000`.
- `yarn build` — Creates an optimized production build of your application.
- `yarn start` — Starts the application in production mode.
- `yarn type-check` — Validate code using TypeScript compiler.
- `yarn lint` — Runs ESLint for all files in the `src` directory.
- `yarn format` — Runs Prettier for all files in the `src` directory.
### Path Mapping
TypeScript are pre-configured with custom path mappings. To import components or files, use the `@` prefix.
```tsx
import { Button } from '@/components/Button';
// To import images or other files from the public folder
import avatar from '@/public/avatar.png';
```
### Switch to Yarn/npm
This project uses yarn by default, but this choice is yours. If you'd like to switch to pnpm/npm, install the dependencies with yarn/npm, change the CI workflow, and Husky Git hooks to use yarn/npm commands.