Front End github repository

• website
• Back End GitHub Repository

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

npm test

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

• 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

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

• 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

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

• rhyme API
• dictionary API

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"

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

• 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

• 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