This is a starter template for projects using Next.js 14 with TypeScript and Tailwind CSS. It includes a basic folder structure to help you get started quickly.

NStart Project

This is a starter template for projects using Next.js 14 with TypeScript and Tailwind CSS. It includes a basic folder structure to help you get started quickly.

NStart Project
- Table of Contents
- Dependencies
- Installation
- Available Scripts
- Tailwind CSS Configuration
- RTK Query
- Components
- Contributing
- License
- Folder Structure
- Author

Dependencies

Core Dependencies

Styling

Tailwind CSS
tailwind-merge - Utility to combine Tailwind CSS classes

State Management and Data Fetching

@reduxjs/toolkit
react-redux
reselect - Selector library for Redux

UI Components

@nextui-org/react - React UI library
framer-motion - Animation library for React
react-hot-toast - Notification library for React
react-icons - Icon library for React

Internationalization

@react-aria/i18n - Internationalization utilities

Authentication

next-auth - Authentication library for Next.js

Other Utilities

next-nprogress-bar - Progress bar for Next.js
next-themes - Theme management for Next.js

Development Dependencies

eslint - Linter for JavaScript and TypeScript
eslint-config-next - ESLint configuration for Next.js
postcss - Tool for transforming CSS
typescript - TypeScript language
@types/node - Type definitions for Node.js
@types/react - Type definitions for React
@types/react-dom - Type definitions for React DOM

Installation

Prerequisites

Node.js
Yarn, pnpm or npm (personal preference)

Installation Steps

Clone the repository

Usando https

git clone https://github.com/samuelrms/nstart-project.git

Usando SSH

 git clone git@github.com:samuelrms/nstart-project.git

Usando GitHub CLI

 gh repo clone samuelrms/nstart-project

Navigate to the project directory:
```
cd nstart-project
```
Install the dependencies:
1. If you are using npm as your package manager, you can install it by running the following command in your terminal:
```
 npm i
```
1. If you are using yarn as your package manager, you can install it by running the following command in your terminal:
```
 yarn
```
1. If you are using pnpm as your package manager, you can install it by running the following command in your terminal:
```
pnpm i
```

Use this template

This template is designed to be used with the following commands:

npx degit samuelrms/nstart-project <YOUR_APP_NAME>

This command uses degit to directly clone the nstart-project from the GitHub repository of samuelrms into a new directory named <YOUR_APP_NAME>. degit is a scaffolding tool that lets you create a new project straight from a git repository.

npx create-next-app --example https://github.com/samuelrms/nstart-project <YOUR_APP_NAME>

This command uses create-next-app to bootstrap a new Next.js application using the nstart-project from the GitHub repository of samuelrms as a template. The new application will be created in a new directory named <YOUR_APP_NAME>. create-next-app is an official tool from the Next.js team for quickly starting new projects.

Both commands are run using npx, which is a package runner tool that comes with npm. It allows you to run packages without having to install them globally first. <YOUR_APP_NAME> should be replaced with the name you want for your new project.

Remember to navigate into your new project directory with cd <YOUR*APP*NAME> before starting the development server with***npm run dev*, _yarn dev_ or _pnpm dev**_. Enjoy coding! 😊

Available Scripts

In the project directory, you can run:

Start Project

npm run dev

yarn

yarn dev

pnpm

pnpm dev

Runs the app in development mode. Open http://localhost:3000 to view it in your browser.

Build Project

npm run build

yarn

yarn build

pnpm

pnpm build

Builds the app for production.

Start Production Server

npm run start

yarn

yarn start

pnpm

pnpm start

Starts the production server.

Tailwind CSS Configuration

The tailwind.config.js file contains Tailwind CSS configurations. To customize the styles, edit this file as needed.

RTK Query

RTK Query is a powerful tool for managing asynchronous data in Redux applications. It simplifies data fetching and caching logic, making development more efficient.

API Service Definition

Here's how to define an API service using RTK Query:

apiServiceRedux file of the redux api

import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
import { FETCH_OPTIONS } from "@/enum";
import { QueryArgs } from "@/types";
import { createSelector } from "@reduxjs/toolkit";
import { RootState } from "../store";

// Defining the API service
export const apiServiceRedux = createApi({
  reducerPath: "api",
  baseQuery: fetchBaseQuery({ baseUrl: "/api/" }),
  endpoints: (builder) => ({
    dynamicQuery: builder.query<unknown, QueryArgs>({
      query: ({ path, method = FETCH_OPTIONS.GET, params, body }) => ({
        url: path,
        method,
        params,
        body: body ? JSON.stringify(body) : undefined,
        headers: {
          "Content-Type": "application/json",
        },
      }),
    }),
  }),
});

// Hooks to use API endpoints
export const { useDynamicQueryQuery: useDynamicQuery } = apiServiceRedux;

// Selectors for query results
export const selectDynamicQueryResult = (args: {
  path: string;
  method?: FETCH_OPTIONS;
}) =>
  createSelector(
    (state: RootState) =>
      apiServiceRedux.endpoints.dynamicQuery.select({
        path: args.path,
        method: args.method,
      })(state),
    (queryResult) => queryResult
  );

Examples

Using RTK Query

Here's an example of how to use RTK Query in your project:

import {
  RootState,
  selectDynamicQueryResult,
  useAppSelector,
  useDynamicQuery,
} from "@/lib";

const MyComponent: React.FC = () => {
  // Perform the query
  const { data, error, isLoading } = useDynamicQuery({
    path: "public",
  });

  // Select the query result from the state
  const selectQueryState = selectDynamicQueryResult({
    path: "public",
  });

  const queryState = useAppSelector((state: RootState) =>
    selectQueryState(state)
  );

  return (
    <div>
      {isLoading && <p>Loading...</p>}
      {error && <p>Error: {error.message}</p>}
      {data && <p>Data: {JSON.stringify(data)}</p>}
      <p>Query State: {JSON.stringify(queryState)}</p>
    </div>
  );
};

export default MyComponent;

Components

Stack

The Stack component is a flexible utility component built with React. It allows you to create an HTML element of your choice and pass any number of HTML attributes to it.

Props Stack

The Stack component accepts the following props:

elementType: This is an optional type that can be any valid key of "ReactHTML". If not provided, the default value will be "div".
children: This is the content that will be rendered within the created element.
className: This is an optional string that can be used to add CSS classes to the element.
...props: Any other valid HTML attribute can be passed to the component.

Usage Stack

Here's an example of how to use the Stack component:

<Stack elementType="section" className="my-class">
  <p>This is an example of using the Stack component.</p>
</Stack>

Active Link

The Active Link component is a custom Link component built with Next.js. It is designed to provide an active state for navigation links, making it easier for users to understand their current location within the application.

Props Active Link

The Active Link component accepts the following props:

href: This is a required string that represents the path of the link.
includes: This is an optional boolean that, when true, checks if the current path includes the href value.
children: This is the content that will be rendered within the link.
...props: Any other valid Link attribute can be passed to the component.

Usage Active Link

Here's an example of how to use the Active Link component:

"use client"

<ActiveLink href="/home" includes={true}>
  Home
</ActiveLink>

Text

The Text component is a flexible text rendering component built with React. It allows you to create a text element of your choice and pass any number of HTML attributes to it.

Props Text

The Text component accepts the following props:

elementType: This is an optional type that can be "p", "h1", "h2", "h3", "h4", "h5", "h6", or "span". If not provided, the default value will be "p".
children: This is the content that will be rendered within the created element.
className: This is an optional string that can be used to add CSS classes to the element.
...props: Any other valid HTML attribute can be passed to the component.

Usage Text

Here's an example of how to use the Text component:

<Text elementType="h1" className="my-class">
  This is an example of using the Text component.
</Text>

Breadcrumb

The Breadcrumb component is a custom navigation component built with Next.js and NextUI. It provides a navigational hierarchy of a website's pages to the user.

Props Breadcrumb

The Breadcrumb component accepts the following props:

actions: This is an optional prop that can be used to pass additional actions to the component.
title: This is an optional string that represents the title of the page. If not provided, the page name will be used.
customName: This is an optional string that can be used to provide a custom name for the last item in the breadcrumb list.
overrideNames: Overwrites the names of the routes in the breadcrumb, starting from the number zero, if not overwritten the default name will be kept.
...props: Any other valid attribute can be passed to the component.

Usage Breadcrumb

Here's an example of how to use the Breadcrumb component:

"use client"

<Breadcrumb
  title="Home"
  customName="Custom Name"
  action={
    // Your Actions
  }
  overrideNames={{ 0: "rootRoute" }}
/>

OTP

The OTP component is a custom input component built with Next.js and Tailwind CSS. It allows the entry of a One-Time Password (OTP) through multiple input fields.

Props OTP

The OTP component accepts the following props:

length: Number of characters accepted by the OTP. The default is 6.
onComplete: Callback function called when the OTP is filled.
inputHeight: Defines the height of the input. Refer to Height for possible values and their corresponding sizes. The default is "h-12".
inputWidth: Defines the width of the input. Refer to Width for possible values and their corresponding sizes. The default is "w-12".
spacing: Defines the spacing between the inputs. Refer to Spacing for possible values and their corresponding sizes. The default is "gap-4".
bg: Background color of the input in Tailwind format. The default is "bg-white".
fontColor: Font color of the input in Tailwind format. The default is "text-black".
...inputProps: Any other valid attributes can be passed to the input element.

Usage OTP

Here's an example of how to use the OTP component:

"use client"

<OTP
  length={6}
  onComplete={(otp) => console.log(otp)}
  inputHeight="h-12"
  inputWidth="w-12"
  spacing="gap-4"
  bg="bg-white"
  fontColor="text-black"
/>

Theme

The Theme component is a custom theme switcher built with Next.js and NextUI. It allows users to toggle between light and dark themes.

Props Theme

The Theme component accepts the following props:

hiddenTooltip: Boolean to hide or show the tooltip. The default is false.
lightThemeTextTooltip: String for the tooltip text when the light theme is active. The default is "Tema Claro".
darkThemeTextTooltip: String for the tooltip text when the dark theme is active. The default is "Tema Escuro".
...props: Any other valid attributes can be passed to the Switch component from NextUI.

Usage Theme

Here's an example of how to use the Theme component:

"use client"

<Theme
  hiddenTooltip={false}
  lightThemeTextTooltip="Light Theme"
  darkThemeTextTooltip="Dark Theme"
/>

CustomInput

The CustomInput component is a custom input field built with Next.js and NextUI. It provides a styled input with a bordered variant and primary color.

Props CustomInput

The CustomInput component accepts the following props:

variant: The variant of the select dropdown. The default is "bordered".
color: The color of the select dropdown. The default is "primary".
...props: Any other valid attributes can be passed to the Input component from NextUI.

Usage CustomInput

Here's an example of how to use the CustomInput component:

"use client"

<CustomInput
  placeholder="Enter text"
  type="text"
/>

CustomSelect

The CustomSelect component is a custom select dropdown built with Next.js and NextUI. It provides a styled select dropdown with a bordered variant and primary color.

Props CustomSelect

The CustomSelect component accepts the following props:

variant: The variant of the select dropdown. The default is "bordered".
color: The color of the select dropdown. The default is "primary".
...props: Any other valid attributes can be passed to the Select component from NextUI.

Usage CustomSelect

Here's an example of how to use the CustomSelect component:

"use client"

<CustomSelect
  placeholder="Select an option"
  options={[
    { label: "Option 1", value: "1" },
    { label: "Option 2", value: "2" },
  ]}
/>

Contributing

Feel free to contribute to this project. To get started, you can open an issue or submit a pull request.

License

This project is licensed under the MIT License. See the LICENSE file for details.

Folder Structure

.
╠══ tsconfig.json
╠══ .gitignore
╠══ public/
║    ╠══ vercel.svg
║    ╚══ next.svg
╠══ .env
╠══ package.json
╠══ LICENSE
╠══ README.md
╠══ src/
║    ╠══ screens/
║    ║    ╠══ index.ts
║    ║    ╚══ Home
║    ║    ║    ╚══ index.tsx
║    ╠══ service/
║    ║    ╠══ customFetch/
║    ║    ║    ╠══ API.ts
║    ║    ║    ╠══ fetch.types.ts
║    ║    ║    ╠══ SERVER.ts
║    ║    ║    ╚══ index.ts
║    ║    ╚══ index.ts
║    ╠══ enum/
║    ║    ╠══ method.fetch.ts
║    ║    ╚══ index.ts
║    ╠══ schema/
║    ║    ╚══ index.ts
║    ╠══ mocks/
║    ║    ╚══ index.ts
║    ╠══ app/
║    ║    ╠══ api/
║    ║    ║    ╠══ secure/
║    ║    ║    ║    ╚══ route.ts
║    ║    ║    ╠══ auth/
║    ║    ║    ║    ╚══ [...nextauth]
║    ║    ║    ║    ║    ╚══ route.ts
║    ║    ║    ╚══ public
║    ║    ║    ║    ╚══ route.ts
║    ║    ╠══ favicon.ico
║    ║    ╠══ page.tsx
║    ║    ╚══ layout.tsx
║    ╠══ types/
║    ║    ╠══ index.ts
║    ║    ╚══ QueryArgs.ts
║    ╠══ hooks/
║    ║    ╠══ useNavigationList/
║    ║    ║    ╠══ useNavigationList.types.ts
║    ║    ║    ╚══ index.tsx
║    ║    ╚══ index.ts
║    ╠══ components/
║    ║    ╠══ Stack/
║    ║    ║    ╚══ index.tsx
║    ║    ╠══ ActiveLink/
║    ║    ║    ╚══ index.tsx
║    ║    ╠══ index.ts
║    ║    ╠══ Text/
║    ║    ║    ╚══ index.ts
║    ║    ╠══ OTP/
║    ║    ║    ╠══ OTP.types.ts
║    ║    ║    ╠══ enum/
║    ║    ║    ║    ╠══ index.ts
║    ║    ║    ║    ╠══ height.ts
║    ║    ║    ║    ╠══ width.ts
║    ║    ║    ║    ╚══ spacing.ts
║    ║    ║    ╚══ index.tsx
║    ║    ╠══ Breadcrumb/
║    ║    ║    ╠══ Breadcrumb.types.ts
║    ║    ║    ╚══ index.tsx
║    ║    ╠══ CustomInput/
║    ║    ║    ╚══ index.tsx
║    ║    ╠══ CustomSelect/
║    ║    ║    ╚══ index.tsx
║    ║    ╚══ Theme
║    ║    ║    ╠══ Theme.types.ts
║    ║    ║    ╚══ index.tsx
║    ╠══ errors/
║    ║    ╚══ index.ts
║    ╠══ providers/
║    ║    ╠══ theme.provider.tsx
║    ║    ╠══ nextUI.provider.tsx
║    ║    ╠══ redux.provider.tsx
║    ║    ╠══ nextAuth.privider.tsx
║    ║    ╚══ index.tsx
║    ╠══ utils/
║    ║    ╠══ index.ts
║    ║    ╚══ capitalizeWords.ts
║    ╠══ lib/
║    ║    ╠══ redux/
║    ║    ║    ╠══ api/
║    ║    ║    ║    ╚══ index.ts
║    ║    ║    ╠══ reducer/
║    ║    ║    ║    ╚══ index.ts
║    ║    ║    ╠══ index.ts
║    ║    ║    ╠══ slice/
║    ║    ║    ║    ╠══ index.ts
║    ║    ║    ║    ╚══ user
║    ║    ║    ║    ║    ╠══ user.types.ts
║    ║    ║    ║    ║    ╚══ index.ts
║    ║    ║    ╠══ store/
║    ║    ║    ║    ╚══ index.ts
║    ║    ║    ╠══ middleware/
║    ║    ║    ║    ╚══ index.ts
║    ║    ║    ╠══ hooks/
║    ║    ║    ║    ╚══ index.ts
║    ║    ║    ╚══ config
║    ║    ║    ║    ╚══ index.ts
║    ║    ╠══ index.ts
║    ║    ╚══ nextAuth
║    ║    ║    ╠══ index.ts
║    ║    ║    ╠══ auth/
║    ║    ║    ║    ╚══ index.ts
║    ║    ║    ╚══ options
║    ║    ║    ║    ╚══ index.ts
║    ╠══ constants/
║    ║    ╚══ index.ts
║    ╠══ styles/
║    ║    ╚══ tw.css
║    ╚══ functions
║    ║    ╠══ createQueryStrings.ts
║    ║    ╚══ index.ts
╠══ pnpm-lock.yaml
╠══ postcss.config.mjs
╠══ .eslintrc.json
╠══ .npmrc
╠══ next.config.mjs
╚══ tailwind.config.ts

Enjoying the project? Show your support by giving it a star! ✨

nstart project

TypeScript