Skip to content

Commit f8d9d3f

Browse files
AndreaGriffiths11AndreaGriffiths11
authored
Merge pull request #7 from AndreaGriffiths11/copilot/create-variety-of-improvements
Add 20 comprehensive issue templates with automation tooling
2 parents ca78ec3 + 8cb0755 commit f8d9d3f

24 files changed

Lines changed: 6264 additions & 0 deletions

‎.github/ISSUES/01-unit-tests-useFetchStories.md‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
---
2+
title: Add unit tests for useFetchStories hook
3+
labels: testing, enhancement, good-first-issue
4+
---
5+
6+
## Description
7+
8+
Create comprehensive unit tests for the `useFetchStories` custom hook to test caching logic, error handling, and API response handling.
9+
10+
## Background
11+
12+
Currently, the project README mentions Jest and React Testing Library but no test files exist in the repository. The `useFetchStories` hook has complex caching logic with ETag support and localStorage fallback that needs thorough testing to ensure reliability.
13+
14+
## Requirements
15+
16+
Tests should cover the following scenarios:
17+
18+
1. **Successful API fetch**
19+
- Fetches stories from DEV.to API successfully
20+
- Sorts stories by published date
21+
- Updates state correctly
22+
23+
2. **Cache hit scenario**
24+
- Returns cached data when cache is valid (within 5 minutes)
25+
- Doesn't make API call when cache is fresh
26+
27+
3. **Cache miss scenario**
28+
- Makes API call when cache is expired
29+
- Updates cache with new data
30+
31+
4. **304 Not Modified response**
32+
- Handles ETag-based cache validation
33+
- Uses cached data when server returns 304
34+
35+
5. **Error states**
36+
- Handles API errors gracefully
37+
- Sets appropriate error messages
38+
- Falls back to expired cache when available
39+
40+
6. **Expired cache fallback**
41+
- Uses stale cache data when API fails
42+
- Shows error message but displays cached content
43+
44+
## Technical Details
45+
46+
- File location: `hooks/useFetchStories.ts`
47+
- Test framework: Jest
48+
- Testing library: React Testing Library / React Hooks Testing Library
49+
- Mock localStorage and fetch API
50+
51+
## Acceptance Criteria
52+
53+
- [ ] Test file created at `hooks/useFetchStories.test.ts`
54+
- [ ] All 6 scenarios covered with tests
55+
- [ ] Tests pass successfully
56+
- [ ] Code coverage for the hook is above 90%
57+
- [ ] Tests are well-documented with clear descriptions
58+
59+
## Related Files
60+
61+
- `hooks/useFetchStories.ts` - Hook to be tested
62+
- `types/index.ts` - Type definitions used by the hook

‎.github/ISSUES/02-e2e-tests-playwright.md‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
---
2+
title: Add comprehensive E2E tests with Playwright
3+
labels: testing, enhancement, infrastructure
4+
---
5+
6+
## Description
7+
8+
Implement end-to-end testing suite using Playwright to test critical user flows and prevent regressions.
9+
10+
## Background
11+
12+
Currently, no E2E tests exist despite having critical user flows like story navigation, mini-game interaction, and API error handling. E2E tests would ensure quality before deployment and catch integration issues early.
13+
14+
## Requirements
15+
16+
### Test Coverage
17+
18+
1. **Story Navigation Flow**
19+
- Load application and verify stories are displayed
20+
- Navigate forward through stories
21+
- Navigate backward through stories
22+
- Verify story counter updates correctly
23+
24+
2. **Mini-Game Interaction**
25+
- Toggle mini-game visibility
26+
- Start the game
27+
- Use arrow keys to move player
28+
- Verify collision detection
29+
- Check score updates
30+
31+
3. **API Error Handling**
32+
- Mock API failures
33+
- Verify error messages are displayed
34+
- Verify fallback to cached data works
35+
36+
4. **Caching Behavior**
37+
- Verify localStorage caching
38+
- Test cache expiration
39+
- Test ETag-based validation
40+
41+
5. **Accessibility Features**
42+
- Test keyboard navigation
43+
- Verify ARIA labels
44+
- Test focus management
45+
46+
6. **Responsive Design**
47+
- Test on mobile viewport
48+
- Test on tablet viewport
49+
- Test on desktop viewport
50+
51+
## Technical Details
52+
53+
- Install Playwright: `npm install -D @playwright/test`
54+
- Create test configuration: `playwright.config.ts`
55+
- Create test directory: `e2e/` or `tests/e2e/`
56+
- Add script to package.json: `"test:e2e": "playwright test"`
57+
58+
## Acceptance Criteria
59+
60+
- [ ] Playwright installed and configured
61+
- [ ] All 6 test categories implemented
62+
- [ ] Tests pass on Chromium, Firefox, and WebKit
63+
- [ ] GitHub Actions workflow includes E2E tests
64+
- [ ] Test reports generated and accessible
65+
- [ ] README updated with testing instructions
66+
67+
## CI/CD Integration
68+
69+
Add to `.github/workflows/nextjs.yml`:
70+
```yaml
71+
- name: Install Playwright Browsers
72+
run: npx playwright install --with-deps
73+
74+
- name: Run E2E tests
75+
run: npm run test:e2e
76+
```
77+
78+
## Related Files
79+
80+
- `app/page.tsx` - Main page component
81+
- `components/StoryCard.tsx` - Story display component
82+
- `components/MiniGame.tsx` - Mini-game component
83+
- `hooks/useFetchStories.ts` - Data fetching logic

‎.github/ISSUES/03-loading-skeleton-storycard.md‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
---
2+
title: Add loading skeleton for StoryCard component
3+
labels: enhancement, ui/ux, performance
4+
---
5+
6+
## Description
7+
8+
Replace the simple "Loading stories..." text with an animated skeleton loader that matches the StoryCard layout to improve perceived performance.
9+
10+
## Background
11+
12+
Currently, when stories are loading, users see only plain text saying "Loading stories...". A skeleton loader provides visual feedback about the layout structure and creates a better perceived performance, making the app feel faster and more polished.
13+
14+
## Requirements
15+
16+
### Skeleton Structure
17+
18+
The skeleton should include placeholders for:
19+
1. **Header section**
20+
- Title placeholder (2-3 lines)
21+
- XP badge placeholder
22+
23+
2. **Content section**
24+
- Description placeholder (4-5 lines)
25+
26+
3. **Author section**
27+
- Avatar placeholder (circular, 48x48px)
28+
- Author name placeholder (1 line)
29+
- Username placeholder (1 line)
30+
31+
4. **Footer section**
32+
- Progress bar placeholder
33+
- Navigation buttons placeholders
34+
- Level indicator placeholder
35+
36+
### Animation
37+
38+
- Use CSS shimmer/pulse animation effect
39+
- Animation should be smooth and subtle
40+
- **Must respect `prefers-reduced-motion`** - no animation for users who prefer reduced motion
41+
42+
## Technical Details
43+
44+
**Option 1: Pure CSS Implementation**
45+
```css
46+
.skeleton {
47+
background: linear-gradient(
48+
90deg,
49+
var(--skeleton-base) 0%,
50+
var(--skeleton-highlight) 50%,
51+
var(--skeleton-base) 100%
52+
);
53+
background-size: 200% 100%;
54+
animation: shimmer 1.5s infinite;
55+
}
56+
57+
@keyframes shimmer {
58+
0% { background-position: -200% 0; }
59+
100% { background-position: 200% 0; }
60+
}
61+
62+
@media (prefers-reduced-motion: reduce) {
63+
.skeleton {
64+
animation: none;
65+
}
66+
}
67+
```
68+
69+
**Option 2: Use a library**
70+
- `react-loading-skeleton` or similar
71+
72+
## Acceptance Criteria
73+
74+
- [ ] Create `SkeletonCard` component or skeleton variant of `StoryCard`
75+
- [ ] Skeleton matches the actual `StoryCard` layout
76+
- [ ] Smooth shimmer/pulse animation implemented
77+
- [ ] Animation respects `prefers-reduced-motion`
78+
- [ ] Skeleton shown during initial load
79+
- [ ] Skeleton shown when refetching stories
80+
- [ ] Works well with dark/light themes (if theme toggle exists)
81+
- [ ] No layout shift when skeleton is replaced with actual content
82+
83+
## Design Considerations
84+
85+
- Use existing CSS variables for colors
86+
- Skeleton should be subtle, not distracting
87+
- Border radius should match actual card
88+
- Spacing should match actual card layout
89+
90+
## Related Files
91+
92+
- `components/StoryCard.tsx` - Main card component
93+
- `app/page.tsx` - Page that shows loading state
94+
- `components/StoryCard.module.css` - Card styles

‎.github/ISSUES/04-bundle-optimization-code-splitting.md‎

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
---
2+
title: Optimize bundle size and implement code splitting
3+
labels: performance, enhancement, optimization
4+
---
5+
6+
## Description
7+
8+
Analyze and optimize bundle size using next/bundle-analyzer to improve initial load time and Core Web Vitals scores.
9+
10+
## Background
11+
12+
Currently, no bundle analysis is configured, and all components load upfront. The MiniGame component, in particular, is loaded even when not used, increasing the initial bundle size unnecessarily.
13+
14+
## Requirements
15+
16+
### 1. Bundle Analysis Setup
17+
18+
Install and configure `@next/bundle-analyzer`:
19+
```bash
20+
npm install --save-dev @next/bundle-analyzer
21+
```
22+
23+
Configure in `next.config.mjs`:
24+
```javascript
25+
import bundleAnalyzer from '@next/bundle-analyzer';
26+
27+
const withBundleAnalyzer = bundleAnalyzer({
28+
enabled: process.env.ANALYZE === 'true',
29+
});
30+
31+
export default withBundleAnalyzer({
32+
// ... existing config
33+
});
34+
```
35+
36+
Add script to `package.json`:
37+
```json
38+
"analyze": "ANALYZE=true npm run build"
39+
```
40+
41+
### 2. Dynamic Imports
42+
43+
Implement dynamic imports for components that are:
44+
- Not needed on initial render
45+
- Behind user interaction
46+
- Heavy/large components
47+
48+
**Priority: MiniGame component**
49+
```tsx
50+
const MiniGame = dynamic(() => import('../components/MiniGame').then(mod => ({ default: mod.MiniGame })), {
51+
loading: () => <div>Loading game...</div>,
52+
ssr: false
53+
});
54+
```
55+
56+
### 3. Image Optimization
57+
58+
Ensure all images are properly optimized:
59+
- Use `next/image` consistently (already done for profile images)
60+
- Optimize SVG files in `/public`
61+
- Consider using WebP format where appropriate
62+
63+
### 4. Dependency Audit
64+
65+
Review and optimize dependencies:
66+
- Check for unused dependencies
67+
- Look for lighter alternatives to heavy libraries
68+
- Ensure proper tree-shaking
69+
70+
### 5. Route-Based Code Splitting
71+
72+
Verify Next.js automatic code splitting is working:
73+
- Check each route has its own bundle
74+
- Verify shared chunks are optimized
75+
76+
## Target Metrics
77+
78+
- **Initial bundle size**: < 200KB (gzipped)
79+
- **First Contentful Paint (FCP)**: < 1.8s
80+
- **Largest Contentful Paint (LCP)**: < 2.5s
81+
- **Time to Interactive (TTI)**: < 3.8s
82+
83+
## Acceptance Criteria
84+
85+
- [ ] Bundle analyzer installed and configured
86+
- [ ] Analysis script added to package.json
87+
- [ ] MiniGame component dynamically imported
88+
- [ ] Bundle analysis report generated and reviewed
89+
- [ ] Identified and removed unused dependencies (if any)
90+
- [ ] Documentation added explaining bundle optimization strategy
91+
- [ ] Performance improvements measured and documented
92+
- [ ] Core Web Vitals scores improved
93+
94+
## Implementation Steps
95+
96+
1. Install and configure bundle analyzer
97+
2. Run initial analysis to establish baseline
98+
3. Implement dynamic import for MiniGame
99+
4. Re-run analysis to measure improvement
100+
5. Identify other optimization opportunities
101+
6. Document findings and results
102+
103+
## Related Files
104+
105+
- `next.config.mjs` - Next.js configuration
106+
- `package.json` - Dependencies and scripts
107+
- `app/page.tsx` - Main page (imports MiniGame)
108+
- `components/MiniGame.tsx` - Component to be dynamically loaded
109+
110+
## Resources
111+
112+
- [Next.js Bundle Analyzer](https://www.npmjs.com/package/@next/bundle-analyzer)
113+
- [Next.js Dynamic Imports](https://nextjs.org/docs/advanced-features/dynamic-import)
114+
- [Web Vitals](https://web.dev/vitals/)

0 commit comments

Comments
 (0)