nextjs-typescript-redux-starter

NextJs page router starter pack

✨ Typescript 🌟 Redux-toolkit 🪄 Eslint 🪄 Prettier 🔥 SWR ✔️ Cypress ✔️ React Testing library 🚀 Zod 💰 DaisyUi 🎁 Docker 👀 Husky 💀 Mongoose

Table of Contents

• Getting Started
  • Installation
  • Run
• Database
• Tools
• Scripts

Install starter package by npx

npx nextjs-typescript-redux-starter <project-name>

example:

npx nextjs-typescript-redux-starter my-next-project

Getting Started

Docker

Make sure you have installed Docker in your machine.
With docker you just have to run one command from your terminal to run project. docker-compose up --build

To persist data to database have to set environment variable in .env file. See .env.example

MongoDB local connection issue:

might cause issue:

mongodb://127.0.0.1:27017/?directConnection=true&serverSelectionTimeoutMS=2000&appName=mongosh+2.0.1

Replace 127.0.0.1 with mongo in URI.

correct:

mongodb://mongo:27017/?directConnection=true&serverSelectionTimeoutMS=2000&appName=mongosh+2.0.1

docker-compose up --build

Manuel setup

Before you can use Event Manager, you need to install its dependencies. Follow these steps:

1. Clone this repository to your local machine.

git clone <repository-url>
cd event-manager

Installation

First, install dependencies and initial setup:

npm i or yarn

# then for setup pre-commit hook

npm run setup:husky 

#or 

yarn setup:husky

Run

Then, run the development server:

npm run dev
# or
yarn dev
# or

Database

Create a .env file in root directory. An example .env.example file added with key.

Add your mongoDB uri in env file.

Project is configured with Eslint config, prettier. If use Vscode editor, code will automatically show error on compile time and will format on save

Tools

• SWR - Used for http request. SWR is a strategy to first return the data from cache (stale), then send the fetch request (revalidate), and finally come with the up-to-date data.
• REDUX-TOOLKIT - State management
• Redux-hook-form - Form control
• ZOD - Zod is a TypeScript-first schema declaration and validation library.
• React Icons
• Date-fns - Date utility
• DaisyUI - Tailwind Css component library for default styling and theming
• React testing library - For unit and integration test
• Typescript
• Mongoose
• Husky - a pre-commit hook to run test and lint before commit

Script

Test

To run test

npm run test

To clear jest cache

npm run test:clear

Prettify

To manully format code

npm run format

To check lint issue

npm run lint

Other

To find unused files or entrypoints

npm run find:unused

To analyze the bundle size

npm run analyze

#or
npm run analyze:server

#or
npm run analyze:browser

Show support

Give a ⭐️ if you like this project!