Hugging Face's logo

Spaces:
jsonet
/
web-development-tracking
Running

App Files Community
jsonet commited on
Commit
af553ca
·
verified ·
1 Parent(s): 15c7a47

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +639 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Web Development Tracking
3
- emoji: 🏃
4
- colorFrom: green
5
- colorTo: yellow
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: web-development-tracking
3
+ emoji: 🐳
4
+ colorFrom: pink
5
+ colorTo: gray
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,639 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="es">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Web Development Process Guide</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .phase-card {
11
+ transition: all 0.3s ease;
12
+ transform-style: preserve-3d;
13
+ }
14
+ .phase-card:hover {
15
+ transform: translateY(-5px) rotateX(5deg);
16
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
17
+ }
18
+ .tooltip {
19
+ position: relative;
20
+ display: inline-block;
21
+ }
22
+ .tooltip .tooltip-text {
23
+ visibility: hidden;
24
+ width: 200px;
25
+ background-color: #4f46e5;
26
+ color: #fff;
27
+ text-align: center;
28
+ border-radius: 6px;
29
+ padding: 5px;
30
+ position: absolute;
31
+ z-index: 1;
32
+ bottom: 125%;
33
+ left: 50%;
34
+ margin-left: -100px;
35
+ opacity: 0;
36
+ transition: opacity 0.3s;
37
+ }
38
+ .tooltip:hover .tooltip-text {
39
+ visibility: visible;
40
+ opacity: 1;
41
+ }
42
+ .progress-bar {
43
+ height: 6px;
44
+ transition: width 0.5s ease;
45
+ }
46
+ .tech-icon {
47
+ transition: all 0.3s ease;
48
+ }
49
+ .tech-icon:hover {
50
+ transform: scale(1.2);
51
+ }
52
+ </style>
53
+ </head>
54
+ <body class="bg-gray-50 font-sans">
55
+ <header class="bg-gradient-to-r from-indigo-600 to-purple-600 text-white shadow-lg">
56
+ <div class="container mx-auto px-4 py-8">
57
+ <div class="flex justify-between items-center">
58
+ <div>
59
+ <h1 class="text-4xl font-bold">Web Development Process</h1>
60
+ <p class="mt-2 text-lg opacity-90">A comprehensive guide from planning to deployment</p>
61
+ </div>
62
+ <div class="hidden md:block">
63
+ <div class="flex space-x-2">
64
+ <span class="px-3 py-1 bg-white bg-opacity-20 rounded-full text-sm">HTML</span>
65
+ <span class="px-3 py-1 bg-white bg-opacity-20 rounded-full text-sm">CSS</span>
66
+ <span class="px-3 py-1 bg-white bg-opacity-20 rounded-full text-sm">JavaScript</span>
67
+ </div>
68
+ </div>
69
+ </div>
70
+ </div>
71
+ </header>
72
+
73
+ <main class="container mx-auto px-4 py-8">
74
+ <!-- Progress Tracker -->
75
+ <div class="mb-12 bg-white rounded-xl shadow-md p-6">
76
+ <h2 class="text-2xl font-semibold text-gray-800 mb-4">Your Project Progress</h2>
77
+ <div class="space-y-4">
78
+ <div>
79
+ <div class="flex justify-between mb-1">
80
+ <span class="text-sm font-medium text-gray-700">Planning & Design</span>
81
+ <span class="text-sm font-medium text-gray-700">0%</span>
82
+ </div>
83
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
84
+ <div class="progress-bar bg-indigo-600 rounded-full h-2.5" style="width: 0%"></div>
85
+ </div>
86
+ </div>
87
+ <div>
88
+ <div class="flex justify-between mb-1">
89
+ <span class="text-sm font-medium text-gray-700">Development Setup</span>
90
+ <span class="text-sm font-medium text-gray-700">0%</span>
91
+ </div>
92
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
93
+ <div class="progress-bar bg-indigo-600 rounded-full h-2.5" style="width: 0%"></div>
94
+ </div>
95
+ </div>
96
+ <div>
97
+ <div class="flex justify-between mb-1">
98
+ <span class="text-sm font-medium text-gray-700">Backend Development</span>
99
+ <span class="text-sm font-medium text-gray-700">0%</span>
100
+ </div>
101
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
102
+ <div class="progress-bar bg-indigo-600 rounded-full h-2.5" style="width: 0%"></div>
103
+ </div>
104
+ </div>
105
+ <div>
106
+ <div class="flex justify-between mb-1">
107
+ <span class="text-sm font-medium text-gray-700">Frontend Development</span>
108
+ <span class="text-sm font-medium text-gray-700">0%</span>
109
+ </div>
110
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
111
+ <div class="progress-bar bg-indigo-600 rounded-full h-2.5" style="width: 0%"></div>
112
+ </div>
113
+ </div>
114
+ <div>
115
+ <div class="flex justify-between mb-1">
116
+ <span class="text-sm font-medium text-gray-700">Testing & Deployment</span>
117
+ <span class="text-sm font-medium text-gray-700">0%</span>
118
+ </div>
119
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
120
+ <div class="progress-bar bg-indigo-600 rounded-full h-2.5" style="width: 0%"></div>
121
+ </div>
122
+ </div>
123
+ </div>
124
+ <button id="updateProgressBtn" class="mt-6 px-6 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition">
125
+ Update Progress
126
+ </button>
127
+ </div>
128
+
129
+ <!-- Development Phases -->
130
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12">
131
+ <!-- Phase 0 -->
132
+ <div class="phase-card bg-white rounded-xl shadow-md overflow-hidden hover:shadow-xl">
133
+ <div class="bg-indigo-100 p-4">
134
+ <div class="flex items-center">
135
+ <div class="bg-indigo-600 text-white rounded-full w-10 h-10 flex items-center justify-center mr-3">
136
+ <span class="font-bold">0</span>
137
+ </div>
138
+ <h3 class="text-xl font-semibold text-gray-800">Planning & Design</h3>
139
+ </div>
140
+ </div>
141
+ <div class="p-6">
142
+ <ul class="space-y-3">
143
+ <li class="flex items-start">
144
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
145
+ <span>Define project requirements and MVP</span>
146
+ </li>
147
+ <li class="flex items-start">
148
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
149
+ <span>Create wireframes and mockups</span>
150
+ </li>
151
+ <li class="flex items-start">
152
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
153
+ <span>Choose technology stack</span>
154
+ </li>
155
+ <li class="flex items-start">
156
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
157
+ <span>Design database schema</span>
158
+ </li>
159
+ </ul>
160
+ <div class="mt-6">
161
+ <button class="px-4 py-2 bg-indigo-100 text-indigo-700 rounded-lg hover:bg-indigo-200 transition">
162
+ View Details
163
+ </button>
164
+ </div>
165
+ </div>
166
+ </div>
167
+
168
+ <!-- Phase 1 -->
169
+ <div class="phase-card bg-white rounded-xl shadow-md overflow-hidden hover:shadow-xl">
170
+ <div class="bg-purple-100 p-4">
171
+ <div class="flex items-center">
172
+ <div class="bg-purple-600 text-white rounded-full w-10 h-10 flex items-center justify-center mr-3">
173
+ <span class="font-bold">1</span>
174
+ </div>
175
+ <h3 class="text-xl font-semibold text-gray-800">Development Setup</h3>
176
+ </div>
177
+ </div>
178
+ <div class="p-6">
179
+ <ul class="space-y-3">
180
+ <li class="flex items-start">
181
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
182
+ <span>Install development tools</span>
183
+ </li>
184
+ <li class="flex items-start">
185
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
186
+ <span>Set up version control</span>
187
+ </li>
188
+ <li class="flex items-start">
189
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
190
+ <span>Initialize project structure</span>
191
+ </li>
192
+ <li class="flex items-start">
193
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
194
+ <span>Configure environment</span>
195
+ </li>
196
+ </ul>
197
+ <div class="mt-6">
198
+ <button class="px-4 py-2 bg-purple-100 text-purple-700 rounded-lg hover:bg-purple-200 transition">
199
+ View Details
200
+ </button>
201
+ </div>
202
+ </div>
203
+ </div>
204
+
205
+ <!-- Phase 2 -->
206
+ <div class="phase-card bg-white rounded-xl shadow-md overflow-hidden hover:shadow-xl">
207
+ <div class="bg-blue-100 p-4">
208
+ <div class="flex items-center">
209
+ <div class="bg-blue-600 text-white rounded-full w-10 h-10 flex items-center justify-center mr-3">
210
+ <span class="font-bold">2</span>
211
+ </div>
212
+ <h3 class="text-xl font-semibold text-gray-800">Backend Development</h3>
213
+ </div>
214
+ </div>
215
+ <div class="p-6">
216
+ <ul class="space-y-3">
217
+ <li class="flex items-start">
218
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
219
+ <span>Set up server framework</span>
220
+ </li>
221
+ <li class="flex items-start">
222
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
223
+ <span>Design and implement API</span>
224
+ </li>
225
+ <li class="flex items-start">
226
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
227
+ <span>Connect to database</span>
228
+ </li>
229
+ <li class="flex items-start">
230
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
231
+ <span>Implement authentication</span>
232
+ </li>
233
+ </ul>
234
+ <div class="mt-6">
235
+ <button class="px-4 py-2 bg-blue-100 text-blue-700 rounded-lg hover:bg-blue-200 transition">
236
+ View Details
237
+ </button>
238
+ </div>
239
+ </div>
240
+ </div>
241
+
242
+ <!-- Phase 3 -->
243
+ <div class="phase-card bg-white rounded-xl shadow-md overflow-hidden hover:shadow-xl">
244
+ <div class="bg-green-100 p-4">
245
+ <div class="flex items-center">
246
+ <div class="bg-green-600 text-white rounded-full w-10 h-10 flex items-center justify-center mr-3">
247
+ <span class="font-bold">3</span>
248
+ </div>
249
+ <h3 class="text-xl font-semibold text-gray-800">Frontend Development</h3>
250
+ </div>
251
+ </div>
252
+ <div class="p-6">
253
+ <ul class="space-y-3">
254
+ <li class="flex items-start">
255
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
256
+ <span>Set up frontend framework</span>
257
+ </li>
258
+ <li class="flex items-start">
259
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
260
+ <span>Develop UI components</span>
261
+ </li>
262
+ <li class="flex items-start">
263
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
264
+ <span>Implement routing</span>
265
+ </li>
266
+ <li class="flex items-start">
267
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
268
+ <span>Connect to backend API</span>
269
+ </li>
270
+ </ul>
271
+ <div class="mt-6">
272
+ <button class="px-4 py-2 bg-green-100 text-green-700 rounded-lg hover:bg-green-200 transition">
273
+ View Details
274
+ </button>
275
+ </div>
276
+ </div>
277
+ </div>
278
+
279
+ <!-- Phase 4 -->
280
+ <div class="phase-card bg-white rounded-xl shadow-md overflow-hidden hover:shadow-xl">
281
+ <div class="bg-yellow-100 p-4">
282
+ <div class="flex items-center">
283
+ <div class="bg-yellow-600 text-white rounded-full w-10 h-10 flex items-center justify-center mr-3">
284
+ <span class="font-bold">4</span>
285
+ </div>
286
+ <h3 class="text-xl font-semibold text-gray-800">Testing & Integration</h3>
287
+ </div>
288
+ </div>
289
+ <div class="p-6">
290
+ <ul class="space-y-3">
291
+ <li class="flex items-start">
292
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
293
+ <span>Write unit tests</span>
294
+ </li>
295
+ <li class="flex items-start">
296
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
297
+ <span>Perform integration testing</span>
298
+ </li>
299
+ <li class="flex items-start">
300
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
301
+ <span>Fix bugs</span>
302
+ </li>
303
+ <li class="flex items-start">
304
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
305
+ <span>Optimize performance</span>
306
+ </li>
307
+ </ul>
308
+ <div class="mt-6">
309
+ <button class="px-4 py-2 bg-yellow-100 text-yellow-700 rounded-lg hover:bg-yellow-200 transition">
310
+ View Details
311
+ </button>
312
+ </div>
313
+ </div>
314
+ </div>
315
+
316
+ <!-- Phase 5 -->
317
+ <div class="phase-card bg-white rounded-xl shadow-md overflow-hidden hover:shadow-xl">
318
+ <div class="bg-red-100 p-4">
319
+ <div class="flex items-center">
320
+ <div class="bg-red-600 text-white rounded-full w-10 h-10 flex items-center justify-center mr-3">
321
+ <span class="font-bold">5</span>
322
+ </div>
323
+ <h3 class="text-xl font-semibold text-gray-800">Deployment</h3>
324
+ </div>
325
+ </div>
326
+ <div class="p-6">
327
+ <ul class="space-y-3">
328
+ <li class="flex items-start">
329
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
330
+ <span>Choose hosting provider</span>
331
+ </li>
332
+ <li class="flex items-start">
333
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
334
+ <span>Configure production environment</span>
335
+ </li>
336
+ <li class="flex items-start">
337
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
338
+ <span>Set up CI/CD pipeline</span>
339
+ </li>
340
+ <li class="flex items-start">
341
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
342
+ <span>Configure domain and SSL</span>
343
+ </li>
344
+ </ul>
345
+ <div class="mt-6">
346
+ <button class="px-4 py-2 bg-red-100 text-red-700 rounded-lg hover:bg-red-200 transition">
347
+ View Details
348
+ </button>
349
+ </div>
350
+ </div>
351
+ </div>
352
+ </div>
353
+
354
+ <!-- Technology Stack -->
355
+ <div class="bg-white rounded-xl shadow-md p-6 mb-12">
356
+ <h2 class="text-2xl font-semibold text-gray-800 mb-6">Technology Stack Options</h2>
357
+
358
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
359
+ <!-- Backend -->
360
+ <div class="border border-gray-200 rounded-lg p-4">
361
+ <h3 class="text-lg font-medium text-gray-800 mb-3 flex items-center">
362
+ <i class="fas fa-server mr-2 text-indigo-600"></i> Backend
363
+ </h3>
364
+ <div class="flex flex-wrap gap-3">
365
+ <div class="tooltip">
366
+ <div class="tech-icon bg-gray-100 p-2 rounded-lg">
367
+ <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/nodejs/nodejs-original.svg" width="32" height="32" alt="Node.js">
368
+ </div>
369
+ <span class="tooltip-text">Node.js - JavaScript runtime</span>
370
+ </div>
371
+ <div class="tooltip">
372
+ <div class="tech-icon bg-gray-100 p-2 rounded-lg">
373
+ <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/python/python-original.svg" width="32" height="32" alt="Python">
374
+ </div>
375
+ <span class="tooltip-text">Python - Versatile language</span>
376
+ </div>
377
+ <div class="tooltip">
378
+ <div class="tech-icon bg-gray-100 p-2 rounded-lg">
379
+ <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/java/java-original.svg" width="32" height="32" alt="Java">
380
+ </div>
381
+ <span class="tooltip-text">Java - Enterprise solution</span>
382
+ </div>
383
+ <div class="tooltip">
384
+ <div class="tech-icon bg-gray-100 p-2 rounded-lg">
385
+ <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/php/php-original.svg" width="32" height="32" alt="PHP">
386
+ </div>
387
+ <span class="tooltip-text">PHP - Web-focused language</span>
388
+ </div>
389
+ </div>
390
+ </div>
391
+
392
+ <!-- Frontend -->
393
+ <div class="border border-gray-200 rounded-lg p-4">
394
+ <h3 class="text-lg font-medium text-gray-800 mb-3 flex items-center">
395
+ <i class="fas fa-desktop mr-2 text-blue-600"></i> Frontend
396
+ </h3>
397
+ <div class="flex flex-wrap gap-3">
398
+ <div class="tooltip">
399
+ <div class="tech-icon bg-gray-100 p-2 rounded-lg">
400
+ <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/react/react-original.svg" width="32" height="32" alt="React">
401
+ </div>
402
+ <span class="tooltip-text">React - Component-based UI</span>
403
+ </div>
404
+ <div class="tooltip">
405
+ <div class="tech-icon bg-gray-100 p-2 rounded-lg">
406
+ <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/vuejs/vuejs-original.svg" width="32" height="32" alt="Vue.js">
407
+ </div>
408
+ <span class="tooltip-text">Vue.js - Progressive framework</span>
409
+ </div>
410
+ <div class="tooltip">
411
+ <div class="tech-icon bg-gray-100 p-2 rounded-lg">
412
+ <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/angularjs/angularjs-original.svg" width="32" height="32" alt="Angular">
413
+ </div>
414
+ <span class="tooltip-text">Angular - Full-featured framework</span>
415
+ </div>
416
+ <div class="tooltip">
417
+ <div class="tech-icon bg-gray-100 p-2 rounded-lg">
418
+ <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/svelte/svelte-original.svg" width="32" height="32" alt="Svelte">
419
+ </div>
420
+ <span class="tooltip-text">Svelte - Compiler approach</span>
421
+ </div>
422
+ </div>
423
+ </div>
424
+
425
+ <!-- Database -->
426
+ <div class="border border-gray-200 rounded-lg p-4">
427
+ <h3 class="text-lg font-medium text-gray-800 mb-3 flex items-center">
428
+ <i class="fas fa-database mr-2 text-green-600"></i> Database
429
+ </h3>
430
+ <div class="flex flex-wrap gap-3">
431
+ <div class="tooltip">
432
+ <div class="tech-icon bg-gray-100 p-2 rounded-lg">
433
+ <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/postgresql/postgresql-original.svg" width="32" height="32" alt="PostgreSQL">
434
+ </div>
435
+ <span class="tooltip-text">PostgreSQL - Powerful SQL database</span>
436
+ </div>
437
+ <div class="tooltip">
438
+ <div class="tech-icon bg-gray-100 p-2 rounded-lg">
439
+ <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/mysql/mysql-original.svg" width="32" height="32" alt="MySQL">
440
+ </div>
441
+ <span class="tooltip-text">MySQL - Popular SQL database</span>
442
+ </div>
443
+ <div class="tooltip">
444
+ <div class="tech-icon bg-gray-100 p-2 rounded-lg">
445
+ <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/mongodb/mongodb-original.svg" width="32" height="32" alt="MongoDB">
446
+ </div>
447
+ <span class="tooltip-text">MongoDB - NoSQL document store</span>
448
+ </div>
449
+ <div class="tooltip">
450
+ <div class="tech-icon bg-gray-100 p-2 rounded-lg">
451
+ <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/redis/redis-original.svg" width="32" height="32" alt="Redis">
452
+ </div>
453
+ <span class="tooltip-text">Redis - In-memory data store</span>
454
+ </div>
455
+ </div>
456
+ </div>
457
+ </div>
458
+ </div>
459
+
460
+ <!-- Checklist -->
461
+ <div class="bg-white rounded-xl shadow-md p-6 mb-12">
462
+ <h2 class="text-2xl font-semibold text-gray-800 mb-6">Development Checklist</h2>
463
+
464
+ <div class="space-y-4">
465
+ <div class="border-b border-gray-200 pb-4">
466
+ <h3 class="text-lg font-medium text-gray-800 mb-3">Planning Phase</h3>
467
+ <div class="space-y-2">
468
+ <label class="flex items-center">
469
+ <input type="checkbox" class="form-checkbox h-5 w-5 text-indigo-600 rounded">
470
+ <span class="ml-2 text-gray-700">Define project requirements</span>
471
+ </label>
472
+ <label class="flex items-center">
473
+ <input type="checkbox" class="form-checkbox h-5 w-5 text-indigo-600 rounded">
474
+ <span class="ml-2 text-gray-700">Create wireframes</span>
475
+ </label>
476
+ <label class="flex items-center">
477
+ <input type="checkbox" class="form-checkbox h-5 w-5 text-indigo-600 rounded">
478
+ <span class="ml-2 text-gray-700">Choose technology stack</span>
479
+ </label>
480
+ </div>
481
+ </div>
482
+
483
+ <div class="border-b border-gray-200 pb-4">
484
+ <h3 class="text-lg font-medium text-gray-800 mb-3">Development Phase</h3>
485
+ <div class="space-y-2">
486
+ <label class="flex items-center">
487
+ <input type="checkbox" class="form-checkbox h-5 w-5 text-indigo-600 rounded">
488
+ <span class="ml-2 text-gray-700">Set up development environment</span>
489
+ </label>
490
+ <label class="flex items-center">
491
+ <input type="checkbox" class="form-checkbox h-5 w-5 text-indigo-600 rounded">
492
+ <span class="ml-2 text-gray-700">Implement backend API</span>
493
+ </label>
494
+ <label class="flex items-center">
495
+ <input type="checkbox" class="form-checkbox h-5 w-5 text-indigo-600 rounded">
496
+ <span class="ml-2 text-gray-700">Develop frontend components</span>
497
+ </label>
498
+ </div>
499
+ </div>
500
+
501
+ <div>
502
+ <h3 class="text-lg font-medium text-gray-800 mb-3">Deployment Phase</h3>
503
+ <div class="space-y-2">
504
+ <label class="flex items-center">
505
+ <input type="checkbox" class="form-checkbox h-5 w-5 text-indigo-600 rounded">
506
+ <span class="ml-2 text-gray-700">Configure production environment</span>
507
+ </label>
508
+ <label class="flex items-center">
509
+ <input type="checkbox" class="form-checkbox h-5 w-5 text-indigo-600 rounded">
510
+ <span class="ml-2 text-gray-700">Set up CI/CD pipeline</span>
511
+ </label>
512
+ <label class="flex items-center">
513
+ <input type="checkbox" class="form-checkbox h-5 w-5 text-indigo-600 rounded">
514
+ <span class="ml-2 text-gray-700">Monitor application performance</span>
515
+ </label>
516
+ </div>
517
+ </div>
518
+ </div>
519
+ </div>
520
+
521
+ <!-- Resources -->
522
+ <div class="bg-white rounded-xl shadow-md p-6">
523
+ <h2 class="text-2xl font-semibold text-gray-800 mb-6">Helpful Resources</h2>
524
+
525
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
526
+ <a href="https://developer.mozilla.org" target="_blank" class="group">
527
+ <div class="border border-gray-200 rounded-lg p-4 hover:border-indigo-300 hover:bg-indigo-50 transition">
528
+ <div class="flex items-center mb-3">
529
+ <i class="fas fa-globe text-indigo-600 text-xl mr-3"></i>
530
+ <h3 class="text-lg font-medium text-gray-800 group-hover:text-indigo-700">MDN Web Docs</h3>
531
+ </div>
532
+ <p class="text-gray-600">Comprehensive documentation for HTML, CSS, and JavaScript.</p>
533
+ </div>
534
+ </a>
535
+
536
+ <a href="https://tailwindcss.com" target="_blank" class="group">
537
+ <div class="border border-gray-200 rounded-lg p-4 hover:border-indigo-300 hover:bg-indigo-50 transition">
538
+ <div class="flex items-center mb-3">
539
+ <i class="fas fa-paint-brush text-indigo-600 text-xl mr-3"></i>
540
+ <h3 class="text-lg font-medium text-gray-800 group-hover:text-indigo-700">Tailwind CSS</h3>
541
+ </div>
542
+ <p class="text-gray-600">Utility-first CSS framework for rapid UI development.</p>
543
+ </div>
544
+ </a>
545
+
546
+ <a href="https://dev.to" target="_blank" class="group">
547
+ <div class="border border-gray-200 rounded-lg p-4 hover:border-indigo-300 hover:bg-indigo-50 transition">
548
+ <div class="flex items-center mb-3">
549
+ <i class="fas fa-newspaper text-indigo-600 text-xl mr-3"></i>
550
+ <h3 class="text-lg font-medium text-gray-800 group-hover:text-indigo-700">DEV Community</h3>
551
+ </div>
552
+ <p class="text-gray-600">Community of developers sharing knowledge and experiences.</p>
553
+ </div>
554
+ </a>
555
+ </div>
556
+ </div>
557
+ </main>
558
+
559
+ <footer class="bg-gray-800 text-white py-8 mt-12">
560
+ <div class="container mx-auto px-4">
561
+ <div class="flex flex-col md:flex-row justify-between items-center">
562
+ <div class="mb-4 md:mb-0">
563
+ <h3 class="text-xl font-bold">Web Development Process</h3>
564
+ <p class="text-gray-400 mt-1">A guide to building modern web applications</p>
565
+ </div>
566
+ <div class="flex space-x-6">
567
+ <a href="#" class="text-gray-400 hover:text-white transition">
568
+ <i class="fab fa-github text-xl"></i>
569
+ </a>
570
+ <a href="#" class="text-gray-400 hover:text-white transition">
571
+ <i class="fab fa-twitter text-xl"></i>
572
+ </a>
573
+ <a href="#" class="text-gray-400 hover:text-white transition">
574
+ <i class="fab fa-linkedin text-xl"></i>
575
+ </a>
576
+ </div>
577
+ </div>
578
+ <div class="border-t border-gray-700 mt-6 pt-6 text-center text-gray-400">
579
+ <p>&copy; 2023 Web Development Guide. All rights reserved.</p>
580
+ </div>
581
+ </div>
582
+ </footer>
583
+
584
+ <script>
585
+ // Update progress bars
586
+ document.getElementById('updateProgressBtn').addEventListener('click', function() {
587
+ const progressBars = document.querySelectorAll('.progress-bar');
588
+ const progressTexts = document.querySelectorAll('.text-sm.font-medium.text-gray-700:not(:first-child)');
589
+
590
+ progressBars.forEach((bar, index) => {
591
+ const randomProgress = Math.floor(Math.random() * 100);
592
+ bar.style.width = `${randomProgress}%`;
593
+
594
+ // Update the text next to the progress bar
595
+ if (progressTexts[index]) {
596
+ progressTexts[index].textContent = `${randomProgress}%`;
597
+ }
598
+ });
599
+
600
+ // Change button text temporarily
601
+ this.textContent = 'Progress Updated!';
602
+ setTimeout(() => {
603
+ this.textContent = 'Update Progress';
604
+ }, 2000);
605
+ });
606
+
607
+ // Toggle checklist items
608
+ const checkboxes = document.querySelectorAll('input[type="checkbox"]');
609
+ checkboxes.forEach(checkbox => {
610
+ checkbox.addEventListener('change', function() {
611
+ const label = this.nextElementSibling;
612
+ if (this.checked) {
613
+ label.classList.add('line-through', 'text-gray-400');
614
+ } else {
615
+ label.classList.remove('line-through', 'text-gray-400');
616
+ }
617
+ });
618
+ });
619
+
620
+ // Add hover effect to phase cards
621
+ const phaseCards = document.querySelectorAll('.phase-card');
622
+ phaseCards.forEach(card => {
623
+ card.addEventListener('mouseenter', function() {
624
+ const icon = this.querySelector('.fa-check-circle');
625
+ if (icon) {
626
+ icon.classList.add('animate-bounce');
627
+ }
628
+ });
629
+
630
+ card.addEventListener('mouseleave', function() {
631
+ const icon = this.querySelector('.fa-check-circle');
632
+ if (icon) {
633
+ icon.classList.remove('animate-bounce');
634
+ }
635
+ });
636
+ });
637
+ </script>
638
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=jsonet/web-development-tracking" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
639
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ Filosofía General: El desarrollo web es un proceso iterativo. No tienes que hacer todo perfectamente en el primer intento. Empieza simple, haz que funcione, y luego mejora y añade complejidad. Fase 0: Planificación y Diseño Antes de escribir una sola línea de código, es crucial planificar. Definir la Idea y los Requisitos: ¿Qué problema resuelve tu aplicación? ¿Quiénes son los usuarios objetivo? ¿Cuáles son las funcionalidades principales (MVP - Minimum Viable Product)? ¿Qué funcionalidades secundarias te gustaría añadir más adelante? Haz bocetos simples (wireframes) de las pantallas principales. Elegir la Pila Tecnológica (Tech Stack): Backend: Lenguaje/Plataforma: Node.js (JavaScript/TypeScript), Python, Ruby, Java, PHP, Go, C# (.NET). Framework: Express.js/NestJS (Node.js), Django/Flask (Python), Ruby on Rails (Ruby), Spring Boot (Java), Laravel/Symfony (PHP). Frontend: Framework/Librería: React, Angular, Vue.js, Svelte, o incluso HTML/CSS/JavaScript "vanilla" para proyectos simples. Base de Datos: SQL (Relacional): PostgreSQL, MySQL, MariaDB, SQL Server. Ideal para datos estructurados con relaciones claras. NoSQL (No relacional): MongoDB (Documentos), Redis (Clave-Valor/Caché), Cassandra (Columna ancha). Flexible para datos no estructurados o semi-estructurados. Consideraciones: Curva de aprendizaje, rendimiento, comunidad, ecosistema de librerías, requisitos específicos del proyecto. Diseño de Arquitectura: ¿Será una aplicación monolítica (todo en un solo bloque) o basada en microservicios (componentes independientes)? (Empieza con monolito si no estás seguro). ¿Cómo se comunicarán el frontend y el backend? (Generalmente a través de una API RESTful o GraphQL). Diseña el esquema inicial de la base de datos (tablas/colecciones y sus relaciones/campos). Diseño UI/UX (Interfaz de Usuario / Experiencia de Usuario): Crea mockups más detallados o prototipos interactivos. Define la paleta de colores, tipografía y estilo visual general. Herramientas: Figma, Sketch, Adobe XD, Balsamiq (para wireframes). Fase 1: Configuración del Entorno de Desarrollo Prepara tu máquina para el desarrollo. Instalar Herramientas Esenciales: Editor de Código: VS Code (muy popular, gratuito, extensible), Sublime Text, Atom, WebStorm (de pago, muy potente). Control de Versiones: Git. Crea una cuenta en GitHub, GitLab o Bitbucket para alojar tus repositorios. Terminal/Línea de Comandos: Aprende los comandos básicos. (Integrada en VS Code, Terminal en macOS/Linux, Git Bash o WSL en Windows). Navegador Web: Chrome, Firefox (con sus herramientas de desarrollo). Instalar Dependencias del Stack: Node.js y npm/yarn: Si usas JavaScript/TypeScript para backend o frontend. Descarga desde nodejs.org. npm viene incluido, yarn se instala aparte (npm install -g yarn). Python y pip: Si usas Python. Descarga desde python.org. pip suele venir incluido. Considera usar entornos virtuales (venv). Runtime/SDK correspondiente: Para Java (JDK), Ruby, PHP, Go, .NET SDK. Base de Datos: Instala la base de datos elegida en tu máquina local o usa Docker. Docker (Opcional pero Recomendado): Para crear entornos consistentes y facilitar el despliegue. Inicializar el Proyecto: Crea una carpeta para tu proyecto. Inicializa Git: git init. Crea la estructura de carpetas (p.ej., /backend, /frontend, /docs). Configura los gestores de paquetes (p.ej., npm init o yarn init en las carpetas correspondientes, pip freeze > requirements.txt para Python). Crea tu primer commit: git add ., git commit -m "Initial project setup". Fase 2: Desarrollo del Backend Construye la lógica del servidor y la gestión de datos. Configurar el Framework Backend: Instala el framework elegido (p.ej., npm install express o pip install django). Sigue la documentación del framework para crear la estructura básica del proyecto (rutas, controladores/vistas, modelos). Diseñar e Implementar la API: Define los endpoints (URLs) que el frontend usará para interactuar con el backend (p.ej., /api/users, /api/posts). Implementa los métodos HTTP correspondientes (GET, POST, PUT, DELETE) para cada endpoint. Define el formato de los datos intercambiados (generalmente JSON). Conectar y Configurar la Base de Datos: Instala el driver o librería necesaria para tu base de datos (p.ej., pg para Node.js/PostgreSQL, psycopg2 para Python/PostgreSQL). Configura la conexión a la base de datos (URL, usuario, contraseña). Usa variables de entorno para datos sensibles. ORM/ODM (Opcional pero muy útil): Usa una librería como Sequelize/TypeORM/Prisma (Node.js), SQLAlchemy/Django ORM (Python), Mongoose (Node.js/MongoDB) para interactuar con la base de datos de forma más abstracta y segura. Define tus modelos de datos usando el ORM/ODM. Implementar la Lógica de Negocio: Escribe el código que realiza las operaciones principales de tu aplicación (crear usuario, guardar post, calcular totales, etc.) en los controladores/servicios. Implementar Autenticación y Autorización: Permite que los usuarios se registren e inicien sesión. Protege ciertos endpoints para que solo usuarios autenticados (o con roles específicos) puedan acceder. Librerías/Estrategias Comunes: JWT (JSON Web Tokens), OAuth2, Sesiones con Cookies. Librerías como Passport.js (Node.js), Django Authentication, Spring Security. Validación de Datos: Valida siempre los datos que llegan del cliente antes de procesarlos o guardarlos en la base de datos. Librerías: express-validator (Node.js/Express), WTForms (Python/Flask), Serializers de Django REST framework. Pruebas Backend: Escribe pruebas unitarias (para funciones individuales) y pruebas de integración (para flujos entre componentes). Herramientas: Jest/Mocha/Chai (JavaScript), PyTest/unittest (Python), JUnit (Java). Herramientas Adicionales: Postman o Insomnia para probar manualmente tus endpoints API. Fase 3: Desarrollo del Frontend Construye la interfaz con la que interactúan los usuarios. Configurar el Framework/Librería Frontend: Usa herramientas CLI para crear la estructura inicial: npx create-react-app my-app, ng new my-app, npm create vue@latest. Organiza tu código en componentes reutilizables (botones, formularios, tarjetas, etc.) y vistas/páginas. Desarrollar la Interfaz de Usuario (UI): Traduce los mockups/diseños a código HTML y CSS. Usa CSS plano, preprocesadores (Sass/LESS) o frameworks CSS (Tailwind CSS, Bootstrap) o librerías de componentes (Material UI, Ant Design, Chakra UI). Enfócate en el diseño responsivo (que se vea bien en móviles, tablets y escritorio). Implementar el Enrutamiento (Routing): Configura la navegación entre las diferentes páginas o vistas de tu aplicación. Librerías: React Router, Vue Router, Angular Router. Gestionar el Estado de la Aplicación: Decide cómo manejar los datos dentro del frontend (datos del usuario, lista de posts, estado del carrito, etc.). Para aplicaciones simples, el estado local de los componentes puede ser suficiente. Para aplicaciones complejas, usa librerías de gestión de estado: Redux/Zustand/Context API (React), Vuex/Pinia (Vue), NgRx/Services (Angular). Conectar con la API del Backend: Usa la Workspace API del navegador o librerías como axios para hacer peticiones HTTP a los endpoints de tu backend. Maneja las respuestas (mostrar datos, manejar errores, mostrar estados de carga). Implementar la Interacción del Usuario: Maneja eventos (clics, envíos de formularios, escritura en inputs). Valida los formularios en el lado del cliente (aunque la validación principal debe estar en el backend). Pruebas Frontend: Pruebas unitarias para funciones de utilidad o lógica compleja. Pruebas de componentes para verificar que renderizan y funcionan correctamente de forma aislada. Pruebas End-to-End (E2E) para simular flujos de usuario completos en el navegador. Herramientas: Jest, React Testing Library, Vue Testing Library, Cypress, Playwright. Fase 4: Integración y Pruebas Completas Asegúrate de que todo funciona junto. Conexión Frontend-Backend: Verifica que todas las llamadas API funcionan como se espera y que los datos fluyen correctamente. Pruebas End-to-End (E2E): Usa herramientas como Cypress o Playwright para automatizar pruebas que simulan a un usuario interactuando con la aplicación completa (iniciar sesión, crear un post, etc.). Pruebas de Usabilidad (Opcional): Pide a usuarios reales (o amigos) que prueben la aplicación y te den feedback. Corrección de Errores (Debugging): Usa las herramientas de desarrollo del navegador, los logs del backend y las herramientas de prueba para encontrar y solucionar problemas. Fase 5: Despliegue (Deployment) Haz que tu aplicación esté disponible en Internet. Elegir un Proveedor de Hosting/Cloud: PaaS (Plataforma como Servicio): Heroku, Vercel (ideal para frontend/serverless), Netlify (ideal para frontend estático), Render, Google App Engine. Más fáciles de gestionar. IaaS (Infraestructura como Servicio): AWS (EC2), Google Cloud (Compute Engine), Azure (Virtual Machines), DigitalOcean Droplets, Linode. Más control, pero más configuración. Contenedores: AWS ECS/EKS, Google Kubernetes Engine (GKE), Azure Kubernetes Service (AKS). Para orquestar contenedores Docker. Preparar la Aplicación para Producción: Build del Frontend: Genera los archivos estáticos optimizados (JS/CSS minificados, etc.) usando los comandos de tu framework (p.ej., npm run build). Variables de Entorno: Configura variables de entorno para producción (claves API, URL de la base de datos de producción, secretos). ¡Nunca las incluyas directamente en el código! Configuración del Servidor: Configura un servidor web como Nginx o Apache si es necesario (a menudo manejado por el PaaS o Docker) para servir los archivos del frontend y actuar como proxy inverso para el backend. Configurar la Base de Datos de Producción: Crea una instancia de base de datos en tu proveedor cloud (p.ej., AWS RDS, Google Cloud SQL) o instala la base de datos en tu servidor. Desplegar el Código: Manual: Subir los archivos mediante FTP/SCP (no recomendado para actualizaciones frecuentes). Integración con Git: Muchos PaaS permiten desplegar automáticamente al hacer git push a una rama específica. CI/CD (Integración Continua / Despliegue Continuo): Configura pipelines automáticas (GitHub Actions, GitLab CI, Jenkins) que prueben, construyan y desplieguen tu código cada vez que hagas push. Este es el método preferido. Docker: Construye imágenes de Docker para tu frontend y backend y despliégalas en tu plataforma elegida. Configurar Dominio y HTTPS: Compra un nombre de dominio (si no tienes uno). Configura los registros DNS para que apunten a tu servidor/plataforma de hosting. Obtén e instala un certificado SSL/TLS (Let's Encrypt ofrece certificados gratuitos) para habilitar HTTPS y asegurar la conexión. Muchos PaaS lo gestionan automáticamente. Monitorización Básica: Revisa los logs después del despliegue para asegurarte de que todo arranca correctamente. Fase 6: Mantenimiento y Escalado Mantén tu aplicación funcionando y mejorando. Monitorización y Logging: Configura herramientas para rastrear errores en tiempo real (Sentry, Rollbar). Monitoriza el rendimiento y la disponibilidad (UptimeRobot, Datadog, New Relic, Prometheus/Grafana). Centraliza los logs de tu aplicación (p.ej., usando ELK stack, Datadog Logs, CloudWatch Logs). Copias de Seguridad (Backups): Configura copias de seguridad regulares y automáticas de tu base de datos. Actualizaciones de Seguridad y Dependencias: Mantén actualizados el sistema operativo, el lenguaje, los frameworks y las librerías para corregir vulnerabilidades. Usa herramientas como npm audit o dependabot (GitHub). Optimización del Rendimiento: Identifica cuellos de botella (consultas lentas a la base de datos, código ineficiente). Optimiza consultas (añade índices a la base de datos). Implementa caché (Redis, Memcached) para datos accedidos frecuentemente. Usa una CDN (Content Delivery Network) como Cloudflare o AWS CloudFront para servir activos estáticos (imágenes, CSS, JS) más rápido. Escalado: Vertical: Aumentar los recursos del servidor actual (CPU, RAM). Horizontal: Añadir más instancias de tu aplicación (servidores) y usar un balanceador de carga para distribuir el tráfico entre ellas. Escalado de Base de Datos: Réplicas de lectura, sharding (particionar datos). Desarrollo Continuo: Añade nuevas funcionalidades basadas en el feedback de los usuarios y las necesidades del negocio, siguiendo el ciclo de desarrollo (Fases 2-5).