Issues/Tracking Progress

Main Work

  • Skatepark Review API
  • The frontend for Skatepark Review
  • Sending IMGs with the posts

Backend Work

Skatepark.java

public class Skatepark {
    @Id
    @GeneratedValue(strategy = GenerationType.AUTO)
    private Long id;

    @Column(unique = false)
    private String skateparkName;
    private String author;
    private String title;
    private String address;
    private double starRating;
    private String description;
    private int totalLikes;

    public Skatepark(String skateparkName, String author, String title, String address, double starRating, String description, int totalLikes) {
        this.skateparkName = skateparkName;
        this.author = author;
        this.title = title;
        this.address = address;
        this.starRating = starRating;
        this.description = description;
        this.totalLikes = totalLikes;
    }
    // Setters and Getters
}

Controller File

  • I <3 Crud
@GetMapping("/")
    public ResponseEntity<List<Skatepark>> getSkateparks() {
        return new ResponseEntity<>(repository.findAll(), HttpStatus.OK);
    }

@PostMapping("/create")
    public ResponseEntity<Skatepark> createSkatepark(@RequestBody Skatepark skatepark) {
        Skatepark savedSkatepark = repository.save(skatepark);
        return new ResponseEntity<>(savedSkatepark, HttpStatus.CREATED);
    }

@PostMapping("/like/{name}")  
    public ResponseEntity<Skatepark> updateLikes(@PathVariable String name) {
        List<Skatepark> skateparks = repository.findBySkateparkName(name);
        if (!skateparks.isEmpty()) {
            Skatepark skatepark = skateparks.get(0); // Assuming you want to work with the first matching skatepark
            int currentLikes = skatepark.getTotalLikes();
            skatepark.setTotalLikes(currentLikes + 1); // Increment likes by 1
            // You can also update the author who liked the skatepark
            repository.save(skatepark);
            return new ResponseEntity<>(skatepark, HttpStatus.OK);
        }
        return new ResponseEntity<>(HttpStatus.NOT_FOUND);
    }

@DeleteMapping("/delete/{name}")
    public ResponseEntity<Void> deleteSkatepark(@PathVariable String name) {
        List<Skatepark> skateparks = repository.findBySkateparkName(name);
        if (!skateparks.isEmpty()) {
            repository.delete(skateparks.get(0)); // Assuming you want to delete the first matching skatepark
            return new ResponseEntity<>(HttpStatus.NO_CONTENT);
        }
        return new ResponseEntity<>(HttpStatus.NOT_FOUND);
    }

Inspiration

I copied the joke API because of it’s like and dislike feature. The like feature was already built into the code. Thought process was I would just have to add more columns for the skatepark data, and then had some new methods. Although I ended up scrapping the current Joke code, and slightly started from scratch for the liking process on the sites.

Collaboration

  • Justin: Helped with the likes and dislikes
  • James: Made the IMG api and help me understand it to use with my own

Frontend Code

  • Review Maker Form
  • Recent Posts Page

Review Maker Form

  • Highlighted Code
<!-- Input type File -->
<div style="padding-bottom: 20px;">
    <input type="file" id="image" accept="image/*" class="input-group__file" required />
</div>

// Checks if an input field is empty and assigns it a red background if so
if (author === "") {
    document.getElementById('name').style.borderColor = "red";
    document.getElementById('name').classList.add("red-background");
    errors++;
}

// Instead of Combing my API with IMG one I would just fetch both
// Assigning the IMG name to the same name as the Post
try {
    const skateparkResponse = await fetch(skateparkUrl, {
        method: "POST",
        headers: {
            "Content-Type": "application/json"
        },
        body: JSON.stringify(skateparkData)
    });

    if (skateparkResponse.ok) {
        const skateparkData = await skateparkResponse.json();
        console.log("Skatepark Response:", skateparkData);
        

        const formData = new FormData();
        formData.append("username", skatepark_name);
        formData.append("image", document.getElementById("image").files[0]);

        const imageUploadResponse = await fetch(imageUploadUrl, {
            method: "POST",
            body: formData
        });

        if (imageUploadResponse.ok) {
            console.log("Image uploaded successfully");
        } else {
            console.error("Image upload failed");
        }
    } else {
        console.error("Skatepark API request failed");
    }
} catch (error) {
    console.error("Error:", error);
}

Recent Posts Code

  • How the cards are created
fetch(apiUrl)
        .then(response => response.json())
        .then(data => {
            data.forEach(skatepark => {
                const car = document.createElement("div");
                car.className = "car";
                car.dataset.skateparkName = skatepark.skateparkName;
                // I had made the entire wireframe on a previous version, then put it inside this variable with all the fetched data\
                // Setting the source of the image to the image held in our backend
                car.innerHTML = `
                    <div class="details">
                        <div class="info">
                            <h3 id = "test">${skatepark.skateparkName}</h3>
                            <img src = "https://y2kcoders.stu.nighthawkcodingsociety.com/image/${skatepark.skateparkName}">
                            <p><b>Author:</b> ${skatepark.author}</p>
                            <p><b>Title:</b> ${skatepark.title}</p>
                            <p><b>Address:</b> ${skatepark.address}</p>
                            <p><b>Star Rating:</b> ${skatepark.starRating}</p>
                            <p><b>Description:</b> ${skatepark.description}</p>
                            <p class ="total-likes"><b>Total Likes:</b> ${skatepark.totalLikes}</p>
                        </div>
                        <div class="actions">
                            <button onclick="updateLike('${skatepark.skateparkName}',this)">Like</button>
                            <button onclick="update_dislike('${skatepark.skateparkName}',this)">dislike</button>
                            <button>Share</button>
                        </div>
                    </div>
                `;
                skateparkCardsContainer.appendChild(car);
            });
        })
.catch(error => console.error("Error fetching data:", error));

Commits

Final Reflection

I had multiple goals this trimester for my website, but the main one that comes to mind was my goal about backend coding. I was never strong in the backend for CSP, but after this trimester of making my own API with no substantial help, I have a better understanding of java and OOP. Skating is a passion and a hobby of mine so I think the focus of the project help me learn more.