studio

Front End github repository

Links:

• website
• Back End GitHub Repository

To run

1. ensure .env file is filled out with the backend url. See .env.sample
2. Install dependencies:

npm install

3. Run development server:

npm run dev

To test

npm test

Overview

An inspiration board where the user can add pictures, videos and text from various different sources e.g. Youtube, Instagram, TikTok, Pinterest, Spotify

Problem

• To aid with ideations in various creative industries
• Not enough practical tools available to navigate complex creative ideas
• It is difficult to communicate creative ideas only with text and inspiration may be on different platforms.
• To aid with 'writer's block' by enabling users to view public inspiration boards

User Profile

People who work in the creative industry which would include:

• Artist
• Musicians
• Marketing Agencies
• Editors
• Creative Directors
• Graphic Designers
• Interior Designers
• Copy Writer
• Creative Writers

People that need space for articulating ideas

Features

• Add videos from video platforms e.g. Youtube, TikTok
• Add pictures from picture platforms e.g Instagram, Pinterest
• Resize elements on the board
• Drag and drop elements around the board freely
• Add text to inspiration board
• Add colors with hex code on board
• Users are able to share inspiration boards with other users
• Built-in ideation help e.g. rhyme/synonym generation, color palette generation

Implementation

Tech Stack

Third Party Libraries

• sass
• react-route
• nanoid
• reactflow
• react-popup
• react-type-animation

APIs

• rhyme API
• dictionary API

Sitemap

Mockups

homepage.mov

dashboard.mov

boardpage.mov

explorepage.mov

Data

Endpoints

GET /api/users/:user-id

• Fetch use details for a given user
• Example Response:

{
  "id": 1,
  "username": "nuclear.instruments",
  "email": "[email protected]"
}

GET /api/users/:user-id/boards

• Fetch board details for a specific user
• Example response:

[
  {
    "id": 1,
    "board_name": "My First Board",
    "is_public": false
  },
  {
    "id": 2,
    "board_name": "Example Board",
    "is_public": false
  },
  {
    "id": 3,
    "board_name": "music video inspo",
    "is_public": true
  }
]

GET /api/boards/:board-id/pins

• Fetch pins for a specific board
• Example response:

[
  {
    "id": "xFLA-XMirt",
    "type": "YoutubeVidNode",
    "data": { "youtube_id": "sDENI1Zx7Wc" },
    "position": { "x": 300, "y": 200 }
  },
  {
    "id": "mB_6kTKt3Y",
    "type": "TextNode",
    "data": { "text": "this is a text box" },
    "position": { "x": 250, "y": 100 }
  },
  {
    "id": "WVQoDv6ewX",
    "type": "ColorSelectorNode",
    "data": { "color": "#4c4cff" },
    "position": { "x": 0, "y": 0 }
  }
]

PUT /api/boards/:board-id/pins

• Update pins on a specific board when a user saves

post /api/users

• Initialize a new user upon registration

post /api/users/:user-id/boards

• Initialize a new board for a given user upon creation

get /api/boards/public

• get all boards that are set to "public"

Auth

Yes, depending on how difficult the implementation of authorization is.

Roadmap

• Front-end

  • Build all pages defined above
  • add drag and drop functionality
  • implement adding pin functionality for text, colors, pictures and videos
  • implement custom iframe for external sites i.e. youtube, tiktok, pinterest

• Back-end

  • Build end points specified above
  • implement authorization if not too difficult

Nice-to-haves

• Organize elements on the board by relevance/concept/media type
• Create a repository of references that are interlinked
• Draw lines and arrows on inspiration board
• Draw free-hand on board
• Collaboration between users and sharing inspirations boards to be publicly viewed