
Submitted over 1 year ago
Time tracking dashboard (Next.js + TypeScript + Tailwind CSS + ESLint)
#accessibility#next#tailwind-css#typescript#pwa
@MelvinAguilar
Design comparison
SolutionDesign
Solution retrospective
Hi there π, Iβm Melvin, and this is my solution for this challenge. π
π Features:
- Tabbed interfaces. π
- Controllable using arrow keys and Tab. β¨οΈ
- Tooltip that allows copying statistics. π
- Resemblance with the original design. π¨
- Progressive Web App (PWA) support. π±π
- Small animations with Framer motion. π¬
- No errors or warnings using ESLint (Airbnb style guide). βοΈ
- Client-side fetching with SWR to simulate an API. π
- Custom hooks. π£
- Tested with the TalkBack screen reader on mobile. π±
π οΈ Built With:
- Nextjs 13.5.4. βοΈ
- TypeScript. π
- TailwindCSS. π¨
- Framer-motion. π¬
- ESLint (Airbnb style guide). π¦
β Question:
Not very proud of the prop drilling in the solution. Any recommendations to avoid it? I've tried using the Context API to reduce it, but I don't see much difference.
Any suggestions on how I can improve and reduce unnecessary code are welcome!
Thank you. πβοΈ
Community feedback
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord