All solutions

Users are able to save their data on the browsers local storage. On initial page landing, users will have 0 files in their storage.

This project was a great way to incorporate the React Context API. The current file state had to be in 2 different components, one in the nav bar component (edit title name) and one in the editor component (main content). I decided to create a context for the markdown data which consisted of 2 states (All files and currentFile). This also made it easier to update the file title and content whenever the user made any changes (onChange). Once the user is ready to save, those changes will be implemented and saved into storage for the user.

This is also a good fullstack project, I would like to eventually make this into that with an auto save and file download features.

If you find any bugs or issues feel free to comment or tips!

Happy Coding!

This was a great challenge to work on, I enjoyed the challenge the API data provided where you have to conditionally render data and check to see if some of the required data exists for a certain search.

In this project I got to put React context API into practice, I used it for the custom dropdown component state and the app theme state. The benefit of using react context api is to pass down data without explicitly passing the props through every level. This prevents prop drilling (a goal of mine - improve data handling) and allows for efficient updates to the data. Below is the code for the dropdown menu context.

Feel free to give any tips or if there should be a corrections in my code.

Happy Coding!

Hello Everyone!

This is my first experience on handling multiple inputs for filtering, this application has 3 filter inputs. I created a function called handleFilterJobs, this function first checks to see if all inputs are empty, if so then when the search button is pressed, it will show all the jobs. The 'filtered' variable uses the filter method to apply the filtering logic based on the user inputs. The jobs that meet the search and filtering criteria are set in the filteredData state and displayed for the user.

const handleFilterJobs = (filterOptions) => {
  const { search, location, checkbox } = filterOptions;
  if (!search && !location && !checkbox) {
    setFilterData(jobs);
    return;
  }
  const filtered = jobs.filter((job) => {
    const companyMatch = job.company.toLowerCase().includes(search.toLowerCase());
    const titleMatch =
      job.position.toLowerCase().includes(search.toLowerCase()) && !companyMatch;
    const locationMatch = job.location.toLowerCase().includes(location.toLowerCase());
    const isFullTime = checkbox ? job.contract === "Full Time" : true;

    return (companyMatch || titleMatch) && (locationMatch || !location) && isFullTime;
  });
  setFilterData(filtered);
};

If there is a better or different method in filtering data based on multiple user inputs, I would be grateful to hear them as this is an important feature for many applications.

If you spot any bugs or errors on the live application feel free to give some feedback.

Happy Coding!

I am currently learning Redux JS on Fullstack Open and decided to practice it on this challenge even though the state data is very little. I enjoyed the challenge of filtering the jobs based on the filter tags and displaying the correct listings.

I am open to any feedback or issues that you encounter on the live site.

Happy coding!

I am unsure of how to setup my CSS to make the app more responsive to different device sizes, this includes when to use CSS grid and flexbox and if I should use rem for all the fonts. See the App.css file for all the CSS code. If anyone has good resources or a course that helped them in CSS, i would be interested to check it out!

I am learning React so any feedback on my React code or feedback in general is welcome.

Thank you!

What are the best practices when it comes to media queries and setting them up to display content correctly on different screen sizes?

Any other feedback on my react code are welcome too.

Thank you and happy coding!

What are the best practices when it comes to media queries and setting them up to display content correctly on different screen sizes?

I am also learning React, so any feedback on my react app would also be appreciated.

Thank you and happy coding!