git clone (project url) npm install npm start
Thoughts is a web app where a user can log in (using firebase auth), and leave a message that is added to the firebase realtime database, which the newsfeed pulls from. This app could be ran on local state by pulling the thoughts feed from local state, but this would mean that everyone's thoughts would be lost on refresh. If you click the top right icon, you will be brought to a profile page where you can update your name and a picture. These will replace your name and picture on all previous thoughts automatically. Click the top left icon from the profile page to go back to the thoughts feed. Even though there is a link on this website, and the profile page is at the "/profile" endpoint, typing in the url or refreshing will cause you to log out because I did not set up login persistence.
-
I was unable to center the logos inside of the top border:
Somehow I missed that there was a
float: left
style attribute on the logo class, so I changed that toposition: relative
. The whole top border is actually a table, to help with ease in css. -
I was curious why the background color for the elements would fail to cover the whole page:
I fixed this by doing
html {background-color: #F8E691}
. I never knew you could style the entire html document. -
My icons were squishing when I tried to crop them. I fixed this by making the img tag a div and changing the
<img src = {this.state.propicURL} className = 'thumb'/>
to
<div className = "thumb"
style = {{backgroundImage: `url(${this.state.propicURL})`}}
alt = "your propic"/>
- I was having a lot of trouble making the pictures at the top be links using react-router. I tried nesting the image inside the link like
<Link to="/">
<img src={logo}>
</Link>
and also tried putting a background-img
property on the link. The image
would show up, but the link wouldn't redirect. Eventually, I found
a component on stackoverflow that I changed to be
an image instead of a button.
-
I was wondering why the page was refreshing whenever I submitted a form. Fix: place
e.preventDefault();
inhandleSubmit(e)
handler function. -
I was having some problems with displaying the name instead of the ID created for the post by
firebase.database().ref('posts').push();
, javascripts annoying synchronicity strikes again: the state wasn't updating before I was trying to use it. I fixed this by making a separate component for getting the name and did a similar thing for the picture icons.