Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

All comments

  • Chris• 270

    @chriscodes17

    Posted

    Well done on getting the design right! The application look great.

    I found an issue with the job filtering, if you press any of the job filters multiple times they will show up multiple times on the 'filter selection' at the top. A way to fix this is to check if that job filter already exists at the top such as using Array.find() method and if it does exist then when a filter that already exists is clicked then you can either stop the function from fully running or however you have it setup.

    I hope that helps! Thanks

    Marked as helpful

    0
  • Chris• 270

    @chriscodes17

    Posted

    Well done on the design and getting it matching! The app functions well and the user experience is also good.

    Looking at your index.js code, there is a lot of repeating code for when you are fetching. What I recommend to do in this situation is to create a function for fetching and creating a function for rendering the advice data. These functions will handle all your fetching and adding the necessary data to the DOM. It can look something like this:

    const fetchAdvice = () => {
fetch('https://api.adviceslip.com/advice')
.then((response) => {
return response.json();
})
.then((data) => {
return render(data);
})
.catch(function (error) {
console.log('Error fetching advice:', error);
});
};

const render = (data) => {
document.getElementById('advice-content').innerHTML = data.slip.advice;
document.getElementById('advice-number').innerHTML = data.slip.id;
};

document.getElementById("advice-button").addEventListener("click", fetchAdvice)

fetchAdvice() //called on initial page render

    As you can see with both the functions, there is more organization of code and it makes the code reusable with using those functions. This is just a tip on how to make your code more reusable and it will come in handy when you are dealing with large amounts of data or specific functionalities that an app requires.

    Good job overall!

    Marked as helpful

    1
  • Guilherme Lopes• 350

    @gguilhermelopes

    Submitted

    I started this project in order to practice mainly Styled-Components, since I've been focusing on Tailwind. But it got me so thrilled I've decided to make this a Full Stack project. Used Postgres as a database (with Supabase) and Prisma as a ORM. Next makes small Full Stack projects easier with its development environment, so it was my first choice. And the Styled-Components made the theming part much simpler. Any comments or advices would be great!

    Todo app with NextJS (Fullstack app)

    2

    Chris• 270

    @chriscodes17

    Posted

    Project looks awesome! Good job on the design and app functionality.

    I have one comment on how the app handles it's data. I noticed whenever I add, delete, or change the filter options, the app loads and sends a request to the server. On the network tab I can see that for filtering the todo's it is making GET requests to the server and fetching the tasks every time.

    I think a more efficient approach would be add state to the app, when a users adds, completes or deletes a todo you can update the state on the app and send data to the server at the same time, this will eliminate the need for the 'loading' every time a user does one of those actions. Also, when a user filters the todo's you can just filter through the app's state and eliminate the need for fetching from the server.

    These small fixes can increase the users experience and make the app quicker. I hope you find this information helpful and keep up the good work!

    Happy coding! :)

    Marked as helpful

    0