Skip to content
OverviewSolutions
6
Comments
9
Louisan TCHITOULA
@LTOssian

All comments

  • Louisan TCHITOULA•170
    @LTOssianPosted about 1 year ago

    Hello ! Good job on the integration, it looks pixel perfect. 🥳

    My observation

    You application does not work because of a small mistake that I found in your code.

    Inside the index.js, you are looking to retrieve the data of a single user, however you are user the wrong URL request.

    Currently you have

    GET users/${username} (line 62)

    It should be

    GET user/${username}

    Here is the GitHub documentation that covers this.

    Now your application should work correctly and make the right request.

    I hope this was helpful ! 🤓

    0
  • Adriano•38,390
    @AdrianoEscaraboteSubmitted about 1 year ago

    👨‍💻 Hello everyone!

    This was my second full-stack project, and I'm thrilled with the outcome. Throughout the development process, I learned some new technologies, which was a bit challenging, but I believe I did a good job.

    Technologies used:

    Front-end:

    • Angular
    • Typescript
    • TailwindCSS
    • Ngrx
    • Jasmine

    Back-end:

    • Node
    • Typescript
    • Express
    • MongoDB

    Concepts that are shaping backend architecture:

    • SOLID
    • Dependency Injection
    • Repository Pattern

    If you have any suggestions for code improvements, please feel free to share!

    Thanks! 😊

    Entertainment web app w/ (Angular + Node + Typescript) 👨‍💻

    1
    Louisan TCHITOULA•170
    @LTOssianPosted about 1 year ago

    Incredible work Adriano ! This is a very impressive solution, especially regarding the handmade authentication.

    One observation

    I noticed in your home page that on within your ngFor directive you are not using a trackBy function to allow Angular to track each item. Thus when clicking on the bookmark button, every movie card is reloaded !

    The trackBy function is used to improve performance by tracking which unique item has changed instead of refreshing all of the items from the loop.

    If you have experience with react, it does the same improvement as giving a unique key to a returned JSX from a map().

    How to fix this ?

    Inside item-list.component.html

    Currently you have something like this :

    <li *ngFor="let item of items"> {item.name} </li>

    You can apply the trackBy like so :

    <li *ngFor="let item of items; trackBy: trackByItem">{item.name}</li>

    trackByItem is a method that has to be declared within your component, and takes in the loop index and the item value associated, then returns a unique value. Here is an example :

    Inside item-list.component.ts

    /**
* returns a unique ID for Angular 
* to compare accurately what item has changed
*/
public trackByItem(index: number, item: Item) {
   return item.id
}

    You can implement this for every ngFor that iterates through values that are dynamic and can be changed by some event action (i.e: when showBookmarkedImg change from false to true :) ) and it is a good practice overall. Hope this helps ! Here is the official documentation on this

    Marked as helpful
    0
  • Louisan TCHITOULA•170
    @LTOssianPosted about 1 year ago

    Hello Khalid, congratulations on your solution !

    My observation

    I see that your left and right sides are not of the same height. Thus making both sides look unaligned.

    My suggestion

    Since you've added the property height: 500px to the class .left, you could do the same to the class .image

    0
  • Taqib•390
    @taqhSubmitted over 1 year ago

    👋Hey there here's my solution for this challenge.

    This turned out to be more complicated than I expected but I learnt a lot along the way.

    Some things I learnt:

    • working with json
    • manipulating nested data
    • some new array methods
    • I learnt to use tailwind (and how its darkmode works)
    • React Context / Reducers

    Working features

    • creating, updating, deleting comments
    • replying comments
    • replying to a reply
    • save and persist state with local storage
    • get relative time from when comment was made

    Hardest part of this for me was dealing the nesting of objects especially replying to a reply

    Some issues with current implementation:

    • The voting logic is proving to be a bit tricky and I'm still working on it.

    Please feel free to go through my code and give any criticisms to improve my code || tips to solve my current issues

    Interactive comments section with dark theme and timestamps

    1
    Louisan TCHITOULA•170
    @LTOssianPosted over 1 year ago

    Hey, looks awesome congrats !

    Just wanted to point out a little bug which allows me to add (or remove) a comment's score indefinitely.

    I think the issue comes from your handleVote logic in Vote.jsx, you should separate downvote & upvote in two separate if-statement. Otherwise I can upvote while voteTries is at 1 and set voteTries to 0 then downvote while voteTries is at 0, which will add +1 to previousVote and set VoteTries to 1 and finaly I can repeat from there.

    Cheers, Louisan

    0
  • AnjaAlber•20
    @AnjaAlberSubmitted about 2 years ago

    I love the frontend mentor challenges. They really help me to focus on new skills, without thinking too much of what to build and how to style it.

    In this challenge I was testing react with typescript.

    I´m wondering why my app is not always showing up a new advice on click? Do you know why and how I can change that? Do you have other feedback or tips on best practices?

    React Typescript Solution for the advice generator app

    1
    Louisan TCHITOULA•170
    @LTOssianPosted about 2 years ago

    Hi Anjaalber !

    I asked myself the same thing when I finished this challenge, it seems when you click faster than the API fetching process nothing happens. I haven't applied this myself yet but maybe creating an array which stores a few advices in advance would make the experience smoother.

    Your solution looks great !

    0
  • Louisan TCHITOULA•170
    @LTOssianPosted over 2 years ago

    Hi ! This looks great and your script is well built. You might have forgotten to transform de cursor while hovering your buttons, here is the simple fix you can add to your code .value-button:hover {cursor: pointer;} and .submit-button:hover {cursor: pointer;}. Kind regards,

    1
  • Louisan TCHITOULA•170
    @LTOssianPosted over 2 years ago

    Hi ! I liked your solution a lot, especially because your script is very easy to comprehend.

    Regarding accessibility issues I suggest adding a main element around both sections and at least have one <h1> for screen readers to know where to go first. It is good practice.

    You can check my solution here as well.

    Kind regards,

    Marked as helpful
    0
  • Louisan TCHITOULA•170
    @LTOssianPosted over 2 years ago

    Looks amazing ! Not much to improve except :

    • adding a cursor: pointer; when hover the image, then the design will be perfect.
    • fix your accessibility issue by using an h1 tag in your HTML (and make sure to fix its style in the css aswell).

    BTW you can check my solution here !

    0
  • Louisan TCHITOULA•170
    @LTOssianPosted over 2 years ago

    In order to fix your accessibility issue you should implement a level one heading element. I suggest replacing the h2 tag with an h1 (always use them in order ! then change their style in the css).

    You can also improve some positionning details ; I suggest putting your class"="line" div and you class="avatar" div inside the main landmark and keep the class="attribution" div in the footer out of the card. Also make sure your main is well centered, with a fixed width and height and equally spaced on each of the 4 sides of the card. (we can see it is unequal around the image for example!)

    Marked as helpful
    0