nicholasmatias / kudosboard

Unit Assignment: Kudos Board

Submitted by: Nicholas Matias

Deployed Application (optional): Kudos Board Deployed Site

Application Features

CORE FEATURES

• Home Page
• Displays header, banner, search, board grid, and footer.
• Displays preview of all boards on initial page load.
  • Boards previews should show an image/gif and board title.
• Users can click on a category (recent, celebration, thank you, inspiration) to filter the boards.
  • Recent displays most recently created boards.
  • Other categories display boards of that type.
• Users can search for a board by name.
• Users can click on a board to navigate to a new page containing that board.
• Users can create a new board.
  • Boards should have a title, category, and author (optional).
• User can delete boards.
• Board Page
• Displays a list of all cards for a board.
  • Each card features a text message.
  • Each card features a gif found using the GIPHY API.
  • Users can optionally sign the card as the author.
• Cards can be upvoted.
• Cards can be deleted.

STRETCH FEATURES

• User Accounts
• Users should be able to log in with a username and password.
• Users should be able to sign up for a new account.
• Boards and cards should be associated with a user.
  • Anonymous cards or cards by guest users should still be allowed.
• Add a new filter option on the home page to display only the current user's boards.
• Allow boards to be deleted only if they are owned by the user.
• Deployment
• Website is deployed via Render.
• Comments
• Users should be able to comment on cards.

Walkthrough Video

Kudos Board Demo - Watch Video

Reflection

• Did the topics discussed in your labs prepare you to complete the assignment? Be specific, which features in your weekly assignment did you feel unprepared to complete?

Lab 3 was helpful when I went through it. It was directly related to what we were doing. It helped me understand how to set up the database and connect it to the frontend. That said, while lab 3 did cover this to an extent, connecting the frontend was still a little hard. Through reading documentation, things became clearer though. In addition to this, understanding how to write the put, patch, get, and delete api calls was hard at first. Lastly, I felt completely unprepared to deploy the website through render. Deploying an application that is purely frontend is simple but doing it with the database in mind is something else entirely. I didn't know how to add in the backend so that the website would work through render.

• If you had more time, what would you have done differently? Would you have added additional features? Changed the way your project responded to a particular event, etc.

Given more time, I would finish setting it up on render, add comments for cards, and add user authentication. There are some small things I would like to add/ change: gif search input tag resets to "" on submit, naming conventions, and ensuring that the footer is always at the bottom of the screen. When I say naming conventions I am referring to the component names. I think that if I had thought ahead more, I could have given the react components more relevant and clear names.

• Reflect on your project demo, what went well? Were there things that maybe didn't go as planned? Did you notice something that your peer did that you would like to try next time?

I didn't do a demo this week as I went last week. I did appreciate that a couple people had theirs deployed through render which is something I didn't have time to accomplish.

Open-source libraries used

I used the 'react-router-dom' library to set up the routes for the boards. Through using this, I was able to efficiently set up a separate page for each board.

Shout out

This week, I did pretty well on my own in terms of trouble shooting. That said, Sammy was able to direct me to the right websites so that I could read the right documentation. Throughout the week, I became accustomed to reading through the documentation to solve my problem.

kudosboard's Issues

Week 3 feedback

Congrats on finishing the last codepath project! Once again great job incorporating previous week's feedback, the organization is a lot better this week and especially helpful now that there's frontend and backend code.

A couple notes for this week:

Format: I noticed a lot of blank lines/white space in some files- while white space is good, let's try to be more consistent about it and not have more than a couple lines break

Networking: I notice the same string for the base URL is repeated a few times, separating it out into a constant and then appending the corresponding route can be helpful if it changes so then you don't have to update it in multiple places (perhaps consolidating networking/json parsing together into a helper as well). Also a good idea to add some more error handling there.

I know there was a lot going on this week and some challenges with integrating the backend but great job handling them in stride and finishing the project!

Week 3 Feedback

Great job completing all the features! It was a complicated and comprehensive project on a short week.
You've built on a lot of the feedback from previous weeks and iterated well. The code itself and organization looks clean.

I still see some console.log statements which I assume were forgotten to be deleted and would be caught in a standard code review. The console.log statements for the errors are fine for the purpose of this project.

KudosBoard/Backend/index.js

Lines 55 to 70 in a2102a2

	app.get('/KudoCards/search/:search', async(req,res)=>{
	try{
	const searchQuery = req.params.search
	const board = await prisma.KudoCard_boards.findMany({
	where:{
	title:{
	startsWith: searchQuery, mode: 'insensitive'
	},
	},
	})
	res.status(200).json(board)
	}
	catch{
	}
	})

it seems for some of your APIs you catch the error and sometimes you don't and in the case attached there is no logic in the catch clause.

For error handling, try catch IMO is sufficient for this project, but when you have time you should look into other ways to error handle such as creating an error-handling middleware function.

Also as a stretch stretch goal, we can look into how we can start testing these API calls with unit tests.

Week 3 Feedback

Congratz for completing all core features for Week 3! Amazing work on Week 3, which was the most challenging one so far!

Don't have a lot any major feedback for this week, you learned from the previous feedback and code quality is much higher now. Below just some minor stuff.

Feedback

Code Style

Still see some inconsistent formatting. Please use an auto-formatter on save (if you haven't set that yet).
A linter could also be a time saver for you.

Error Handling

Async calls (like the ones to Prisma) could result in error. For future projects let's make sure to wrap the calls with try and handle errors in the catch block.

Versioning

Nice job on making smaller commits! To go to pro-level now, I would suggest that you think with "Code Review" mindset.
We won't do this here, but in the industry every commit will usually be reviewed by other team member.

Before pushing a commit, try to think:

• Is there any obvious thing a code reviewed will point out?
• Am I providing enough context in the commit description for a code reviewer to review this diff?

It is also ok to commit uncompleted code, but a good idea is to add "TODO" comments to make sure you don't forget them.