Random Quote machine

Code Feedback
1

Tell us what’s happening:
Hello everyone I just completed the random quote machine certification project .
I would greatly appreciate any feedback u can give me, thank u!

Live site: (React App)

Github: (Projects/random-quote-machine at main · JoelLH/Projects · GitHub)

2

you built it with create-react-app?

I decided not to go for create-react-app for this one.

Create-react-app seemed like a little bit overkill for such small project.

Anyway this looks a little better than mine.

I don’t understand this link:
by [Joel WebDev](https://randomequotejhweb.netlify.app/#)

It kind of leads to the page which is before my eyes already.

And it looks like your favicon is the same as the default one from create-react-app template(react logo I mean) - that was the plan or you forgot to delete it?

1 Like
3

Thanks for the comment , yea i built it with react and bootstrap.
I forgot to remove the favicon and change the link :sweat_smile: thanks for pointing that out .
For the design, i tried to make it as close as the example

4

Even for small projects:You can’t get enough React training given how important it is for current Frontend development.

Nice job, see how crispy clean and smooth the combo bootstrap/ React can make the smallest app look and handle.

1 Like
5

I agree, react is like in every vacancy I see for front-end

What I meant by overkill is that:

see this folder in the repo:

see how many files? some of them are unnecessary for something small like Random quote Machine. It all remains from create-react-app initial template.

I meant that it is probably acceptable to add react for small projects without using create-react-app.

I am not telling that using create-react-app is bad idea here tho - it is still good for learning purposes.

1 Like
6

Yeah, when you are using create-react-app you have to know which files you can delete without breaking the project.

In this case, the following files can be safely deleted:

  • logo192.png
  • logo512.png
  • removing references of those logos in the manifest.json file
  • web vitals
  • setup tests
  • App.test

I don’t think there is anything wrong with not using CRA for small projects like this as long as you follow the same design architecture of a react app.

There are plenty of articles out there like this one where you can build out react template

2 Likes
7

HI @jhectorlopezh !

I edited your post to just include information about the project.

As for your project, I think it looks good.

Just a few things I noticed with your code.

  • I think you should use something like Prettier to format your code
  • In your App.js file, since you already imported React at the top, you don’t need to add React here in front of your hook
React.useState();

You can just say useState();

1 Like
8

Ah, I didn’t see the code base.

I agree that the current create-react-app comes with alot of fluff and I wish there was a leaner boilerplate for smaller projects

I’m not experienced enough to make one yet.

1 Like
9

  1. The tweet button doesn’t work. It should open a new tab/window with the quote text as part of the tweet. Look at the example project.

  2. data is a pretty unspecific name, maybe name it what it is, the quotes.

  3. The colors array is fixed and as such, it can be moved out of the handler and the component. That way is it not recreated on every click/render.

  4. You do not really need to pass the Quote component the colors as its parent already is given a style object and the children will inherit the colors. I also think the name bgColor for a style object with both background-color and color might be better. Maybe just styles or something.

As an aside, give Vite a look for a nice alternative to CRA.

2 Likes
10

Thank you! I’m very new with react I did not know u could delete those

11

Vite - it is the thing they are using on replit, right(well, at least for React repl-s - that’s what I am playing around now)? I got started with replit just couple of hours ago - and I already like what’s going on there. so thanks for the hint about Vite.

12

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.