User's public profile page
- Linguagem predominante
- TypeScript
- Estrelas
- 6
- Forks
- 3
- Merge médio
- 3d 17h
- PRs com merge (30d)
- 15
Descrição
## Summary
Implement a public user profile page for the PutWiki frontend. This page serves as a read only view of a user, displaying only non-sensitive information (nickname, joined date). It must be accessible by a user-friendly URL.
## Acceptance criteria
- [ ] The page is accessible via a user-friendly URL structure (e.g. `/user/{nickname}` if nicknames are unique).
- [ ] The page successfully renders the user's nickname, and joined date (formatted in readable way, e.g. joined June 2026).
- [ ] The profile layout adapts correctly to both mobile and desktop screens.
- [ ] If the data is being fetched, display a loading skeleton. If there are errors display error components. Use suspense and error boundaries.
- [ ] Implement mocked API calls (functions returning a stubbed user object) that can easily be swapped for a real API call later (use MSW). Contact with backend devs for API details
## Notes
- See figma designs for a reference about profile layout: ([1](https://www.figma.com/design/JANE25uq5sdrAuEM3viKVa/Untitled?node-id=19-2&t=F8jrTfz2ZpcUnPqg-0), [2](https://www.figma.com/design/0kVFdH1uo5CECYEVP1jHkg/AKAI-PROJECT?node-id=0-1&p=f&t=CbXxBzKKHDynCPzZ-0)). Utilize existing color palette, typography and avoid hardcoding tailwind styles (e.g. not using tailwind design tokens, but absolute units). Try to compose components starting from shadcn.
- Because this is a UI-centric page please add a storybook story for this page showing the loading, and error states and separate stories for custom components with logic that you made. Unit tests (vitest, react testing library) are recommended for ensuring that for example date formatting logic works correctly.
**I highly recommend implementing it in parts** and submitting separate pull requests to make code review easier.
Guia de contribuição
Direção de pesquisa
Start by reviewing the linked Figma designs and the existing PutWiki frontend structure; coordinate with backend developers on API details. Use MSW for the stubbed user data and add Storybook stories for the page, loading state, error state, and custom logical components. Done means the responsive public URL renders nickname and a readable joined date with loading and error handling.
Escrita pelo modelo de indexação a partir do texto da issue.
Avaliação
- Stack de tecnologia
- react, storybook, typescript
- Domínio
- design, frontend, testing
- Tipo de issue
- Funcionalidade
- Dificuldade
- 5/5
- Tempo estimado
- Mais de uma semana
- Status de atividade
- Pouca atividade
- Clareza
- Razoavelmente clara
- Facilidade para iniciantes
- 35/100