No Shame, Here's My First React Site
Tags: beginners, webdev, react, showdev
Published: 2019-02-23 15:36:05

---
title: No Shame, Here's My First React Site
published: true
description: bananabrann shows off his disaster of a site to motivate those who are learning!
tags: #beginner #webdev #react #showdev
---

This past week, I worked on building a Would You Rather game with [@RendonEls](https://github.com/RendonEls). I learned a lot about React, and definitely feel more comfortable with it after tackling this project.

However, a lot of times we only see others' highlight reels, so I figured I'd show off (and hide in the corner) my first full-CRUD site using React. No one is born a champion, so it's alright to have a bit of fun and briefly check out my Would You Rather game that isn't so production-ready. So hey, let's have some fun and look at all the things wrong!

____


## Landing Page
When you first come on the site, you're presented with the homepage.
![homepage](https://thepracticaldev.s3.amazonaws.com/i/d4n8ywgtduka8zaj3ytb.png)
You have the ability to play, view stats, or go to options.

## Playing the Game
![play](https://thepracticaldev.s3.amazonaws.com/i/dp488oi90r5mk9qsx69s.png)
Here is the play screen. Right now, the game isn't even playable, haha! But hey, it displays two random questions!
* No way to select a question.
* No next button.

## Options - Create 
![create](https://thepracticaldev.s3.amazonaws.com/i/8ps9p1erkjexnkrkopjd.png)
After going into options, you can create a question. This part of the site is probably the part that looks the best, but is also the simplest.
* Pressing submit neither redirects nor refreshes.
* Navigating away, after submitting, does not show your question anywhere. You have to refresh manually no matter what page you go to. 😅

## Options - Edit
![edit](https://thepracticaldev.s3.amazonaws.com/i/8igjw1vpno1adn81ets9.png)
Ah, the edit page. The bane of our existence, both on the back-end and front-end. In the end, it ended up being like 40 lines of code. This took us around 24 working hours to complete, but it works!
* Clicking delete also immediately deletes the question, without refresh! 😃
* Adding enough questions so it goes past the footer **destroys** the footer.

![edit with inserts](https://thepracticaldev.s3.amazonaws.com/i/tky92gx6zxvp8p5m1kp8.png)
... And then you press edit.
* Clicking edit on one will drop the boxes down for all.
* Clicking submit updates them immediately within state, and doesn't refresh! 😃😃😃

___

That's it! I hope this sadistically inspires someone, or at least gets a half-smile from some veteran coders. May your bugs be short, and Happy Coding!

Deployed website:
http://dirty-fan.surge.sh/
Front-end Repo:
https://github.com/bananabrann/would-you-rather-frontend
Back-end Repo: 
https://github.com/RendonEls/would-you-rather-backend

P.S. If you're feeling really ambitious, share us your first site ever!



<div class="LI-profile-badge"  data-version="v1" data-size="medium" data-locale="en_US" data-type="horizontal" data-theme="light" data-vanity="pbrann"><a class="LI-simple-link" href='https://www.linkedin.com/in/pbrann?trk=profile-badge'>Pierson L. Brannan</a></div>