Google Fonts Clone

Code Feedback
1

Hi Everyone,

Hope you are all staying safe and well during these crazy times.

I just finished building a Google Fonts Clone as part of an application to a Chingu Voyage. I would like to get some feedback on the project if possible, including the actual code I have written. Please be as critical as you like, down to the semicolons. The repository can be found here.

I would also be happy to explain to anyone how I did certain things within the project for those that are looking to apply certain functionality to their own projects.

Thank you so much in advance!

Travis

2

That is a cool project. I am especially curious about how you implemented the search. I have been wanting to implement something like that in one of my projects.

1 Like
3

Looks great. It exactly looks like Google Fonts. :sweat_smile:

1 Like
4

Thanks! That was the idea haha :+1:

5

Think of the search feature more as a filter, because that’s exactly what it is. Once I pull the data from the API into the store (let me know if you want me to elaborate on this) I then use mapStateToProps which is a Redux feature to bring the data from the store into the component. I am also bringing over the value I am searching for. See below:

const mapStateToProps = (state) => {
    return {
        data: state.data,
        search: state.search
    }
}

I can then use the search value to filter the data and return only the information I want. I only want the data that includes the font family I search for. From there you map over the data to create a component for each font family. See below:

const filterData = Object.values(data).filter(d => d.family.toUpperCase().includes(search));
        const cardList = filterData.length ? (
            filterData.map((dataset) => { return (<div>Component</div>) }
1 Like
6

Thanks. I will have to try the same project in React also to see how far i will go.

1 Like