regina-yan / lab4-regina-yan

lab4-regina-yan created by GitHub Classroom

lab4-regina-yan

Available at freefoodatnow.surge.sh

What I did

I created a CRUD application with React-Redux that allows the user to create free food events, read/view current events, update post information, and delete completed events with the CS52 backend.

What worked

It took me awhile to really figure out how the containers connected to each other and how actions worked, but Short Assignment 5/6 were extremely helpful to my understanding. In the end, I adapted the "blog post" idea and created the Free Food @ Now Site. The "tags" in the API are reframed as the location/time of the event.

Main Screen

Individual Post

Updating Post

Creating New Post

Extra Credit

For extra credit, I turned the blog into a free food site. I also added form validation. For example, the title and tags (location/time) are required, so if the user doesn't fill them out (I used onBlur for this), then the box will turn red after they click away from that field. The submit button will not show up unless all the required fields are filled.

I also used a function to check to make sure the image URL is actually a valid URL. While that field is not required, if one does decide to fill it out, it needs to be an actual site or else we won't have a cover image!

Acknowledgements

Special thanks to Sheppard Somers '19 for helping debug and providing emotional support when the bugs were too scary