Weeks 2-6: Where have I been?

Thinking I would write one of these blogs once a week was very ambitious. Life has been so busy! I wrapped up Phase 1 feeling confident in my knowledge of JavaScript and started Phase 2 ready to dive into React. Well, React gave me a run for my money. It was tough to grasp initially, but after some serious learning curves, I’m feeling much more confident now.

Where Am I At Currently You Might Ask?

I’m excited to share that I’ve deployed my first web application, Stardew Valley Social, which I’m incredibly proud of. The concept is an Instagram-style app that imagines what a social media platform in Stardew Valley might look like. Users can add their own posts, and Stardew Valley’s villagers even comment on them! Fun fact: every caption and comment from a villager is a direct quote from the game.

For this project, there were several key requirements:

1. Build a single-page application using create-react-app.

2. Organize the code with at least five components.

3. Implement three client-side routes using React Router, complete with navigation elements.

4. Use a json-server to create a RESTful API, incorporating both GET and POST requests. A controlled form was required for the POST request, with a state update triggered on form submission.

I also added a personal stretch goal by implementing a delete button for user posts, which went beyond the basic requirements, but one of my favorite features was the Like Button. It starts as an empty heart and fills when clicked. Here’s how I built that feature:

import {useState} from "react";
import emptyHeart from "./emptyheart.jpg";
import fullHeart from "./fullheart.jpg";
import "./LikeButton.css";


function LikeButton() {
const [liked, setLiked] = useState(false);

const handleLikeClick = () => {
    setLiked(!liked);
};

return (
    <div className="like-button-container" onClick={handleLikeClick} style={{cursor: "pointer"}}>

        <img 
        className="like-button"
        src={liked ? fullHeart : emptyHeart}
        alt = {liked ? "unlike" : "like"}
        />

    </div>
)


}

export default LikeButton;

The styling was fun too, as I incorporated a mix of custom CSS with React.

It’s been challenging. There were times when I thought I was reaching a point where I would need to retake the phase. But, as I reflected on the experience, I realized how much React helped me stay organized. It forced me to break down my project into structured components, making the code far more manageable than if I had done it all in a single JavaScript file. So, in a way, React kinda won me over.

Now that I’m finishing up week 6, I’m both excited and a little anxious to start learning Python in Phase 3. I’ll catch you all up again soon!

Here is a link to Stardew Valley Social if you’re interested!

xoxo,
Bre