/image-gallery-site-reactjs

a fairly simple image gallery with reactjs, working on this project to refine my reactjs skill.

Primary LanguageJavaScript

Image Gallery Site - ReactJS

About this project

It's a very simple image gallery that displays images just like pinterest/instagram. it consists of only one page.

Why work on this project?

- practice reactjs
- brush up on html, css, js
- learn how to divide website ui into components

Useful links

  1. how to break UI of website into react components
  2. pinterest - ui inspo
  3. another ui inspo

Components for the webapp

  1. navbar --> logo (left), socials (right)
  2. header --> title (middle), short text (middle, below title)
  3. image cards --> display various images

How I plan to execute this project

  1. structure the entire project
  2. create all components first
  3. work on navbar component
  4. work on header component
  5. work on image card componentwfwqf

My thought processes as I work on this project

  1. how do i want this site to look like? ui inspo?
    • searched online and found pinterest and another yt vid for inspo.
  2. now how do i divide the ui into components?
    • researched and found an article written by Emmanuel Fordjour Kumah.
  3. ok now time to create each components' file and work on it one by one.
  4. started working on navbar and i already got stuck. how do i center a div? HAHAHAH
  5. now i cant seem to work my head around flex (which i thought i knew). "justify-content: center; flex-direction: column;" --> this does not work together, why?
  6. time to add in the fonts!!
    • fonts from google font
    • font familiy chosen --> lato and lora
  7. now, lets work on the final component
    • first lets just display one image card
    • damn, didnt expect displaying an image to be confusing but i got it done with the help of this link
    • now i need to find a way to display multiple images, i figured iterating a list/array of images would work best, this link helped
    • this link solidified my understanding on how to use .map()
  8. how do i host/deploy it on github