https://github.com/codebynao/moodboard-app

A PWA mobile moodboard app
https://github.com/codebynao/moodboard-app

pexels-api pwa react

Last synced: 2 months ago
JSON representation

A PWA mobile moodboard app

• Host: GitHub
• URL: https://github.com/codebynao/moodboard-app
• Owner: codebynao
• Created: 2020-11-06T08:21:07.000Z (over 5 years ago)
• Default Branch: main
• Last Pushed: 2020-12-10T11:52:28.000Z (over 5 years ago)
• Last Synced: 2025-03-01T14:32:45.268Z (over 1 year ago)
• Topics: pexels-api, pwa, react
• Language: JavaScript
• Homepage:
• Size: 2.66 MB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Moodboard app

A PWA moodboard app in React ⚛️

Deployed on Netlify 🚀

[![Netlify Status](https://api.netlify.com/api/v1/badges/737b986d-966f-434a-bbcd-74f06b651fb4/deploy-status)](https://moodboard.codebynao.tech)

URL: https://moodboard.codebynao.tech

> (don't forget to check this in a **mobile format** if you don't want to be shocked by the non-responsive design)

I used the [Pexels API](https://www.pexels.com/api/) for the photos

## 📸 Preview of the app

### Feed with a search bar

![Feed](./src/assets/images/screenshots/feed.png)

### Save a photo to a moodboard

![Save to moodboard](./src/assets/images/screenshots/save_moodboard.png)

### Moodboards page

![Moodboards](./src/assets/images/screenshots/moodboards.png)

## ⚙️ Prerequisites

To run the project locally, you'll need to get [Pexels API Key](https://www.pexels.com/api/documentation/#authorization) in order to fetch the photos for the app

## 🚀 Quick start

1.  **Clone the git repository**

```bash

# cloning git repository into a new `moodboard` folder

git clone https://github.com/codebynao/moodboard-app.git moodboard

# install project dependencies

cd moodboard && npm install

```

2. **Setup Environment variables**

```

REACT_APP_API_BASE_URL=https://api.pexels.com/v1

REACT_APP_API_KEY=xxxxx

REACT_APP_LOGIN_URL=xxxxx

```

3.  **Start Developing**

**Development version**

```bash

npm start

```

**Production version**

```bash

npm run build

```

4.  **Checkout the project!**

> Project is running at http://localhost:3000

## ✏️ Author

Naomi Paulmin - [@codebynao](https://github.com/codebynao) 

### 📬 Contact

[![Linkedin](https://cdn2.iconfinder.com/data/icons/social-media-2285/512/1_Linkedin_unofficial_colored_svg-32.png)](https://www.linkedin.com/in/naomi-paulmin/) [![Linkedin](https://cdn2.iconfinder.com/data/icons/social-media-2285/512/1_Twitter3_colored_svg-32.png)](https://twitter.com/codebynao)

| ✉️ | naomi.paulmin@gmail.com |

| :-----: | :---------------------: |