Project Overview

This project was intended first to be the gallery page of my personal website. But due to its flexibility to be an independent website or page, I made and built this poject to be easily modifieble so you can still use this as your template in building your own gallery.

Note when using this project as your template

If you happen to encounter some not so programmer friendly configuration upon following the below instructions, kindly send me an email at my personal email or file an issue ticket in this repo.

Project Structure

This project was built using below technologies:

1. ReactJS
2. ReactHooks
3. Redux
4. Redux-Typescript
5. Typescript
6. Javascript
7. HTML/SCSS
8. Webpack

Prerequisite

Make sure you have installed the ff. in your local machine:

1. GIT
2. NodeJS
3. Yarn

How to set up the project?

You may wish to fork this repository or remove my remote origin and add your own. Go here for more information on how to change remotes. But I highly suggest you fork this repo for monitoring.

1. To download the repository and install dependencies, run the following commands:

git clone https://github.com/JCGonzaga01/gallery.git [YOUR_PREFERRED_REPO_NAME]

cd [YOUR_PREFERRED_REPO_NAME]

yarn install

2. Once installed, run the following command to build the application and serve it with hot module reloading:

yarn dev

Navigate to http://localhost:3000 to view running project.

This completes the set up instructions. Please continue reading below to learn on how to modify this site to make it your own.

Checklist

1. Start by changing the Logo of this site, go to src/assets folder then update headerLogo.png to your own logo.

2. Then proceed to src/services/apiClient/gallery.ts file. IF will use API to fetch images, declare your api url in there. ELSE IF will use local images, go to src/constants/_galleryList.ts_TEMP and remove the _TEMP in file name and declare all your local images in that file. then, go to src/services/apiClient/gallery.ts file and use the predefined syntax to call to call local images

3. Next, go to src/constants folder and update all constant information in there except _galleryList.ts_TEMP.

4. You can also change the website color theming at src/helpers/stylings/global.scss.

Build and Deploy

1. To build the project, just run the below command.

yarn build

2. If you fork this repository in your own github account and wants to deploy it in github hosting, you can just run the below command to auto deploy and host your project.

yarn deploy

Running the above command will create new git branch named gh-pages. To know more on how to host repo project in Github properly, kindly read this article for more information.

Acknowledgements

1. Template was based on Lens by @ajlkn

Reminder

• Please don't forget to send love and support by giving star to this project.
• If you encounter some issues or would like to add some enhancement, never hesitate to file an issue ticket and send PR.

License

MIT