P
@markuslewinSubmitted 2 months ago
Latest solutions
No solutions submitted yet.Latest comments
- @asanalievPosted 2 months ago
Hi Markus,
I rescanned your project and see the issue has been fixed.
Yes, the rules might be too strict sometimes. We definitely should make them more useful, than annoying.
Regarding the alt props. This is static code analysis. Not that smart yet to handle dynamic content. Probably, some issues can be ignored as "false positives".
By the way, you have a lot completed project in your repo. Keep doing great work!
-Askat
0 - P@Theosaurus-RexSubmitted 2 months agoWhat are you most proud of, and what would you do differently next time?
I'm pretty happy with this solution overall. I think the responsiveness is pretty spot on, and I'm happy with how I handled the changing layout of the image on mobile versus desktop.
Next time I'll be double checking the figma a lot more closely now that I have pro, as some of the actual font sizes in design seemed to differ from those in the style guide.
What challenges did you encounter, and how did you overcome them?I initially wasn't sure how to style the list markers independently of the text inside a list item, but doing some research online was able to find out that there is a pseudoselector for this,
What specific areas of your project would you like help with?li::markerIf you have any suggestions for how I could improve my tailwind config for readability or better developer experience, let me know! This is something I'm still getting a feel for.
@asanalievPosted 2 months agoHi Theo,
The tab "Why this is an issue" on the issue page contains tips with code examples:
(1) No issue will be raised on <table> used for layout purpose, i.e. when it contains a role attribute set to
presentationornone.<table role="presentation"> <tr> ... </tr> </table>(2) No issue will be raised on <table> containing an
aria-hiddenattribute set totrue.<table aria-hidden="true">Regarding
alt. Redundant because words "image" or "photo" inaltwouldn't add any value to the description, since the screen reader does that forimgtag already. A quote from the rule (from "Why this is an issue" tab):If the alt attribute includes words like "image", "picture", or "photo", it leads to redundancy as the screen reader would repeat "image". For instance, an alt attribute like "image of a sunrise" would be read as "Image, image of a sunrise", unnecessarily repeating "image".
If accessibility of interfaces is important, I would not suggest leaving
altempty.Hope that helps, Askat
0 - P@sophia-seeSubmitted 2 months ago@asanalievPosted 2 months ago
Hi Sophia,
Great job!
I checked your solution on PulseLet (web app testing service), and don't see any issues with responsive design. Good quality!
However, there are some issues in the code (6 in total). For example: using divs as interactive elements, props not marked as read-only.
Details can be found here: https://pulselet.com/projects/112.
Again - good job!
Cheers, Askat
Marked as helpful1 - @ChamuMutezvaSubmitted 2 months agoWhat are you most proud of, and what would you do differently next time?
Personal Finance Dashboard
- Created using NextJs 14 and features several features which includes some of those listed below.
- used Server actions and server components to fetch data from the database
Test Data
you can test using the following details
email:
user@nextmail.compassword: 123456Pages
Landing Page
- The general landing page that can be viewed on
https://personal-finance-dashboard-two.vercel.app/. The page has a link element to the login form.
Login Page
- users should login using an email and password to view the dashboard. Upon authentication the user will be directed to the Dashboard page. The link from the Landing page , will take you to the Login page where the url will be
https://personal-finance-dashboard-two.vercel.app/login. The page has 3 options which you can follow:
- Fill in with right credentials and press the
Loginbutton to proceed to the Dashboard page - If you have forgotten your credentials , use the
forgot passwordoption to recover your login details. This function is still under construction - hence it is work in progress. - Select the
Signupbutton , so that you can submit your details.
Signup Page
- Sign up with your username , email and password . These will be saved in the database - use them to Login in to the Dashboard
Forgot Password Page
- Work in progress...
Dashboard Pages
- The Dashboard has 5 pages and can only be viewed upon a successful authentication.
Features
Dark and Light Mode
- with NextJs and Shadcn , adding the Dark mode theme is a walk in the park. This is well explained here nextjs dark mode
- First , install next-themes with
pnpm add next-themes - Create a theme provider
- Wrap your root layout
Tables
- used Shadcn Data table component and utilised TanStack Table for the logic, state and processing for UI elements and interactions. TanStack table has features that include sorting and filtering
Chart
- another important component which comes with Shadcn is the Charts. The Chart in the Budget page was created using the Pie Chart from Shadcn with a little fix to bring it closer to the design.
Bugs
Dashboard not in sync with address bar on successful login
The issue I am facing is as follows: The project has a dashboard that can be viewed after authentication. The auth is working fine but probably the bug is somewhere there. When the correct details has been entered , you will be taken to the Dashboard page and that's ok. While the site has navigated to the Dashboard page, the address bar will still be pointing to
http://localhost:3000/logininstead ofhttp://localhost:3000/dashboardIf I want to close the site with the close button on this instance, the site will not close - I guess this is because the address is pointing to the destination page - to close it , I need to navigate to other pages first.
Pages to look at for debugging:
- Login-form.tsx - calls the server function authenticate - the form uses the server action method.
- the authenticate function is in the action.ts file - lines 83 - 152
- when the data is correct the createSession function is called from the session.ts file
// helper function for creating a new session export async function createSession(userId: string) { const expires = new Date(Date.now() + 60 * 60 * 1000); const session = await encrypt({ userId, expires }); cookies().set("session", session, { httpOnly: true, secure: true, expires: expires, sameSite: "lax", path: "/", }); redirect("/dashboard"); }at this point , i expect the address bar to have the correct path
@asanalievPosted 2 months agoHi Chamu,
Great job of Guru level!
I checked your solution on PulseLet (web app testing service), and don't see any issues with responsive design. Good quality!
However, there are some issues in the code (64 in total). For example: leftover commented out code and unused imports, accessibility issues, using array index as keys, etc.
Details can be found here: https://pulselet.com/projects/110.
Again - good job!
Cheers, Askat
0 - P@jeffgrahamcodesSubmitted 2 months agoWhat are you most proud of, and what would you do differently next time?
I’m most proud of how well the layout aligns with the design mockup, especially the clean and structured use of CSS grid and flexbox for responsive layouts. The use of semantic HTML, such as <main>, <section>, and <footer>, ensures accessibility and makes the content meaningful to both users and assistive technologies. The design system, with centralized CSS variables for colors, typography, and spacing, simplifies maintenance and ensures consistency across the page. The visual hierarchy, especially the use of typography presets for headings and text, is another highlight of this solution.
Next time, I’d focus on improving accessibility further by adding meaningful alt text to all images to ensure better support for screen readers. Additionally, refining the layout transitions for intermediate screen sizes, like tablets, could help bridge the gap between mobile and desktop views more seamlessly. Exploring more engaging hover and focus states for buttons could also enhance interactivity and provide a richer user experience.
What challenges did you encounter, and how did you overcome them?One challenge was ensuring the layout remained visually balanced across different screen sizes, particularly with the hero section and image collage. The solution was to use max-width constraints and padding adjustments to maintain proper spacing and alignment, particularly in wide viewports. Another challenge was implementing the background overlay for the footer section while keeping the content legible. This was resolved by using a semi-transparent overlay and layering it with precise positioning in the CSS. These adjustments highlight the importance of iterative design testing and fine-tuning responsive styles to achieve the desired outcome.
What specific areas of your project would you like help with?responsive images
@asanalievPosted 2 months agoHi Jeff,
Great job!
I checked your solution on PulseLet (web app testing service), and don't see any issues with responsive design. Good quality done!
In the code, a minor single issue only: leftover commented out code. Beside that, no issues.
Details can be found here: https://pulselet.com/projects/109.
Again - good job!
Cheers, Askat
0 - P@Theosaurus-RexSubmitted 2 months agoWhat are you most proud of, and what would you do differently next time?
I'm pretty happy with this solution overall. I think the responsiveness is pretty spot on, and I'm happy with how I handled the changing layout of the image on mobile versus desktop.
Next time I'll be double checking the figma a lot more closely now that I have pro, as some of the actual font sizes in design seemed to differ from those in the style guide.
What challenges did you encounter, and how did you overcome them?I initially wasn't sure how to style the list markers independently of the text inside a list item, but doing some research online was able to find out that there is a pseudoselector for this,
What specific areas of your project would you like help with?li::markerIf you have any suggestions for how I could improve my tailwind config for readability or better developer experience, let me know! This is something I'm still getting a feel for.
@asanalievPosted 2 months agoHi Theo,
Great job!
I checked your solution on PulseLet (web app testing service), and don't see any issues with responsive design. Good quality done!
But there are some issues in the code. For example: redundant alternate description for image, missing <th> for table (important for accessibility!), duplicate selectors in css.
Details can be found here: https://pulselet.com/projects/108.
Cheers, Askat
0
