Unsplash-Image-Hub

KO | EN

gitlite — search

#javascript #python #hacktoberfest #react #ai #typescript #llm #go #golang #android #machine-learning #rust #deep-learning #linux

Unsplash-Image-Hub

★ 11 Open GitHub ↗

A web app that provides unsplash image collections. It provides detailed information for each collection a user clicks.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

<!--
HOW TO USE:
This is an example of how you may give instructions on setting up your project locally.

Modify this file to match your project and remove sections that don't apply.

REQUIRED SECTIONS:
-Project description
- Table of Contents
- About the Project
  - Built With
  - Live Demo
- Getting Started
- Authors
- Future Features
- Contributing
- Show your support
- Acknowledgements
- License

OPTIONAL SECTIONS:
- FAQ

After you're finished please remove all the comments and instructions!
-->

<h3>Unsplash Image Hub</h3>

</div>

# 📗 Table of Contents

- [📖 About the Project](#about-project)
  - [🛠 Built With](#built-with)
    - [Tech Stack](#tech-stack)
    - [Key Features](#key-features)
  - [🚀 Live Demo](#live-demo)
- [💻 Getting Started](#getting-started)
  - [Setup](#setup)
  - [Prerequisites](#prerequisites)
  - [Install](#install)
  - [Usage](#usage)
  - [Run tests](#run-tests)
  - [Deployment](#triangular_flag_on_post-deployment)
- [👥 Authors](#authors)
- [🔭 Future Features](#future-features)
- [🤝 Contributing](#contributing)
- [⭐️ Show your support](#support)
- [🙏 Acknowledgements](#acknowledgements)
- [Video-presentation](#presentation)
- [❓ FAQ (OPTIONAL)](#faq)
- [📝 License](#license)

# 📖 [Unsplash Image Hub]

**[Unsplash Image Hub]** provides collections from unsplash API. A user can interact with any collection by clicking on it to view details. A user can search for a collection and navigate through pages.

## 🛠 Built With <a name="built-with"></a>

### Tech Stack <a name="tech-stack"></a>

<details>
 <summary>Client</summary>
 <ul>
 <li><a href="#">CSS</a></li>
 <li><a href="#">JavaScript</a></li>
 <li><a href="#">React js</a></li>
 <li><a href="#">Readux js</a></li>
 </ul>
</details>

<details>
 <summary>Server</summary>
 <ul>
 <li><a href="#">No Server build yet</a></li>
 </ul>
</details>

<details>
<summary>Database</summary>
 <ul>
 <li><a href="#">No database build yet</a></li>
 </ul>
</details>

### Key Features <a name="key-features"></a>

- **[Used Linters]**
- **[Great summary for the repo]**
- **[Use of GitFlow]**

(<a href="#readme-top">back to top</a>)

## 💻 Getting Started <a name="getting-started"></a>

- A new developer can get the project from my Github repo link i shall provide.

- To get a local copy up and running, follow these steps.

- go to https://github.com/stephenkati/Unsplash-Image-Hub.git

- clone or download the project

- Run `npm install`
- Run `npm start`

### Prerequisites

In order to run this project you need:

- A code editor, preferably VSCode. Any other code editor is okay.

- Browser

### Setup

Clone this repository to your desired folder:

- Run `git clone https://github.com/stephenkati/Unsplash-Image-Hub.git`
- cd `Unsplash-Image-Hub`

### Install

Install this project with:

- Download the project from github and run it in your browser.

- Install dependencies.
- `npm install`

### Usage

- To run the project, navigate to the project directory and use a live Server extension in your VSCode to run the project.

Run `npm start`

### Run tests

You can run tests to check for linter errors by running the following commands:

- `npx stylelint "**/*.{css,scss}"` for testing css errors
- `npx eslint "**/*.{js,jsx}"` for Javascript errors

(<a href="#readme-top">back to top</a>)

## Deployment

The project is deployed on [Render](https://image-hub.onrender.com/)

## 👥 Author <a name="authors"></a>

👤 **Stephen Katuli**

- GitHub: [@githubhandle](https://github.com/stephenkati)
- LinkedIn: [LinkedIn](https://www.linkedin.com/in/stephen-katuli/)

(<a href="#readme-top">back to top</a>)

## 🔭 Future Features <a name="future-features"></a>

- [ ] **[More backround images]**
- [ ] **[Animations and transitions]**
- [ ] **[More Javascript Functionality]**

(<a href="#readme-top">back to top</a>)

## 🤝 Contributing <a name="contributing"></a>

- Contributions, issues, and feature requests are welcome!

- Feel free to check the [issues page](https://github.com/stephenkati/Unsplash-Image-Hub/issues).

(<a href="#readme-top">back to top</a>)

## ⭐️ Show your support <a name="support"></a>

If you like this project please reach out to me on my social media, hire me for more content like this.

(<a href="#readme-top">back to top</a>)

## 🙏 Acknowledgments <a name="acknowledgements"></a>

- I would like to thankmy Microverse team and my coding partners for their support and guidance.
- I am very grateful to [Nelson Sakwa on Behance](https://www.behance.net/gallery/31579789/Ballhead-App-(Free-PSDs)) for the design I used.

(<a href="#readme-top">back to top</a>)

## PRESENTATION <a name="presentation"></a>

**PROJECT PRESENTATION VIDEO**

[Here](https://www.loom.com/share/74ec45675a46410983d33438bb5a8495) is a video presentation.

## ❓ FAQ (OPTIONAL) <a name="faq"></a>

- **[How good are your communication skills?]**

- [I have good writting and speaking communication skills in English.]

- **[What else do you do apart from coding?]**

- [I do graphics design.]

(<a href="#readme-top">back to top</a>)

## 📝 License <a name="license"></a>

This project is [MIT](/LICENSE) licensed.

(<a href="#readme-top">back to top</a>)

Unsplash-Image-Hub

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README