All comments

P
markus•2,620
@markuslewinSubmitted 2 months ago
Audiophile e-commerce website
#accessibility#next#react#tailwind-css#framer-motion
2
Askat•100
@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
Theo Harris•360
@Theosaurus-RexSubmitted 2 months ago
What 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, li::marker
What specific areas of your project would you like help with?
If 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.
Recipe Page Challenge
#tailwind-css#accessibility
2
Askat•100
@asanalievPosted 2 months ago
Hi 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 presentation or none.

<table role="presentation"> <tr> ... </tr> </table>

(2) No issue will be raised on <table> containing an aria-hidden attribute set to true.

<table aria-hidden="true">

Regarding alt. Redundant because words "image" or "photo" in alt wouldn't add any value to the description, since the screen reader does that for img tag 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 alt empty.

Hope that helps, Askat
0
P
sophia-see•590
@sophia-seeSubmitted 2 months ago
Mortgage Repayment Calculator using React and Tailwind CSS
#react#tailwind-css
1
Askat•100
@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 helpful
1
Chamu•13,710
@ChamuMutezvaSubmitted 2 months ago
What 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.com password: 123456

Pages

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:
1. Fill in with right credentials and press the Login button to proceed to the Dashboard page
2. If you have forgotten your credentials , use the forgot password option to recover your login details. This function is still under construction - hence it is work in progress.
3. Select the Signup button , 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
1. First , install next-themes with pnpm add next-themes
2. Create a theme provider
3. 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/login instead of http://localhost:3000/dashboard

If 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:
1. Login-form.tsx - calls the server function authenticate - the form uses the server action method.
2. the authenticate function is in the action.ts file - lines 83 - 152
3. 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
Personal Finance App - Created with NextJs
#next#shadcn#zod
3
Askat•100
@asanalievPosted 2 months ago
Hi 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
jeffgrahamcodes•250
@jeffgrahamcodesSubmitted 2 months ago
What 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
Meet landing page
1
Askat•100
@asanalievPosted 2 months ago
Hi 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
Theo Harris•360
@Theosaurus-RexSubmitted 2 months ago
What 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, li::marker
What specific areas of your project would you like help with?
If 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.
Recipe Page Challenge
#tailwind-css#accessibility
2
Askat•100
@asanalievPosted 2 months ago
Hi 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
P
markus•2,620
@markuslewinSubmitted 2 months ago
Audiophile e-commerce website
#accessibility#next#react#tailwind-css#framer-motion
2
Askat•100
@asanalievPosted 2 months ago
Hi Markus,

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 (total 66). For example: leftover commented out code blocks and TODOs, using array index as keys, conditionals returning same value for both "true" and "false", etc.

Details can be found here: https://pulselet.com/projects/107.

Cheers, Askat
Marked as helpful
0
Karol•3,100
@VillageR88Submitted 2 months ago
What are you most proud of, and what would you do differently next time?
Hello everyone!

I’m excited to share my solution to the Myteam multi-page website challenge, built using the CWrap framework.

💻 CWrap Framework GitHub Repo: GitHub Repo
📦 CWrap Framework NPM Package: NPM Package

Let me know your thoughts and feedback!
Myteam multi-page website
1
Askat•100
@asanalievPosted 2 months ago
Hi Karol,

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 (39). For example: code duplication, using for instead of for-of, using big methods with a lot if, etc.

Details can be found here: https://pulselet.com/projects/101.

Cheers, Askat
0
Ghozy•250
@Ghozy165Submitted 2 months ago
What specific areas of your project would you like help with?
comments are welcome :)
Social Links Profile
3
Askat•100
@asanalievPosted 2 months ago
Hi Ghozy,

Great job!

I checked your solution on PulseLet (web app testing service), and don't see any issues with responsive design, neither in the code. Good quality done!

Your project here: https://pulselet.com/projects/102.

Cheers, Askat
0
P
Koxone•490
@KoxoneSubmitted 2 months ago
CSS
2
Askat•100
@asanalievPosted 2 months ago
Hi Koxone,

Great job!

I checked your solution on PulseLet (web app testing service), and don't see any issues with responsive design, neither in the code. Good quality done!

Your project here: https://pulselet.com/projects/104.

Cheers, Askat
0
P
Caitlin Donahue•120
@DonahuecSubmitted 3 months ago
What are you most proud of, and what would you do differently next time?
learned some new features such as aspect-ratio, using html templates, and using properties to add a transition to a gradient.
What challenges did you encounter, and how did you overcome them?
- making the circle have the proper size while allowing it to be flexible with screen resizing: used aspect-ration and clamp
- wanted to add a transition on the button hover, ended up figuring out how by setting the transition on css custom properties instead of the background property
Results Page with CSS Variables and HTML Template
1
Askat•100
@asanalievPosted 2 months ago
Hi Caitlin,

Great job!

I check your solution on PulseLet (web app testing service), and don't see any issues with responsive design, neither in the code. Good quality done! 👍

Your project here: https://pulselet.com/projects/105

Cheers, Askat
Marked as helpful
1
P
Shahzeb Abro•410
@AbroShahzebSubmitted 3 months ago
What are you most proud of, and what would you do differently next time?
- I am proud that I tried to make this landing page as close as in given figma file.
- I am proud that I somehow managed to work with those overlapping elements.
- I am proud of the Stepper (Numbered 01, 02, 03) section I made, it was really fun as I got to try some grid techniques
What challenges did you encounter, and how did you overcome them?
- Making the overlapping elements like images and card and setting their spacings was a real challenge, but somehow managed them.
What specific areas of your project would you like help with?
- If it were you how would you approach the overlapping sections?
- How animations can be improved? As I am using scroll animations for the first time in life :)
Coffee Roasters Landing Page using React, TailwindCSS, & Framer Motion
#framer-motion#tailwind-css#react
1
Askat•100
@asanalievPosted 2 months ago
Hi Shahzeb,

Great job!

I quickly tested your project for issues. Responsive design seems fine. Can't see any issues there. You might see here: https://pulselet.com/projects/114/layouts/

A code scanner showed some issues (89 in total). Details are here: https://pulselet.com/projects/114/issues/
1
P
Trần Thành Danh•1,500
@TranDanh1122Submitted 3 months ago
What specific areas of your project would you like help with?
i just try my best welcome any idea and comment
Rest Country API /w React ⚛️, Redux, Tailwind 🎨, Axios 🌐, TypeScript
#axios#react#redux-toolkit#typescript#tailwind-css
2
Askat•100
@asanalievPosted 2 months ago
Hi @TranDanh1122,

Great job! Some minor feedbacks after quick testing.

For some layouts the header elements are too close to the borders, for example Desktop 1536x864, 1280x720.

The cards have different height for tablets.

You might see details here: https://pulselet.com/projects/103/layouts

Regarding the code, there are some issues found. For example, using array index in keys. More details: https://pulselet.com/projects/103/issues

Anyway, it is an advanced project. You did a great job! 👍
Marked as helpful
1
P
nashrulmalik•900
@nashrulmalikSubmitted 3 months ago
Interactive Rating Component
1
Askat•100
@asanalievPosted 2 months ago
Hi @nashrulmalik,

Quickly reviewed on different screens. The layout looks consistent everywhere. https://pulselet.com/projects/92/layouts

Quick code scanning found 2 issues, but nothing critical. https://pulselet.com/projects/92/issues

Overall, great job! 👍
0
Marzia Jalili•4,230
@MarziaJaliliSubmitted 3 months ago
What are you most proud of, and what would you do differently next time?
NAH...NOTHING, man!

I definitely missed more than twice with this long-term delay.
What challenges did you encounter, and how did you overcome them?
I struggled a lot with the states of React JS, but finiely I figured the logic out😎😎.
What specific areas of your project would you like help with?
I don't really know, but for some reason the transition set on buttons doesn't work🤔.

Please let me know if you find the issue out.
Newsletter Signup Form with Success Message | React JS ⚛️ & CSS 🎨
2
Askat•100
@asanalievPosted 2 months ago
Hi Marzia,

Quickly reviewed on different screens. The layout looks consistent everywhere. https://pulselet.com/projects/81/layouts

Quick code scanning found 9 issues, but nothing critical. https://pulselet.com/projects/81/issues

Overall, great job! 👍
Marked as helpful
1

Askat

All comments

Audiophile e-commerce website

Recipe Page Challenge

Mortgage Repayment Calculator using React and Tailwind CSS

Personal Finance App - Created with NextJs

Meet landing page

Recipe Page Challenge

Audiophile e-commerce website

Myteam multi-page website

Social Links Profile

CSS

Results Page with CSS Variables and HTML Template

Coffee Roasters Landing Page using React, TailwindCSS, & Framer Motion

Rest Country API /w React ⚛️, Redux, Tailwind 🎨, Axios 🌐, TypeScript

Interactive Rating Component

Newsletter Signup Form with Success Message | React JS ⚛️ & CSS 🎨