(View Raw will give you the markdown that you can copy to your repos!)

WEEKEND REACT GALLERY

Description

Duration: MARCH 24-27th

I was asked to create an application that displayed a gallery page to share pictures of things that are important to me.

Visitors can click on an image to see an image description and click a button to "like" an image.

I was introduced to REACT on Monday. By Thursday, that same week I was working on this project. Developing the project started with thoughtful and intentional preplanning, which made the execution of the project much easier. I developed a solid plan.

I practiced passing values through props in React and built the gallery using multiple components; an App, GalleryList, and GalleryItem.

Passing data through props requires a bit of meticulousness. You must add them when being called and a small spelling or capitalization error can definitely be hard to identify quickly.

Also, in react, the component parent child relationship was initially hard for me to conceive, but this work really helped solidify the relationship in regards to passing values.

To see the fully functional site, please visit: DEPLOYED VERSION OF APP

Screen Shot

Prerequisites

Link to software that is required to install the app (e.g. node).

• Node.js
• node.js
• react.js
• nodemon

Installation

1. Open up code editor, run an npm install
2. Running the server code requires nodemon. If you don't already have nodemon, install it globally with npm install nodemon --global.
3. Run npm run server in your terminal.
4. Run npm run client in your terminal.
5. The npm run client command will open up a new browser tab for you!

Usage

1. Click on a photo to see the photo description.
2. Click a like button and update the like count on each photo.

Built With

• JavaScript
• React
• Css
• Html

Acknowledgement

Thanks to Prime Digital Academy who equipped and helped me to make this application a reality. And thank you to my fellow students who provided support and helped great an amazing enviroment for collaborative learning. And of course, thanks to Tank, my dog who was the subject and inspiration for this application. He's a very good boy. :)

Support

If you have suggestions or issues, please email me at [email protected]