📔 Table of Contents

• 🎯 FEATURES
• 💻 STACK
• 🧰 GETTING STARTED
  • ‼️ Prerequisites
  • 🧪 Running Tests
  • 🏃 Run Locally
  • ⚙️ Generate elements
    • 📃 Page
    • ✏️ Component
    • 🎨 UI
• 🚢 DEPLOY TO NETLIFY
• 🧭 ROADMAP
• 🔗 REFERENCES & LINKS

🎯 FEATURES

• React, TypeScript, and Next.js: Harness the power of these popular technologies to build modern web applications.
• ESLint and Prettier Configuration: Ensure your code is clean and consistent from the start.
• CSS Styling with Pandacss: Use Pandacss to efficiently and customizably manage your application's styles.
• Commit Management with Husky and Lint-Staged: Avoid poorly formatted or error-ridden commits with these tools.
• Code Generation with Plop: Speed up component and page creation with this code generator.
• Unit Testing with Jest and Testing Library: Ensure your application's stability by writing unit tests.
• Detailed README with instructions for getting started and developing your project.

💻 STACK

🧰 GETTING STARTED

‼️ Prerequisites

• Install Node JS & npm in your computer Here

• Install Git in your computer Here

• This project uses Yarn as package manager

  npm install --global yarn
  

🧪 Running Tests

To run tests, run the following command

yarn test

🏃 Run Locally

Clone the project

https://github.com/JFeremy/React-Ts-Next-Boilerplate

Go to the project directory

cd my-project

Install dependencies

yarn install

Build the project

yarn build

Start the server

yarn start

⚙️ Generate elements

📃 Page

This script will generate all content for a new page

yarn generate // choose 📃 Page
> Page name ? // Enter the name of the page (it will be the URL path)
> Page path after [lang] ? // for example for an subpage cv under about-me, enter about-me/ 

Example

λ yarn generate
yarn run v1.22.19
$ plop
? [PLOP] Please choose a generator. 📃  Page - Create a page
? Page name ? cv
? Page path after [lang] ? about-me/
✔  ++ \src\app\[lang]\about-me\cv\page.tsx
✔  ++ \src\app\[lang]\about-me\cv\__tests__\page.test.tsx
✔  ++ \public\locales\pages\cv.page.ts
✔  _+ \public\locales\pages\index.ts
✔  _+ \public\locales\pages\index.ts
✔  ++ \public\locales\metadatas\cv.metadata.ts
✔  _+ \public\locales\metadatas\index.ts
✔  _+ \public\locales\metadatas\index.ts
Done in 13.43s.

---

✏️ Component

This script will generate all content for a new component

yarn generate // choose ✏️ Component
> Component name ? // Enter the name of the component
> Component required a dedicated translation ?  // Your component will have his own translation and not import by another component or page
> Component required a dedicated behavior ? // Your component need a dedicated behavior like a hook to split it between render and features
> Is a client Component ? // Your component will be generated in the client interface

Example

λ yarn generate
yarn run v1.22.19
$ plop
? [PLOP] Please choose a generator. ✏️  Component - Create a reusable component
? Component name ?  Footer
? Component required a dedicated translation ?  Yes
? Component required a dedicated behavior ?  Yes
? Is a client Component ?  Yes
✔  ++ \src\components\footer\index.tsx
✔  ++ \src\components\footer\__tests__\index.test.tsx
✔  ++ \src\components\footer\behavior.tsx
✔  ++ \src\components\footer\__tests__\behavior.test.tsx
✔  ++ \public\locales\components\footer.component.ts
✔  _+ \public\locales\components\index.ts
✔  _+ \public\locales\components\index.ts
Done in 15.58s.

---

🎨 UI

This script will generate all content for a new UI element like button design or link ...

yarn generate // choose 🎨 UI
> UI element name ? // Enter the name of the ui element

Example

λ yarn generate
yarn run v1.22.19
$ plop
? [PLOP] Please choose a generator. 🎨  UI - Create a reusable UI element
? UI element name ?  link
✔  ++ \src\ui\link\index.tsx
✔  ++ \src\ui\link\design.tsx
Done in 7.54s.

🚢 DEPLOY TO NETLIFY

Clone this repository on own GitHub account and deploy to Netlify:

🧭 ROADMAP

• 🗹 Setup project
• ☐ Use plop-generator
• ☐ Write specific documentations

🔗 REFERENCES & LINKS

• Icons
• TsConfig
• Sitemap
• Tests
  • next13
  • mock
• Netlify
  • middleware
  • cache
• README
  • badges
  • generator
    • readme.so
    • genreadme.cloud