Skip to content

Commit e17018d

Browse files
DanielVilledaDanielVilleda
committed
Commit
1 parent f95d775 commit e17018d

File tree

1 file changed

+142
-123
lines changed

1 file changed

+142
-123
lines changed

‎README.md‎

Lines changed: 142 additions & 123 deletions
Original file line numberDiff line numberDiff line change
@@ -1,163 +1,182 @@
1-
# NextJs page router starter pack
1+
# 🚀 Sabat Next.js TypeScript Redux Jest Cypress Starter
22

3-
### ✨ Typescript 🌟 Redux-toolkit 🪄 Eslint 🪄 Prettier 🔥 SWR ✔️ Cypress ✔️ React Testing library 🚀 Zod 💰 DaisyUi 🎁 Docker 👀 Husky 💀 Mongoose
3+
![GitHub Release](https://img.shields.io/badge/Release-v1.0.0-blue?style=flat-square&logo=github)
44

5+
Welcome to the **Sabat Next.js TypeScript Redux Jest Cypress Starter**! This repository provides a well-structured, production-ready boilerplate for building web applications using Next.js, TypeScript, Redux, Jest, Cypress, and more. Whether you're starting a new project or looking to enhance your existing applications, this starter kit has you covered.
56

6-
## Table of Contents
7+
## 📦 Features
78

8-
- [Getting Started](#getting-started)
9-
- [Installation](#installation)
10-
- [Run](#run)
11-
- [Database](#database)
12-
- [Tools](#tools)
13-
- [Scripts](#scripts)
9+
- **Next.js**: A powerful React framework for building server-rendered applications.
10+
- **TypeScript**: Adds type safety to your JavaScript code, improving maintainability and reducing bugs.
11+
- **Redux**: State management for your React applications, allowing for predictable state updates.
12+
- **Jest**: A testing framework for JavaScript, perfect for unit and integration tests.
13+
- **Cypress**: End-to-end testing tool that makes testing your web applications easy and reliable.
14+
- **Mongoose**: An ODM (Object Data Modeling) library for MongoDB and Node.js.
15+
- **ESLint**: A static code analysis tool to identify problematic patterns in JavaScript code.
16+
- **Prettier**: A code formatter that enforces a consistent style across your codebase.
17+
- **Tailwind CSS**: A utility-first CSS framework for rapid UI development.
18+
- **Bundle Analyzer**: A tool to visualize the size of webpack output files.
19+
- **Storybook**: A tool for developing UI components in isolation.
1420

15-
### Install starter package by npx
21+
## 🌐 Getting Started
1622

17-
```bash
18-
npx nextjs-typescript-redux-starter <project-name>
19-
```
20-
example:
21-
```bash
22-
npx nextjs-typescript-redux-starter my-next-project
23-
```
23+
To get started with this boilerplate, follow these steps:
24+
25+
1. **Clone the Repository**
26+
27+
Use the following command to clone the repository:
28+
29+
```bash
30+
git clone https://github.com/DanielVilleda/sabat-nextjs-typescript-redux-jest-cypress-starter.git
31+
```
32+
33+
2. **Navigate to the Directory**
34+
35+
Change into the project directory:
36+
37+
```bash
38+
cd sabat-nextjs-typescript-redux-jest-cypress-starter
39+
```
40+
41+
3. **Install Dependencies**
42+
43+
Install the required packages using npm or yarn:
44+
45+
```bash
46+
npm install
47+
```
48+
49+
or
50+
51+
```bash
52+
yarn install
53+
```
54+
55+
4. **Run the Development Server**
56+
57+
Start the development server:
58+
59+
```bash
60+
npm run dev
61+
```
2462

63+
or
2564

26-
## Getting Started
65+
```bash
66+
yarn dev
67+
```
68+
69+
Your application will be running at `http://localhost:3000`.
2770

28-
### Docker
29-
Make sure you have installed Docker in your machine. \
30-
With docker you just have to run one command from your terminal to run project. `docker-compose up --build
31-
`
71+
5. **Open in Your Browser**
3272

33-
To persist data to database have to set environment variable in .env file. See .env.example
73+
Visit `http://localhost:3000` to see your application in action.
3474

75+
## 🧪 Running Tests
3576

36-
MongoDB local connection issue:
77+
To run the tests, use the following command:
3778

38-
might cause issue:
3979
```bash
40-
mongodb://127.0.0.1:27017/?directConnection=true&serverSelectionTimeoutMS=2000&appName=mongosh+2.0.1
80+
npm test
4181
```
4282

43-
Replace `127.0.0.1` with `mongo` in URI.
83+
or
4484

45-
correct:
4685
```bash
47-
mongodb://mongo:27017/?directConnection=true&serverSelectionTimeoutMS=2000&appName=mongosh+2.0.1
86+
yarn test
4887
```
4988

89+
This will execute your Jest tests. For end-to-end tests using Cypress, run:
5090

5191
```bash
52-
docker-compose up --build
92+
npm run cypress
5393
```
5494

95+
or
96+
97+
```bash
98+
yarn cypress
99+
```
55100

56-
### Manuel setup
57-
Before you can use Event Manager, you need to install its dependencies. Follow these steps:
101+
## 📦 Building for Production
58102

59-
1. Clone this repository to your local machine.
103+
To create a production build of your application, run:
60104

61105
```bash
62-
git clone <repository-url>
63-
cd event-manager
106+
npm run build
64107
```
65108

66-
### Installation
67-
68-
First, install dependencies and initial setup:
109+
or
69110

70111
```bash
71-
npm i or yarn
112+
yarn build
113+
```
72114

73-
# then for setup pre-commit hook
115+
This command will generate an optimized version of your application in the `.next` directory.
74116

75-
npm run setup:husky
117+
## 📚 Documentation
76118

77-
#or
119+
For detailed documentation on each tool and library included in this boilerplate, please refer to the following links:
78120

79-
yarn setup:husky
80-
```
121+
- [Next.js Documentation](https://nextjs.org/docs)
122+
- [TypeScript Documentation](https://www.typescriptlang.org/docs/)
123+
- [Redux Documentation](https://redux.js.org/introduction/getting-started)
124+
- [Jest Documentation](https://jestjs.io/docs/getting-started)
125+
- [Cypress Documentation](https://docs.cypress.io/guides/overview/why-cypress)
126+
- [Mongoose Documentation](https://mongoosejs.com/docs/)
127+
- [ESLint Documentation](https://eslint.org/docs/user-guide/getting-started)
128+
- [Prettier Documentation](https://prettier.io/docs/en/index.html)
129+
- [Tailwind CSS Documentation](https://tailwindcss.com/docs)
130+
- [Bundle Analyzer Documentation](https://github.com/webpack-contrib/webpack-bundle-analyzer)
131+
- [Storybook Documentation](https://storybook.js.org/docs/react/get-started/introduction)
81132

82-
### Run
133+
## 🏷️ Topics
83134

84-
Then, run the development server:
135+
This repository covers the following topics:
85136

86-
```bash
87-
npm run dev
88-
# or
89-
yarn dev
90-
# or
91-
```
137+
- cypress
138+
- daisyui
139+
- docker
140+
- eslint
141+
- jest
142+
- mongodb
143+
- nextjs
144+
- nextjs-boilerplate
145+
- nextjs-redux-boilerplate
146+
- prettier
147+
- react
148+
- react-testing-library
149+
- redux
150+
- redux-toolkit
151+
- storybook
152+
- tailwindcss
92153

93-
## Database
94-
95-
Create a `.env` file in root directory. An example .env.example file added with key.
96-
97-
Add your mongoDB uri in env file.
98-
99-
#### Project is configured with Eslint config, prettier. If use Vscode editor, code will automatically show error on compile time and will format on save
100-
101-
102-
## Tools
103-
104-
- [SWR](https://swr.vercel.app/) - 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.
105-
- [REDUX-TOOLKIT](https://redux-toolkit.js.org/) - State management
106-
- [Redux-hook-form](https://react-hook-form.com/) - Form control
107-
- [ZOD](https://zod.dev/) - Zod is a TypeScript-first schema declaration and validation library.
108-
- [React Icons](https://react-icons.github.io/react-icons/)
109-
- [Date-fns](https://date-fns.org/) - Date utility
110-
- [DaisyUI](https://daisyui.com/) - Tailwind Css component library for default styling and theming
111-
- [React testing library](https://testing-library.com/) - For unit and integration test
112-
- Typescript
113-
- Mongoose
114-
- Husky - a pre-commit hook to run test and lint before commit
115-
116-
## Script
117-
118-
### Test
119-
To run test
120-
121-
```bash
122-
npm run test
123-
```
124-
125-
To clear jest cache
126-
```bash
127-
npm run test:clear
128-
```
129-
130-
### Prettify
131-
132-
To manully format code
133-
134-
```bash
135-
npm run format
136-
```
137-
138-
To check lint issue
139-
```bash
140-
npm run lint
141-
```
142-
143-
### Other
144-
145-
To find unused files or entrypoints
146-
```bash
147-
npm run find:unused
148-
```
149-
150-
To analyze the bundle size
151-
```bash
152-
npm run analyze
153-
154-
#or
155-
npm run analyze:server
156-
157-
#or
158-
npm run analyze:browser
159-
```
160-
161-
## Show support
162-
163-
Give a ⭐️ if you like this project!
154+
## 📥 Releases
155+
156+
For the latest releases, visit the [Releases section](https://github.com/DanielVilleda/sabat-nextjs-typescript-redux-jest-cypress-starter/releases). Here, you can download the latest version and view release notes.
157+
158+
## 🛠️ Contributing
159+
160+
We welcome contributions to this project! If you have suggestions or improvements, please fork the repository and submit a pull request.
161+
162+
1. Fork the repository.
163+
2. Create your feature branch (`git checkout -b feature/YourFeature`).
164+
3. Commit your changes (`git commit -m 'Add some feature'`).
165+
4. Push to the branch (`git push origin feature/YourFeature`).
166+
5. Open a pull request.
167+
168+
## 📞 Contact
169+
170+
For questions or feedback, please reach out via the issues section of this repository.
171+
172+
## 📄 License
173+
174+
This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.
175+
176+
## 🌟 Acknowledgments
177+
178+
- Thanks to the open-source community for providing the tools and libraries that make web development easier and more efficient.
179+
180+
---
181+
182+
Explore the power of Next.js with TypeScript and Redux using this starter kit. For more information and updates, check the [Releases section](https://github.com/DanielVilleda/sabat-nextjs-typescript-redux-jest-cypress-starter/releases). Happy coding!

0 commit comments

Comments
 (0)