Skip to content
OverviewSolutions
7
Comments
13
Matt West
@matt-o-west

All comments

  • Pablo Dettori•740
    @p4bloxxSubmitted 10 months ago

    Hi everyone;) With this challenge I continued my training regarding the use of APIs and the management of incoming data. Overall I didn't have any major problems, it was a good workout.

    If you want to tell me your opinion about the solution, and if you think there is something to improve or you want to give me some advice or feedback, I'm here ;)

    Github user search app (Html,Css(Sass),Js,API)

    1
    Matt West•440
    @matt-o-westPosted 10 months ago

    Hello! Thank you for your submission! I have some feedback for you:

    • In your input, you've added an onclick event listener. While this is fine, it can improve the user experience (and is best practice) if you code this as form with an onsubmit. When the form is submitted, you perform the same callback function.
    • Your theme is toggling correctly, but the UI isn't updating the string label for the theme button (i.e. it always says 'Light' regardless of the current state). It should be a simple fix, adding into your toggle function to update the text inside that node when the theme toggles.
    • Responsiveness is looking good, although your placeholder text is crashing with error messages in mobile when they appear. You might need to put the error message above or below the input on mobile.

    Above all, the solution you submitted is great and you should be proud! Great work! 🎉

    Marked as helpful
    1
  • Matt West•440
    @matt-o-westPosted 10 months ago

    Hello! Thank you for submitting your solution! I have some feedback for you:

    • It looks like you're implementing this with both react and vanilla js patterns. I would recommend sticking with just one or the other, as there are some anti-patterns occurring because of the mix-matching. You shouldn't be accessing dom nodes as you are with query selectors in react, as the reason we use the tool is to create declarative and component-based ui.
    • With state variables, you really want to minimize their use as much as possible - any values you can 'derive' from the data without a state variable, you should do that. If you have a bunch of data that you want to manage in the client, you can set it as an object to a state variable and access it that way. Your code will be much cleaner and synchronous because of this! Believe me, when state variables get out of sync, react can do a lot of funky things that can be hard to track down 😅 below is a quick example I sketched out:
    const [userData, setUserData] = useState({
  url: "https://api.github.com/users/octocat",
  image: "",
  name: "",
  login: "",
  created: "",
  bio: "",
  repos: "",
  followers: "",
  following: "",
  location: "",
  website: "",
  twitter: "",
  company: ""
});

    Setting this state, you can use a function that is as simple as:

      ...prevState,
  name: "New Name"
}));
    • I'm not quite sure where the bug is occurring, but the theme doesn't not toggle on the initial click
    • Styling is responsive, but don't be afraid to add some padding especially on desktop and tablet
    • You can utilize semantic HTML landmarks in your JSX to add accessibility to the page and help users that rely on screenreaders or other features. Check out more information here.

    You're solution above all is great, and I hope you learned a lot! Keep going and happy coding 🎉

    Marked as helpful
    0
  • PoteznyMocarz•540
    @PoteznyMocarzSubmitted 10 months ago

    I made the chat too big, but it looks good in 1920x1080 resolution. Any advices are welcome 😀.

    Chat app design

    1
    Matt West•440
    @matt-o-westPosted 10 months ago

    Hello! Thank you for submitting your solution! I have some feedback for you:

    • You need some semantic HTML in your markup, such main and h1 landmarks (https://www.w3.org/WAI/ARIA/apg/patterns/landmarks/examples/main.html). Landmarks are used to define major sections of your page instead of relying on generic elements like <div> or <span>.
    • Your styling is good, but you are missing responsive styling. This can be applied easily with tailwind by using the built-in breakpoints (sm, md, lg etc.) (see docs: https://tailwindcss.com/docs/screens), or you can configure your own breakpoints via the tailwind.config file.

    Your solution is very nice, great job! 🎉

    Marked as helpful
    0
  • Francesca Muraru•140
    @frrannSubmitted 10 months ago

    Hey everyone! 😊

    Excited to share my frontend-focused full-stack app—a product feedback application built with React and Supabase. This project posed a rewarding challenge, allowing me to apply and reinforce my recent React knowledge.

    I took on the challenge of implementing authentication features like login, sign-up, and logout to enhance security. Access to the app is now restricted to authenticated users.

    Feel free to check it out and let me know what you think. Test account: email: [email protected] password: 12345678 Your feedback is much appreciated.

    Happy coding!

    Product feedback app using React and Supabase

    2
    Matt West•440
    @matt-o-westPosted 10 months ago

    Hello! Thank you for submitting this very nice solution. I have some feedback for you:

    • Something is going on with your auth flow, your error handling is making it so sometimes the user can't register, and javascript error messages are shown to the user (who will think the app is talking to them in a different language that looks like English, but isn't!). I'm not familiar with supabase, but looking at the code I think you need logic to 1) check whether the profile has already been registered, 2) validate the user inputs, 3) handle errors being returned from the server-side logic/database.
    • Profile images for the users aren't loading, you may need to check the paths you're using.
    • Nice responsiveness, I really appreciate the styling in different viewports.

    The CRUD operations are working nicely, as are the filtering/tagging functionalities. Overall, great work! 🎉

    Marked as helpful
    0
  • Maria Ushakova•150
    @Mariia22Submitted 10 months ago
    1. What did you find difficult while building the project?

    I decided to use new technologies for me like Tailwind-css and Redux-toolkit. It was a challenge to me to understand the principles of these tools.

    1. Which areas of your code are you unsure of?

    Authorization module. I tried to do JWT authorization, but my server part is not working properly. While I put the plugs in the app.

    1. Do you have any questions about best practices?

    How to successfully use the Tailwind-css in projects? Any ideas or article's links

    The multi-page entertainment app (React, Typescript, Redux-toolkit)

    1
    Matt West•440
    @matt-o-westPosted 10 months ago

    Thank you for submitting your code! Let me provide you with some feedback:

    • You need a max width on the scrollable bar (Trending section) at the top of the main page, right now it extends past the rest of the content in larger viewports, leading to a poor ux in those formats.
    • I believe in your reducers, you shouldn't need to perform immutable operations, as redux runs with immer. So, you shouldn't need to use the spread operator, you should just be able to change the property, push an item to an array etc. You don't have to use it like that, but it is a paradigm that makes redux useful and reducers boilerplate.
    • Your tailwind use is pretty good, if you want to get better you can check out free Youtube courses like this one from Dave Gray (https://www.youtube.com/watch?v=lCxcTsOHrjo), or check out the official docs, which are very comprehensive.
    • I would recommend binding demo credentials to your login, so people don't need to create a new account if they don't want to (save some clicks).

    This is a complex project, and a great solution, you should be proud!

    Marked as helpful
    1
  • Alamin•2,000
    @CodeWithAlaminSubmitted over 1 year ago

    Hello guys!! I had an amazing time building this nested comment section using Vanilla JS. It took longer than I thought, but I'm happy with the outcome. Implementing the MVC and Pub-Sub patterns was both challenging and rewarding, allowing me to create an organized codebase. I also utilized Local Storage for persistence. It was a great project to put my JavaScript skills to the test and create a full-stack CRUD app. Any suggestion from you, would be really appreciated 😊

    Key Features

    • Create, Read, Update, and Delete comments and replies.
    • Upvote and downvote comments.
    • Bonus: Utilized localStorage to save the current state in the browser and persist when the browser is refreshed.
    • Bonus: Instead of using the createdAt strings from the data.json file, I have used timestamps and dynamically track the time since the comment or reply was posted.
    • Bonus: Dark mode toggler.

    Nested Comment Section: Built with Vanilla JS, MVC & Pub-Sub Pattern💬

    1
    Matt West•440
    @matt-o-westPosted over 1 year ago

    Hello! Very nice solution, and impressive this is all vanilla JS. One item:

    • The voting isn't quite working like it should, you can vote once, and presumably the counter should disable, but the user is able to vote again. The second vote increments/decrements by two instead of one, as well.

    Overall great work!

    0
  • Matt West•440
    @matt-o-westPosted about 2 years ago

    Hello! Nice job finishing this! A couple suggestions for you:

    • when you have a layout like this, grid is going to make your life a lot easier; currently you're using flex so depending on the users viewport the layout gets wonky (although it looks good in your screenshot); for instance, in my full screen the cards are 5 in the top row 1 on the bottom row
    • you have separate classes for each card, but you really only need one card class and then id attributes for each type of card, that will drastically reduce the amount of CSS you need to write if you apply the principle (specificity) everywhere
    • I would try writing media queries for your tablet/mobile layouts and see how polished you can get them, maybe on your next project see how clean you can get every type of layout. It's hard!
    • Next project (or if you want to improve this one), see if you can import and manipulate the JSON data provided, it will give you good practice display data and working with objects

    Hope this helps!

    Marked as helpful
    1
  • Matt West•440
    @matt-o-westPosted about 2 years ago

    It's looking great! Really clean, only issues I see is that you can't search with an enter key press and the responsive layouts for mobile and tablet aren't working (at least on my dev tools). Minor nitpicks, the theme toggle is probably a tad slow and the input field is a little close to the search icon, and the icon should probably have an 'aria-hidden="true"' attribute. Nice job!

    Marked as helpful
    0
  • Reymart Vigo•960
    @reymartvigoSubmitted about 2 years ago

    Hi!, I built this using scss , i'm not sure if implemented it correctly since it was my first time using it . If not what should i do to implement my scss correctly, feel free to give feedback. Thank You :)

    Tip Calculator

    1
    Matt West•440
    @matt-o-westPosted about 2 years ago

    Looks good! As far as I can tell your javascript is working as intended - peeking at the code, it looks like you're using var to declare some variables, just a reminder that this is deprecated and will hoist your variables. The only thing I would nitpick is your tablet and mobile responsive layouts, they are usable but you could tweak them so the user doesn't need to scroll, and so that the spacing is reduced between elements/font size is reduced etc. Great job, hope this helps!

    Marked as helpful
    0
  • Matt West•440
    @matt-o-westPosted about 2 years ago

    Looks really clean! At a glance I don't see any major issues. The only minor nitpicks I can find are that the search icon should probably have aria-hidden='true' on it, and that in your tablet layout the search bar placeholder text is a little large (larger than the username for example) so you could bump that down. Great job!

    Marked as helpful
    0
  • Matt West•440
    @matt-o-westPosted about 2 years ago

    Hello! Your layout is very nice, and the page looks responsive on all devices, which is great! A couple issues that I see:

    • Your input field is getting cut off on desktop (it's running short of the wrapper)
    • I can see the theme context is built into the project with react dev tools (and the screenshot shows this as well), but the theme toggle isn't working
    • Your api call is working, but something looks to be off with your user state (problem is probably in Githubsearch.tsx), as whenever I enter a username, it brings me to the user briefly before reverting back to the octocat user
    • The search icon should probably have 'aria-hidden="true"' on it so the screenreader doesn't read it

    Hope this helps!

    Marked as helpful
    1
  • Matt West•440
    @matt-o-westPosted about 2 years ago

    It looks really good! I like your tablet and mobile designs, they are really clean and I'm going to try to learn from you on that. For a full screen layout, the background image isn't covering the screen completely, and your planets are pushing your cards out of the screen, so maybe the images could be scaled and your cards fixed. Nice job!!

    Marked as helpful
    1