create-ern-boilerplate 0.0.11 โ 0.0.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +134 -19
- package/package.json +1 -1
- package/templates/default/README.md +209 -106
- package/templates/default/app/(protected)/home.tsx +2 -103
- package/templates/default/server/db.json +0 -197
package/README.md
CHANGED
|
@@ -2,55 +2,170 @@
|
|
|
2
2
|
|
|
3
3
|
CLI untuk membuat proyek **React Native Expo** dengan cepat menggunakan berbagai template yang sudah disiapkan.
|
|
4
4
|
|
|
5
|
+
Dengan alat ini, kamu bisa membuat project baru hanya dalam hitungan detik โ baik secara interaktif maupun langsung (tanpa prompt).
|
|
6
|
+
|
|
5
7
|
---
|
|
6
8
|
|
|
7
9
|
## ๐ฆ Instalasi
|
|
8
10
|
|
|
9
|
-
Kamu tidak perlu
|
|
11
|
+
Kamu **tidak perlu menginstal package ini secara global**.
|
|
10
12
|
Cukup jalankan menggunakan **npx**:
|
|
11
13
|
|
|
12
14
|
```bash
|
|
13
15
|
npx create-ern-boilerplate
|
|
16
|
+
```
|
|
14
17
|
|
|
18
|
+
---
|
|
15
19
|
|
|
20
|
+
## ๐ง Contoh Penggunaan
|
|
16
21
|
|
|
17
|
-
|
|
18
|
-
๐ข 1. Mode Interaktif (Default)
|
|
19
|
-
npx create-ern-boilerplate
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
Kamu akan ditanya:
|
|
22
|
+
### ๐ข 1. Mode Interaktif (Default)
|
|
23
23
|
|
|
24
|
-
|
|
24
|
+
Jalankan tanpa argumen tambahan:
|
|
25
25
|
|
|
26
|
-
|
|
26
|
+
```bash
|
|
27
|
+
npx create-ern-boilerplate
|
|
28
|
+
```
|
|
27
29
|
|
|
28
|
-
|
|
30
|
+
Kamu akan ditanya:
|
|
29
31
|
|
|
30
|
-
|
|
32
|
+
- Nama project
|
|
33
|
+
- Deskripsi
|
|
34
|
+
- Template yang ingin digunakan
|
|
35
|
+
- Apakah ingin langsung install dependencies
|
|
31
36
|
|
|
32
|
-
Contoh
|
|
37
|
+
**Contoh:**
|
|
33
38
|
|
|
39
|
+
```
|
|
34
40
|
? Nama project kamu: my-expo-app
|
|
35
41
|
? Deskripsi singkat: Aplikasi keren dengan Expo
|
|
36
42
|
? Pilih template: redux
|
|
37
43
|
? Langsung install dependencies setelah membuat project? Yes
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
---
|
|
38
47
|
|
|
39
|
-
๐ก 2. Mode Cepat (Tanpa Prompt)
|
|
48
|
+
### ๐ก 2. Mode Cepat (Tanpa Prompt)
|
|
40
49
|
|
|
41
50
|
Langsung buat project baru tanpa pertanyaan:
|
|
42
51
|
|
|
52
|
+
```bash
|
|
43
53
|
npx create-ern-boilerplate my-app -y
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
โ
Otomatis pakai **template default (`minimal`)**
|
|
57
|
+
โ
Langsung install dependencies
|
|
58
|
+
|
|
59
|
+
---
|
|
60
|
+
|
|
61
|
+
### ๐ต 3. Mode Cepat + Custom Deskripsi + Template
|
|
62
|
+
|
|
63
|
+
Kamu bisa langsung menentukan deskripsi dan template yang digunakan:
|
|
64
|
+
|
|
65
|
+
```bash
|
|
66
|
+
npx create-ern-boilerplate my-app -y --desc "Boilerplate lengkap" --template redux
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
๐ Akan langsung generate project **my-app**
|
|
70
|
+
๐ Isi deskripsi otomatis
|
|
71
|
+
๐งฉ Menggunakan template **redux**
|
|
72
|
+
โ๏ธ Auto install dependencies
|
|
73
|
+
|
|
74
|
+
---
|
|
75
|
+
|
|
76
|
+
## โ๏ธ Argumen & Opsi CLI
|
|
77
|
+
|
|
78
|
+
| Opsi | Alias | Deskripsi | Contoh |
|
|
79
|
+
|------|--------|------------|--------|
|
|
80
|
+
| `-y` / `--yes` | | Jalankan mode cepat tanpa prompt | `npx create-ern-boilerplate my-app -y` |
|
|
81
|
+
| `--desc` | | Tambahkan deskripsi project | `--desc "Aplikasi keren"` |
|
|
82
|
+
| `--template` | | Pilih template tertentu | `--template redux` |
|
|
83
|
+
| `--install` | | Auto install dependencies di mode cepat | `-y --install` |
|
|
84
|
+
|
|
85
|
+
---
|
|
44
86
|
|
|
87
|
+
## ๐งฉ Struktur Template
|
|
45
88
|
|
|
46
|
-
|
|
47
|
-
๐น Langsung install dependencies
|
|
89
|
+
Semua template disimpan di folder:
|
|
48
90
|
|
|
49
|
-
|
|
91
|
+
```
|
|
92
|
+
/templates
|
|
93
|
+
โโโ minimal
|
|
94
|
+
โโโ redux
|
|
95
|
+
โโโ default
|
|
96
|
+
โโโ ...
|
|
97
|
+
```
|
|
50
98
|
|
|
51
|
-
Kamu
|
|
99
|
+
Kamu dapat menambahkan template baru cukup dengan menambahkan folder baru di dalam direktori `templates`.
|
|
52
100
|
|
|
53
|
-
|
|
101
|
+
---
|
|
102
|
+
|
|
103
|
+
## ๐ ๏ธ Cara Kerja
|
|
104
|
+
|
|
105
|
+
1. CLI membaca argumen dari perintah yang kamu jalankan.
|
|
106
|
+
2. Jika mode interaktif: akan menampilkan prompt dengan `inquirer`.
|
|
107
|
+
3. Template yang dipilih akan disalin ke folder project baru.
|
|
108
|
+
4. `package.json` dan `app.json` akan di-update otomatis:
|
|
109
|
+
- Nama project
|
|
110
|
+
- Deskripsi
|
|
111
|
+
- Bundle identifier (iOS / Android)
|
|
112
|
+
5. Jika dipilih, dependencies akan langsung diinstall.
|
|
113
|
+
|
|
114
|
+
---
|
|
115
|
+
|
|
116
|
+
## ๐งพ Contoh Hasil
|
|
117
|
+
|
|
118
|
+
Setelah menjalankan perintah:
|
|
119
|
+
|
|
120
|
+
```bash
|
|
121
|
+
npx create-ern-boilerplate my-expo-app -y --desc "Boilerplate lengkap" --template redux
|
|
122
|
+
```
|
|
123
|
+
|
|
124
|
+
CLI akan menghasilkan struktur seperti:
|
|
125
|
+
|
|
126
|
+
```
|
|
127
|
+
my-expo-app/
|
|
128
|
+
โโโ app.json
|
|
129
|
+
โโโ package.json
|
|
130
|
+
โโโ App.js
|
|
131
|
+
โโโ src/
|
|
132
|
+
โ โโโ components/
|
|
133
|
+
โ โโโ screens/
|
|
134
|
+
โ โโโ redux/
|
|
135
|
+
โ โโโ ...
|
|
136
|
+
โโโ ...
|
|
137
|
+
```
|
|
138
|
+
|
|
139
|
+
Dan kamu bisa langsung menjalankan:
|
|
140
|
+
|
|
141
|
+
```bash
|
|
142
|
+
cd my-expo-app
|
|
143
|
+
npm run start
|
|
144
|
+
```
|
|
145
|
+
|
|
146
|
+
---
|
|
147
|
+
|
|
148
|
+
|
|
149
|
+
---
|
|
150
|
+
|
|
151
|
+
## ๐ก Tips
|
|
152
|
+
|
|
153
|
+
- Jalankan `--template` dengan nama folder template yang tersedia.
|
|
154
|
+
- Tambahkan flag `--install` untuk auto install di mode cepat.
|
|
155
|
+
- Kamu bisa menambahkan template buatan sendiri di folder `templates`.
|
|
156
|
+
|
|
157
|
+
---
|
|
158
|
+
|
|
159
|
+
---
|
|
160
|
+
|
|
161
|
+
## ๐ชช Lisensi
|
|
162
|
+
|
|
163
|
+
Lisensi: [MIT](./LICENSE)
|
|
164
|
+
|
|
165
|
+
---
|
|
54
166
|
|
|
167
|
+
## ๐ฌ Penulis
|
|
55
168
|
|
|
56
|
-
|
|
169
|
+
Dibuat dengan โค๏ธ oleh **[Zedfar]**
|
|
170
|
+
๐ง Kontak: ulfar.far@gmail.com
|
|
171
|
+
๐ GitHub: [@zedfar](https://github.com/zedfar)
|
package/package.json
CHANGED
|
@@ -1,171 +1,274 @@
|
|
|
1
|
-
#
|
|
1
|
+
# Expo React Native Boilerplate
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
A comprehensive boilerplate for building React Native applications with Expo, featuring authentication, theming, and a clean architecture.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
## Features
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
- โ
**Expo Router** - File-based routing
|
|
8
|
+
- โ
**TypeScript** - Type-safe development
|
|
9
|
+
- โ
**NativeWind (Tailwind CSS)** - Utility-first styling
|
|
10
|
+
- โ
**Authentication Context** - Global auth state management
|
|
11
|
+
- โ
**Theme Support** - Light/Dark mode with system preference
|
|
12
|
+
- โ
**Mock API Server** - JSON Server for development
|
|
13
|
+
- โ
**Secure Storage** - Expo SecureStore for sensitive data
|
|
14
|
+
- โ
**Path Aliases** - Clean imports with `@` prefix
|
|
15
|
+
- โ
**Form Validation** - Built-in validation utilities
|
|
16
|
+
- โ
**Reusable Components** - Button, Input, Card, Loading, etc.
|
|
8
17
|
|
|
9
|
-
##
|
|
18
|
+
## Project Structure
|
|
10
19
|
|
|
11
|
-
|
|
12
|
-
|
|
20
|
+
```
|
|
21
|
+
.
|
|
22
|
+
โโโ app
|
|
23
|
+
โ โโโ (admin) # Halaman & route khusus admin
|
|
24
|
+
โ โโโ (auth) # Halaman auth (login, register, dsb)
|
|
25
|
+
โ โโโ (protected) # Halaman yang membutuhkan autentikasi
|
|
26
|
+
โ โโโ _layout.tsx # Root layout untuk Expo Router
|
|
27
|
+
โ
|
|
28
|
+
โโโ server
|
|
29
|
+
โ โโโ db.json # Mock data untuk JSON Server
|
|
30
|
+
โ
|
|
31
|
+
โโโ src
|
|
32
|
+
โ โโโ assets # Gambar, font, dan aset statis
|
|
33
|
+
โ โโโ components # Komponen UI reusable
|
|
34
|
+
โ โโโ contexts # Context API (Auth, Theme, dsb)
|
|
35
|
+
โ โโโ hooks # Custom React hooks
|
|
36
|
+
โ โโโ services # API service (Axios, interceptors, dll)
|
|
37
|
+
โ โโโ theme # Konfigurasi tema (warna, dark mode)
|
|
38
|
+
โ โโโ types # TypeScript type definitions
|
|
39
|
+
โ โโโ utils # Helper functions & constants
|
|
40
|
+
โ
|
|
41
|
+
โโโ app.json # Konfigurasi Expo project
|
|
42
|
+
โโโ babel.config.js # Konfigurasi Babel
|
|
43
|
+
โโโ expo-env.d.ts # Type definitions untuk Expo environment
|
|
44
|
+
โโโ global.css # Global style untuk Tailwind / NativeWind
|
|
45
|
+
โโโ index.ts # Entry point utama aplikasi
|
|
46
|
+
โโโ LICENSE # Lisensi project
|
|
47
|
+
โโโ metro.config.js # Konfigurasi Metro bundler
|
|
48
|
+
โโโ nativewind-env.d.ts # Type support untuk NativeWind
|
|
49
|
+
โโโ package.json # Dependency & script project
|
|
50
|
+
โโโ package-lock.json # Lock file npm
|
|
51
|
+
โโโ README.md # Dokumentasi project
|
|
52
|
+
โโโ structure.txt # Struktur folder (auto-generated)
|
|
53
|
+
โโโ tailwind.config.js # Konfigurasi TailwindCSS
|
|
54
|
+
โโโ tsconfig.json # Konfigurasi TypeScript
|
|
13
55
|
|
|
14
|
-
```bash
|
|
15
|
-
npx create-ern-boilerplate
|
|
16
56
|
```
|
|
17
57
|
|
|
18
|
-
|
|
58
|
+
## Getting Started
|
|
19
59
|
|
|
20
|
-
|
|
60
|
+
### Prerequisites
|
|
21
61
|
|
|
22
|
-
|
|
62
|
+
- Node.js 18+
|
|
63
|
+
- npm or yarn
|
|
64
|
+
- Expo CLI
|
|
23
65
|
|
|
24
|
-
|
|
66
|
+
### Installation
|
|
25
67
|
|
|
68
|
+
1. Clone the repository:
|
|
26
69
|
```bash
|
|
27
|
-
|
|
70
|
+
git clone <your-repo-url>
|
|
71
|
+
cd <your-repo-folder>
|
|
28
72
|
```
|
|
29
73
|
|
|
30
|
-
|
|
74
|
+
2. Install dependencies:
|
|
75
|
+
```bash
|
|
76
|
+
npm install
|
|
77
|
+
```
|
|
31
78
|
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
79
|
+
3. Start the development server:
|
|
80
|
+
```bash
|
|
81
|
+
npm run start
|
|
82
|
+
```
|
|
36
83
|
|
|
37
|
-
|
|
84
|
+
This will start both the Expo development server and the mock API server.
|
|
38
85
|
|
|
39
|
-
|
|
40
|
-
? Nama project kamu: my-expo-app
|
|
41
|
-
? Deskripsi singkat: Aplikasi keren dengan Expo
|
|
42
|
-
? Pilih template: redux
|
|
43
|
-
? Langsung install dependencies setelah membuat project? Yes
|
|
44
|
-
```
|
|
86
|
+
### Available Scripts
|
|
45
87
|
|
|
46
|
-
|
|
88
|
+
- `npm start` - Start Expo development server
|
|
89
|
+
- `npm run android` - Run on Android
|
|
90
|
+
- `npm run ios` - Run on iOS
|
|
91
|
+
- `npm run web` - Run on web
|
|
92
|
+
- `npm run lint` - Run ESLint
|
|
93
|
+
- `npm run type-check` - Run TypeScript type checking
|
|
47
94
|
|
|
48
|
-
|
|
95
|
+
## Configuration
|
|
49
96
|
|
|
50
|
-
|
|
97
|
+
### API Configuration
|
|
51
98
|
|
|
52
|
-
|
|
53
|
-
|
|
99
|
+
Edit `src/utils/constants.ts` to configure your API endpoints:
|
|
100
|
+
|
|
101
|
+
```typescript
|
|
102
|
+
export const API_CONFIG = {
|
|
103
|
+
BASE_URL: __DEV__ ? 'http://localhost:3001' : 'https://api.yourapp.com',
|
|
104
|
+
TIMEOUT: 10000,
|
|
105
|
+
};
|
|
106
|
+
```
|
|
107
|
+
|
|
108
|
+
### Theme Configuration
|
|
109
|
+
|
|
110
|
+
Customize colors in `src/theme/colors.ts`:
|
|
111
|
+
|
|
112
|
+
```typescript
|
|
113
|
+
export const colors = {
|
|
114
|
+
light: {
|
|
115
|
+
primary: '#3b82f6',
|
|
116
|
+
// ... other colors
|
|
117
|
+
},
|
|
118
|
+
dark: {
|
|
119
|
+
primary: '#3b82f6',
|
|
120
|
+
// ... other colors
|
|
121
|
+
},
|
|
122
|
+
};
|
|
54
123
|
```
|
|
55
124
|
|
|
56
|
-
|
|
57
|
-
โ
Langsung install dependencies
|
|
125
|
+
## Authentication
|
|
58
126
|
|
|
59
|
-
|
|
127
|
+
The boilerplate includes a complete authentication flow:
|
|
60
128
|
|
|
61
|
-
###
|
|
129
|
+
### Default Credentials
|
|
62
130
|
|
|
63
|
-
|
|
131
|
+
- **Admin**: developer@localhost.com / @developer
|
|
132
|
+
- **User**: user@localhost.com / @developer
|
|
64
133
|
|
|
65
|
-
|
|
66
|
-
|
|
134
|
+
### Using Authentication
|
|
135
|
+
|
|
136
|
+
```typescript
|
|
137
|
+
import { useAuth } from '@hooks/useAuth';
|
|
138
|
+
|
|
139
|
+
function MyComponent() {
|
|
140
|
+
const { user, login, logout, isAuthenticated } = useAuth();
|
|
141
|
+
|
|
142
|
+
// Use authentication methods
|
|
143
|
+
}
|
|
67
144
|
```
|
|
68
145
|
|
|
69
|
-
|
|
70
|
-
๐ Isi deskripsi otomatis
|
|
71
|
-
๐งฉ Menggunakan template **redux**
|
|
72
|
-
โ๏ธ Auto install dependencies
|
|
146
|
+
## Theming
|
|
73
147
|
|
|
74
|
-
|
|
148
|
+
Switch between light and dark themes:
|
|
75
149
|
|
|
76
|
-
|
|
150
|
+
```typescript
|
|
151
|
+
import { useTheme } from '@hooks/useTheme';
|
|
77
152
|
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
153
|
+
function MyComponent() {
|
|
154
|
+
const { theme, colors, setThemeMode } = useTheme();
|
|
155
|
+
|
|
156
|
+
// theme: 'light' | 'dark'
|
|
157
|
+
// colors: current theme colors
|
|
158
|
+
// setThemeMode: 'light' | 'dark' | 'auto'
|
|
159
|
+
}
|
|
160
|
+
```
|
|
84
161
|
|
|
85
|
-
|
|
162
|
+
## API Services
|
|
86
163
|
|
|
87
|
-
|
|
164
|
+
### Making API Calls
|
|
88
165
|
|
|
89
|
-
|
|
166
|
+
```typescript
|
|
167
|
+
import { newsService } from '@services/newsService';
|
|
90
168
|
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
169
|
+
// Get all news
|
|
170
|
+
const news = await newsService.getNews({ limit: 10 });
|
|
171
|
+
|
|
172
|
+
// Get single news item
|
|
173
|
+
const newsItem = await newsService.getNewsById('1');
|
|
174
|
+
|
|
175
|
+
// Create news
|
|
176
|
+
const newNews = await newsService.createNews({
|
|
177
|
+
title: 'New Article',
|
|
178
|
+
content: 'Content here',
|
|
179
|
+
// ...
|
|
180
|
+
});
|
|
97
181
|
```
|
|
98
182
|
|
|
99
|
-
|
|
183
|
+
## Custom Hooks
|
|
100
184
|
|
|
101
|
-
|
|
185
|
+
### useAuth
|
|
102
186
|
|
|
103
|
-
|
|
187
|
+
Access authentication state and methods.
|
|
104
188
|
|
|
105
|
-
|
|
106
|
-
2. Jika mode interaktif: akan menampilkan prompt dengan `inquirer`.
|
|
107
|
-
3. Template yang dipilih akan disalin ke folder project baru.
|
|
108
|
-
4. `package.json` dan `app.json` akan di-update otomatis:
|
|
109
|
-
- Nama project
|
|
110
|
-
- Deskripsi
|
|
111
|
-
- Bundle identifier (iOS / Android)
|
|
112
|
-
5. Jika dipilih, dependencies akan langsung diinstall.
|
|
189
|
+
### useTheme
|
|
113
190
|
|
|
114
|
-
|
|
191
|
+
Access theme configuration and toggle themes.
|
|
115
192
|
|
|
116
|
-
##
|
|
193
|
+
## Components
|
|
117
194
|
|
|
118
|
-
|
|
195
|
+
### Button
|
|
119
196
|
|
|
120
|
-
```
|
|
121
|
-
|
|
197
|
+
```typescript
|
|
198
|
+
<Button
|
|
199
|
+
title="Click Me"
|
|
200
|
+
variant="primary"
|
|
201
|
+
size="md"
|
|
202
|
+
onPress={() => {}}
|
|
203
|
+
loading={false}
|
|
204
|
+
fullWidth
|
|
205
|
+
/>
|
|
122
206
|
```
|
|
123
207
|
|
|
124
|
-
|
|
125
|
-
|
|
208
|
+
### Input
|
|
209
|
+
|
|
210
|
+
```typescript
|
|
211
|
+
<Input
|
|
212
|
+
label="Email"
|
|
213
|
+
placeholder="Enter email"
|
|
214
|
+
value={email}
|
|
215
|
+
onChangeText={setEmail}
|
|
216
|
+
error={emailError}
|
|
217
|
+
secureTextEntry
|
|
218
|
+
/>
|
|
126
219
|
```
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
โ โโโ redux/
|
|
135
|
-
โ โโโ ...
|
|
136
|
-
โโโ ...
|
|
220
|
+
|
|
221
|
+
### Card
|
|
222
|
+
|
|
223
|
+
```typescript
|
|
224
|
+
<Card className="mb-4">
|
|
225
|
+
<Text>Card content</Text>
|
|
226
|
+
</Card>
|
|
137
227
|
```
|
|
138
228
|
|
|
139
|
-
|
|
229
|
+
### Loading
|
|
140
230
|
|
|
141
|
-
```
|
|
142
|
-
|
|
143
|
-
npm run start
|
|
231
|
+
```typescript
|
|
232
|
+
<Loading text="Loading..." fullScreen />
|
|
144
233
|
```
|
|
145
234
|
|
|
146
|
-
|
|
235
|
+
## Path Aliases
|
|
147
236
|
|
|
237
|
+
Use clean imports with configured path aliases:
|
|
148
238
|
|
|
149
|
-
|
|
239
|
+
```typescript
|
|
240
|
+
import { Button } from '@components/common/Button';
|
|
241
|
+
import { useAuth } from '@hooks/useAuth';
|
|
242
|
+
import { newsService } from '@services/newsService';
|
|
243
|
+
```
|
|
150
244
|
|
|
151
|
-
##
|
|
245
|
+
## Deployment
|
|
152
246
|
|
|
153
|
-
|
|
154
|
-
- Tambahkan flag `--install` untuk auto install di mode cepat.
|
|
155
|
-
- Kamu bisa menambahkan template buatan sendiri di folder `templates`.
|
|
247
|
+
### Building for Production
|
|
156
248
|
|
|
157
|
-
|
|
249
|
+
```bash
|
|
250
|
+
# For Android
|
|
251
|
+
eas build --platform android
|
|
252
|
+
|
|
253
|
+
# For iOS
|
|
254
|
+
eas build --platform ios
|
|
255
|
+
|
|
256
|
+
# For both
|
|
257
|
+
eas build --platform all
|
|
258
|
+
```
|
|
158
259
|
|
|
159
|
-
|
|
260
|
+
## Contributing
|
|
160
261
|
|
|
161
|
-
|
|
262
|
+
1. Fork the repository
|
|
263
|
+
2. Create your feature branch (`git checkout -b feature/amazing-feature`)
|
|
264
|
+
3. Commit your changes (`git commit -m 'Add some amazing feature'`)
|
|
265
|
+
4. Push to the branch (`git push origin feature/amazing-feature`)
|
|
266
|
+
5. Open a Pull Request
|
|
162
267
|
|
|
163
|
-
|
|
268
|
+
## License
|
|
164
269
|
|
|
165
|
-
|
|
270
|
+
MIT License - feel free to use this boilerplate for your projects!
|
|
166
271
|
|
|
167
|
-
##
|
|
272
|
+
## Support
|
|
168
273
|
|
|
169
|
-
|
|
170
|
-
๐ง Kontak: ulfar.far@gmail.com
|
|
171
|
-
๐ GitHub: [@zedfar](https://github.com/zedfar)
|
|
274
|
+
For issues and questions, please open an issue on GitHub.
|
|
@@ -40,10 +40,7 @@ interface News {
|
|
|
40
40
|
// Sample categories
|
|
41
41
|
const categories = [
|
|
42
42
|
{ id: 'all', name: 'All' },
|
|
43
|
-
{ id: '1', name: 'Technology' }
|
|
44
|
-
{ id: '2', name: 'Sports' },
|
|
45
|
-
{ id: '3', name: 'Business' },
|
|
46
|
-
{ id: '4', name: 'Entertainment' },
|
|
43
|
+
{ id: '1', name: 'Technology' }
|
|
47
44
|
];
|
|
48
45
|
|
|
49
46
|
export default function HomeScreen() {
|
|
@@ -73,105 +70,7 @@ export default function HomeScreen() {
|
|
|
73
70
|
updatedAt: "2024-10-22T13:00:00.000Z",
|
|
74
71
|
views: 1245,
|
|
75
72
|
likes: 89
|
|
76
|
-
}
|
|
77
|
-
{
|
|
78
|
-
id: "2",
|
|
79
|
-
title: "Sports Championship Finals This Weekend",
|
|
80
|
-
content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
|
|
81
|
-
excerpt: "Championship finals set for this weekend",
|
|
82
|
-
image: "https://picsum.photos/400/300?random=2",
|
|
83
|
-
categoryId: "2",
|
|
84
|
-
authorId: "1",
|
|
85
|
-
publishedAt: "2024-10-21T14:00:00.000Z",
|
|
86
|
-
createdAt: "2024-10-21T13:00:00.000Z",
|
|
87
|
-
updatedAt: "2024-10-21T13:00:00.000Z",
|
|
88
|
-
views: 987,
|
|
89
|
-
likes: 45
|
|
90
|
-
},
|
|
91
|
-
{
|
|
92
|
-
id: "3",
|
|
93
|
-
title: "Global Markets Show Strong Recovery",
|
|
94
|
-
content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
|
|
95
|
-
excerpt: "Economic indicators point to sustained growth",
|
|
96
|
-
image: "https://picsum.photos/400/300?random=3",
|
|
97
|
-
categoryId: "3",
|
|
98
|
-
authorId: "2",
|
|
99
|
-
publishedAt: "2024-10-20T14:00:00.000Z",
|
|
100
|
-
createdAt: "2024-10-20T13:00:00.000Z",
|
|
101
|
-
updatedAt: "2024-10-20T13:00:00.000Z",
|
|
102
|
-
views: 756,
|
|
103
|
-
likes: 34
|
|
104
|
-
},
|
|
105
|
-
{
|
|
106
|
-
id: "4",
|
|
107
|
-
title: "New Movie Breaks Box Office Records",
|
|
108
|
-
content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
|
|
109
|
-
excerpt: "Hollywood blockbuster exceeds all expectations",
|
|
110
|
-
image: "https://picsum.photos/400/300?random=4",
|
|
111
|
-
categoryId: "4",
|
|
112
|
-
authorId: "2",
|
|
113
|
-
publishedAt: "2024-10-19T14:00:00.000Z",
|
|
114
|
-
createdAt: "2024-10-19T13:00:00.000Z",
|
|
115
|
-
updatedAt: "2024-10-19T13:00:00.000Z",
|
|
116
|
-
views: 2103,
|
|
117
|
-
likes: 156
|
|
118
|
-
},
|
|
119
|
-
{
|
|
120
|
-
id: "5",
|
|
121
|
-
title: "Climate Summit Reaches Historic Agreement",
|
|
122
|
-
content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
|
|
123
|
-
excerpt: "World leaders commit to ambitious climate goals",
|
|
124
|
-
image: "https://picsum.photos/400/300?random=5",
|
|
125
|
-
categoryId: "1",
|
|
126
|
-
authorId: "3",
|
|
127
|
-
publishedAt: "2024-10-18T14:00:00.000Z",
|
|
128
|
-
createdAt: "2024-10-18T13:00:00.000Z",
|
|
129
|
-
updatedAt: "2024-10-18T13:00:00.000Z",
|
|
130
|
-
views: 1876,
|
|
131
|
-
likes: 203
|
|
132
|
-
},
|
|
133
|
-
{
|
|
134
|
-
id: "6",
|
|
135
|
-
title: "Tech Giant Unveils Revolutionary Product",
|
|
136
|
-
content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
|
|
137
|
-
excerpt: "New gadget promises to transform daily life",
|
|
138
|
-
image: "https://picsum.photos/400/300?random=6",
|
|
139
|
-
categoryId: "1",
|
|
140
|
-
authorId: "1",
|
|
141
|
-
publishedAt: "2024-10-17T14:00:00.000Z",
|
|
142
|
-
createdAt: "2024-10-17T13:00:00.000Z",
|
|
143
|
-
updatedAt: "2024-10-17T13:00:00.000Z",
|
|
144
|
-
views: 3421,
|
|
145
|
-
likes: 287
|
|
146
|
-
},
|
|
147
|
-
{
|
|
148
|
-
id: "7",
|
|
149
|
-
title: "Olympic Athlete Sets New World Record",
|
|
150
|
-
content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
|
|
151
|
-
excerpt: "Historic performance stuns sports world",
|
|
152
|
-
image: "https://picsum.photos/400/300?random=7",
|
|
153
|
-
categoryId: "2",
|
|
154
|
-
authorId: "2",
|
|
155
|
-
publishedAt: "2024-10-16T14:00:00.000Z",
|
|
156
|
-
createdAt: "2024-10-16T13:00:00.000Z",
|
|
157
|
-
updatedAt: "2024-10-16T13:00:00.000Z",
|
|
158
|
-
views: 1654,
|
|
159
|
-
likes: 98
|
|
160
|
-
},
|
|
161
|
-
{
|
|
162
|
-
id: "8",
|
|
163
|
-
title: "Startup Valued at $1 Billion After Funding",
|
|
164
|
-
content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
|
|
165
|
-
excerpt: "Tech unicorn emerges from latest funding round",
|
|
166
|
-
image: "https://picsum.photos/400/300?random=8",
|
|
167
|
-
categoryId: "3",
|
|
168
|
-
authorId: "3",
|
|
169
|
-
publishedAt: "2024-10-15T14:00:00.000Z",
|
|
170
|
-
createdAt: "2024-10-15T13:00:00.000Z",
|
|
171
|
-
updatedAt: "2024-10-15T13:00:00.000Z",
|
|
172
|
-
views: 892,
|
|
173
|
-
likes: 67
|
|
174
|
-
},
|
|
73
|
+
}
|
|
175
74
|
];
|
|
176
75
|
|
|
177
76
|
useEffect(() => {
|
|
@@ -1,16 +1,5 @@
|
|
|
1
1
|
{
|
|
2
2
|
"users": [
|
|
3
|
-
{
|
|
4
|
-
"id": "1",
|
|
5
|
-
"email": "admin@example.com",
|
|
6
|
-
"password": "admin123",
|
|
7
|
-
"name": "Admin User",
|
|
8
|
-
"role": "admin",
|
|
9
|
-
"status": "active",
|
|
10
|
-
"avatar": "https://i.pravatar.cc/150?img=1",
|
|
11
|
-
"createdAt": "2024-01-01T00:00:00.000Z",
|
|
12
|
-
"updatedAt": "2024-01-01T00:00:00.000Z"
|
|
13
|
-
},
|
|
14
3
|
{
|
|
15
4
|
"id": "2",
|
|
16
5
|
"email": "developer@localhost.com",
|
|
@@ -25,72 +14,6 @@
|
|
|
25
14
|
"createdAt": "2025-05-01T00:00:00.000Z",
|
|
26
15
|
"updatedAt": "2025-05-01T00:00:00.000Z"
|
|
27
16
|
},
|
|
28
|
-
{
|
|
29
|
-
"id": "3",
|
|
30
|
-
"email": "user@example.com",
|
|
31
|
-
"password": "user123",
|
|
32
|
-
"name": "Regular User",
|
|
33
|
-
"role": "user",
|
|
34
|
-
"status": "active",
|
|
35
|
-
"avatar": "https://i.pravatar.cc/150?img=3",
|
|
36
|
-
"createdAt": "2024-01-02T00:00:00.000Z",
|
|
37
|
-
"updatedAt": "2024-05-02T00:00:00.000Z"
|
|
38
|
-
},
|
|
39
|
-
{
|
|
40
|
-
"id": "4",
|
|
41
|
-
"name": "John Doe",
|
|
42
|
-
"email": "john.doe@example.com",
|
|
43
|
-
"password": "@developer",
|
|
44
|
-
"role": "admin",
|
|
45
|
-
"status": "active",
|
|
46
|
-
"avatar": "https://i.pravatar.cc/150?img=3",
|
|
47
|
-
"createdAt": "2024-01-15",
|
|
48
|
-
"updatedAt": "2024-01-15"
|
|
49
|
-
},
|
|
50
|
-
{
|
|
51
|
-
"id": "5",
|
|
52
|
-
"name": "Jane Smith",
|
|
53
|
-
"email": "jane.smith@example.com",
|
|
54
|
-
"password": "@developer",
|
|
55
|
-
"role": "user",
|
|
56
|
-
"status": "active",
|
|
57
|
-
"avatar": "https://i.pravatar.cc/150?img=3",
|
|
58
|
-
"createdAt": "2024-02-20",
|
|
59
|
-
"updatedAt": "2024-02-20"
|
|
60
|
-
},
|
|
61
|
-
{
|
|
62
|
-
"id": "6",
|
|
63
|
-
"name": "Mike Johnson",
|
|
64
|
-
"email": "mike.johnson@example.com",
|
|
65
|
-
"password": "@developer",
|
|
66
|
-
"role": "user",
|
|
67
|
-
"status": "active",
|
|
68
|
-
"avatar": "https://i.pravatar.cc/150?img=3",
|
|
69
|
-
"createdAt": "2024-03-10",
|
|
70
|
-
"updatedAt": "2024-03-10"
|
|
71
|
-
},
|
|
72
|
-
{
|
|
73
|
-
"id": "7",
|
|
74
|
-
"name": "Sarah Williams",
|
|
75
|
-
"email": "sarah.williams@example.com",
|
|
76
|
-
"password": "@developer",
|
|
77
|
-
"role": "admin",
|
|
78
|
-
"status": "active",
|
|
79
|
-
"avatar": "https://i.pravatar.cc/150?img=3",
|
|
80
|
-
"createdAt": "2024-01-25",
|
|
81
|
-
"updatedAt": "2024-01-25"
|
|
82
|
-
},
|
|
83
|
-
{
|
|
84
|
-
"id": "8",
|
|
85
|
-
"name": "Tom Brown",
|
|
86
|
-
"email": "tom.brown@example.com",
|
|
87
|
-
"password": "@developer",
|
|
88
|
-
"role": "user",
|
|
89
|
-
"status": "inactive",
|
|
90
|
-
"avatar": "https://i.pravatar.cc/150?img=3",
|
|
91
|
-
"createdAt": "2024-04-05",
|
|
92
|
-
"updatedAt": "2024-04-05"
|
|
93
|
-
},
|
|
94
17
|
{
|
|
95
18
|
"id": "9",
|
|
96
19
|
"email": "user@localhost.com",
|
|
@@ -101,28 +24,6 @@
|
|
|
101
24
|
"avatar": "https://i.pravatar.cc/150?img=10",
|
|
102
25
|
"createdAt": "2025-05-01T00:00:00.000Z",
|
|
103
26
|
"updatedAt": "2025-01-01T00:00:00.000Z"
|
|
104
|
-
},
|
|
105
|
-
{
|
|
106
|
-
"id": "10",
|
|
107
|
-
"email": "mockup@localhost.com",
|
|
108
|
-
"password": "@developer",
|
|
109
|
-
"name": "Mockup",
|
|
110
|
-
"role": "user",
|
|
111
|
-
"status": "active",
|
|
112
|
-
"avatar": "https://i.pravatar.cc/150?img=7",
|
|
113
|
-
"createdAt": "2025-05-01T00:00:00.000Z",
|
|
114
|
-
"updatedAt": "2025-05-01T00:00:00.000Z"
|
|
115
|
-
},
|
|
116
|
-
{
|
|
117
|
-
"id": "11",
|
|
118
|
-
"email": "tester@localhost.com",
|
|
119
|
-
"password": "@developer",
|
|
120
|
-
"name": "Tester",
|
|
121
|
-
"role": "user",
|
|
122
|
-
"status": "active",
|
|
123
|
-
"avatar": "https://i.pravatar.cc/150?img=9",
|
|
124
|
-
"createdAt": "2025-05-01T00:00:00.000Z",
|
|
125
|
-
"updatedAt": "2025-05-01T00:00:00.000Z"
|
|
126
27
|
}
|
|
127
28
|
],
|
|
128
29
|
"news": [
|
|
@@ -139,104 +40,6 @@
|
|
|
139
40
|
"updatedAt": "2024-10-22T13:00:00.000Z",
|
|
140
41
|
"views": 1245,
|
|
141
42
|
"likes": 89
|
|
142
|
-
},
|
|
143
|
-
{
|
|
144
|
-
"id": "2",
|
|
145
|
-
"title": "Sports Championship Finals This Weekend",
|
|
146
|
-
"content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
|
|
147
|
-
"excerpt": "Championship finals set for this weekend",
|
|
148
|
-
"image": "https://picsum.photos/400/300?random=2",
|
|
149
|
-
"categoryId": "2",
|
|
150
|
-
"authorId": "1",
|
|
151
|
-
"publishedAt": "2024-10-21T14:00:00.000Z",
|
|
152
|
-
"createdAt": "2024-10-21T13:00:00.000Z",
|
|
153
|
-
"updatedAt": "2024-10-21T13:00:00.000Z",
|
|
154
|
-
"views": 987,
|
|
155
|
-
"likes": 45
|
|
156
|
-
},
|
|
157
|
-
{
|
|
158
|
-
"id": "3",
|
|
159
|
-
"title": "Global Markets Show Strong Recovery",
|
|
160
|
-
"content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
|
|
161
|
-
"excerpt": "Economic indicators point to sustained growth",
|
|
162
|
-
"image": "https://picsum.photos/400/300?random=3",
|
|
163
|
-
"categoryId": "3",
|
|
164
|
-
"authorId": "2",
|
|
165
|
-
"publishedAt": "2024-10-20T14:00:00.000Z",
|
|
166
|
-
"createdAt": "2024-10-20T13:00:00.000Z",
|
|
167
|
-
"updatedAt": "2024-10-20T13:00:00.000Z",
|
|
168
|
-
"views": 756,
|
|
169
|
-
"likes": 34
|
|
170
|
-
},
|
|
171
|
-
{
|
|
172
|
-
"id": "4",
|
|
173
|
-
"title": "New Movie Breaks Box Office Records",
|
|
174
|
-
"content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
|
|
175
|
-
"excerpt": "Hollywood blockbuster exceeds all expectations",
|
|
176
|
-
"image": "https://picsum.photos/400/300?random=4",
|
|
177
|
-
"categoryId": "4",
|
|
178
|
-
"authorId": "2",
|
|
179
|
-
"publishedAt": "2024-10-19T14:00:00.000Z",
|
|
180
|
-
"createdAt": "2024-10-19T13:00:00.000Z",
|
|
181
|
-
"updatedAt": "2024-10-19T13:00:00.000Z",
|
|
182
|
-
"views": 2103,
|
|
183
|
-
"likes": 156
|
|
184
|
-
},
|
|
185
|
-
{
|
|
186
|
-
"id": "5",
|
|
187
|
-
"title": "Climate Summit Reaches Historic Agreement",
|
|
188
|
-
"content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
|
|
189
|
-
"excerpt": "World leaders commit to ambitious climate goals",
|
|
190
|
-
"image": "https://picsum.photos/400/300?random=5",
|
|
191
|
-
"categoryId": "1",
|
|
192
|
-
"authorId": "3",
|
|
193
|
-
"publishedAt": "2024-10-18T14:00:00.000Z",
|
|
194
|
-
"createdAt": "2024-10-18T13:00:00.000Z",
|
|
195
|
-
"updatedAt": "2024-10-18T13:00:00.000Z",
|
|
196
|
-
"views": 1876,
|
|
197
|
-
"likes": 203
|
|
198
|
-
},
|
|
199
|
-
{
|
|
200
|
-
"id": "6",
|
|
201
|
-
"title": "Tech Giant Unveils Revolutionary Product",
|
|
202
|
-
"content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
|
|
203
|
-
"excerpt": "New gadget promises to transform daily life",
|
|
204
|
-
"image": "https://picsum.photos/400/300?random=6",
|
|
205
|
-
"categoryId": "1",
|
|
206
|
-
"authorId": "1",
|
|
207
|
-
"publishedAt": "2024-10-17T14:00:00.000Z",
|
|
208
|
-
"createdAt": "2024-10-17T13:00:00.000Z",
|
|
209
|
-
"updatedAt": "2024-10-17T13:00:00.000Z",
|
|
210
|
-
"views": 3421,
|
|
211
|
-
"likes": 287
|
|
212
|
-
},
|
|
213
|
-
{
|
|
214
|
-
"id": "7",
|
|
215
|
-
"title": "Olympic Athlete Sets New World Record",
|
|
216
|
-
"content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
|
|
217
|
-
"excerpt": "Historic performance stuns sports world",
|
|
218
|
-
"image": "https://picsum.photos/400/300?random=7",
|
|
219
|
-
"categoryId": "2",
|
|
220
|
-
"authorId": "2",
|
|
221
|
-
"publishedAt": "2024-10-16T14:00:00.000Z",
|
|
222
|
-
"createdAt": "2024-10-16T13:00:00.000Z",
|
|
223
|
-
"updatedAt": "2024-10-16T13:00:00.000Z",
|
|
224
|
-
"views": 1654,
|
|
225
|
-
"likes": 98
|
|
226
|
-
},
|
|
227
|
-
{
|
|
228
|
-
"id": "8",
|
|
229
|
-
"title": "Startup Valued at $1 Billion After Funding",
|
|
230
|
-
"content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
|
|
231
|
-
"excerpt": "Tech unicorn emerges from latest funding round",
|
|
232
|
-
"image": "https://picsum.photos/400/300?random=8",
|
|
233
|
-
"categoryId": "3",
|
|
234
|
-
"authorId": "3",
|
|
235
|
-
"publishedAt": "2024-10-15T14:00:00.000Z",
|
|
236
|
-
"createdAt": "2024-10-15T13:00:00.000Z",
|
|
237
|
-
"updatedAt": "2024-10-15T13:00:00.000Z",
|
|
238
|
-
"views": 892,
|
|
239
|
-
"likes": 67
|
|
240
43
|
}
|
|
241
44
|
],
|
|
242
45
|
"categories": [
|