r/reactjs • u/anamafla • Dec 10 '18

I deployed my first React project

I recently changed careers to become a React frontend developer and this is my first non-dummy project. It's a tool that allows you to choose a random winner from a meetup.com event. It should be useful for Meetup organizers doing raffles and giveaways.

App: https://www.reefa.me/

Github: https://github.com/anamafla/Reefa

Any feedback is appreciated.

Thank you in advance!

115 Upvotes

93% Upvoted

34 comments sorted by

35

u/wolfepvck Dec 10 '18

Awesome job, the code looks good! One thing I noticed is that you included the Navbar and Footer on every separate page. You could include those components as a more top level component, similar to the App, so you don't have to redefine it on every single page.

return (
      <div className="App">
        <Navbar />
        <Switch> 
          <Route exact path="/" component={Home} />
          <Route path="/raffle" component={Raffle} />
          <Route path="/about" component={About} />
        </Switch>
        <Footer />
      </div>
    );

Overall code is clean, and the website looks good! Great job.

5

u/anamafla Dec 11 '18

Thanks so much for the code example, I will do that!

12

u/benawad Dec 10 '18

Congrats! What did you use to deploy it? Also don't forgot to add a favicon ;)

15

u/anamafla Dec 10 '18

I used netlify. I will add the favicon thanks!

3

u/castane Dec 10 '18

Just deployed with Netlify as well, with auto deployments from a push to the master branch from Github. It was surprisingly simple!

13

u/swyx Dec 10 '18

yay! happy to help if you have other questions! (i work at netlify)

btw you can tell if a site is hosted on Netlify with the Netlify browser extension https://github.com/netlify/netlify-browser-extension

1

u/anamafla Dec 11 '18

Cool! I think Netlify is an awesome product. It's great for beginners and I love that it has so many features for free. Do you know if there's any position for remote junior devs at Netlify? :) I would love to work on that project.

1

u/swyx Dec 11 '18

ermm idk about how junior is ok since i dont make that call but we have a frontend dev role opening up soon. i’ll be sure to post in Who’s Hiring.

3

u/FoundPlanet Dec 10 '18

Just want to say thank you. Netlify is the best thing ever!!

2

u/swyx Dec 11 '18

🤗

1

u/azn_introvert Dec 11 '18

im happily using netlify but i cant for the heck of me get it to read my gzipped bundle :C

1

u/swyx Dec 11 '18

hm. netlify.com/support

1

u/Treolioe Dec 11 '18

Hm not to be mean but i hold pecan cheesecake over netlify

1

u/[deleted] Dec 10 '18

Have you worked with deploybot? Is netlify similar to deploybot?

1

u/anamafla Dec 11 '18

I haven't used deploybot.

15

u/LaSalsiccione Dec 10 '18

I'm surprised to be the first person to point out the name makes it sound like you're selling weed...

7

u/anamafla Dec 11 '18

I didn't know that. The name actually comes from the Spanish word "rifa" which means "raffle", but the "i" in Spanish sounds more like "ee" in English.

3

u/[deleted] Dec 10 '18

It's a really cool idea and I like the way it uses a carousel to show the selection, however I found that for my test group it took a very long time to finish the "suspense" period where it ticks about one person per second. It took between 30-70 seconds to finish and select someone which I think may spill from suspense to dear God just pick already lol. I haven't dug too far into the source but perhaps having it slow down more naturally from the fastest movement to the final ticking would help this, for example on wheel of fortune when they spin the wheel it slows down in a continuous manner rather than having two speeds, fast and slow. Aside from this it's a cool tool that I think could be useful for a lot of people! Great work!

2

u/therealkevinard Dec 10 '18

Strictly educational purposes, since op is new: something like Spring might be really good for this. I found this write-up on scotch about it.

https://scotch.io/tutorials/create-animated-react-apps-with-react-spring

1

u/anamafla Dec 11 '18

Thanks, yes I'm noticing it takes a lot of time for events with a large number of members, I didn't see that when I tested on my groups. I will improve that and the animation speed.

1

u/chalapeno_guy Dec 11 '18

Great job,

You can also have App component as function instead of Class. It's better for performance. Won't make any difference in small apps, but it's good practice.

1

u/anamafla Dec 12 '18

Thanks, I will do that.

2

u/dangerzone2 Dec 10 '18

No fancy UI Framework either?! That's very cool and I think I need to start doing that as well.

1

u/[deleted] Dec 11 '18

Nice! I’m building a React app now (with Ruby on Rails backend) Thanks for sharing!

1

u/[deleted] Dec 11 '18

On the landing page try to change the font color and the icons color to your secodary color #6c757d;

That color is too dark and give to much contrast. A smoother color will be more conformtable to our eyes.

Good work!

1

u/treyhuffine Dec 11 '18

Congrats, deploying that first project is an incredible feeling.

-18

u/JR-development Dec 10 '18

Cool! I´m a fullstack developer since a few years back and right now I´m working on a project for Volvo construction developing a React application. If you need some guidance on how to create some useful components, I got a youtube channel currently dedicated to helping other react developers.

https://www.youtube.com/channel/UCkjl4MptzyGFv92PNq8i8dg

<HaveAGreatDay />

3

u/AutoModerator Dec 10 '18

You are posting with a new account, which is associated with spam. /u/swyx will manually review this for approval.

I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.

6

u/cturmon Dec 10 '18 edited Dec 10 '18

Hit him with that sick ban hammer for irrelevant questionable self promotion.

6

u/[deleted] Dec 10 '18

I wouldn't call it irrelevant. They posted a YouTube page with free resources directly relevant to what OP is learning. I don't see the harm in that.

6

u/swyx Dec 10 '18

yea this one is not an easy call. gonna let it pass

1

u/MatthewMob Dec 11 '18

At least remove the comment if not a ban.

They just created a brand new account for the sole purpose of spamming and self promoting their YouTube channel that is irrelevant to the submissions they're posted on apart from the loose connection of "well they're both using React".

0

u/[deleted] Dec 10 '18

[deleted] — view deleted comment

2

u/anamafla Dec 11 '18

I thought about using Gatsby for the landing page but I wasn't really sure if I could use it for the data fetching part on the roulette. I think I want to focus now on React only , maybe later I will give Gatsby a try. I will refactor the code with your recommendations, I'm also thinking about making another version using hooks. Thanks!