Code Monkey home page Code Monkey logo

artventures-website's Introduction

Artventures Website & Webapp

Artventures Status

1. Tools

1.1. List

  1. Jamstack framework: Gridsome
  2. Jamstack BaaS: Netlify
  3. UI Library: Vuetify
  4. CMS: Netlify CMS
  5. Database: FaunaDB
  6. Image Database: Cloudinary
  7. Auth Service: Auth0
  8. Marketing Service: Mailchimp
  9. Internally used Mail service: Mailgun
  10. Mail Service: Sendgrid

1.2. Used Tiers

  • All free

2. Configure Project

  1. Clone project
  2. Go to path via command line
  3. Run yarn install to install all node modules

3. Integrate with Netlify for local deployment

  1. netlify CLI already installed
  2. Simply run netlify dev in command line to locally test site generator, API integrations, serverless functions.

4. Local development

  1. Instead of gridsome develop run netlify dev as stated.
  2. The default port will be 8888, as such by default the local deployment is at localhost:8888.
  3. Happy coding 🎉🙌

5. Create .env.development file for local environment variables

  1. GRIDSOME_BUILD
  2. GRIDSOME_SITE_URL
  3. GRIDSOME_AUTH0_CLIENT_ID
  4. GRIDSOME_AUTH0_MANAGEMENT_API_TOKEN

6. Notes

  1. In package.json:
    • always keep sass-loader dev dependency to 7.3.1.
    • check swiper 6.5.1 is working.

artventures-website's People

Contributors

dependabot[bot] avatar hatwheels avatar pdemertzis avatar

Watchers

avatar

artventures-website's Issues

Add Prices and Tags

This requires implementation. So Tags will be added in Cloudinary images and read in web app. Prices will be added as tags as well for the moment.

Complete README

README needs to be completed, as many stuff may be forgotten

No firstname, lastname if user signups with regular email

If a user signups with regular email (no fb, google) then he won't have a firstname, lastname and his name will be his email.
After signing up we should prompt her to fill his firstname, lastname, besides her role and update auth0 with the firstname, lastname and new name (firstname + lastname).
For already signed up user with regular email that have no firstname, lastname we should also prompt them after login to fill their firstname, lastname (just like we do with the role) and update auth0 with firstname, lastname and new name.

Improve webpack bundle load time

Currently there's an issue when first loading and reloading the application. The js bundle file takes 1-2 seconds to load. This is noticeable in the UI and gives a bad UX for the first seconds. It used to be worse (9 seconds) until clearing some yarn packages, configuring webpack im gridsome and using treeshaking for vuetify. There's no issue when navigating via vue router.

2 ways to solve:

  • reduce bundle size by removing packages and code splitting.
  • reduce load time via selective and lazy hydration

Bug when reloading '/user/profile' and 'user/settings'

When reloading 'user/profile' page, the page breaks and the dev console prints:

1537682714a10b118228bde9d325a8d80660f5bc.js:1 Uncaught (in promise) DOMException: Failed to execute 'appendChild' on 'Node': This node type does not support this method.
    at Object.appendChild (https://d33wubrfki0l68.cloudfront.net/bundles/1537682714a10b118228bde9d325a8d80660f5bc.js:1:103334)
    at p (https://d33wubrfki0l68.cloudfront.net/bundles/1537682714a10b118228bde9d325a8d80660f5bc.js:1:116036)
    at d (https://d33wubrfki0l68.cloudfront.net/bundles/1537682714a10b118228bde9d325a8d80660f5bc.js:1:115667)
    at f (https://d33wubrfki0l68.cloudfront.net/bundles/1537682714a10b118228bde9d325a8d80660f5bc.js:1:116122)
    at C (https://d33wubrfki0l68.cloudfront.net/bundles/1537682714a10b118228bde9d325a8d80660f5bc.js:1:119460)
    at C (https://d33wubrfki0l68.cloudfront.net/bundles/1537682714a10b118228bde9d325a8d80660f5bc.js:1:119395)
    at C (https://d33wubrfki0l68.cloudfront.net/bundles/1537682714a10b118228bde9d325a8d80660f5bc.js:1:119395)
    at C (https://d33wubrfki0l68.cloudfront.net/bundles/1537682714a10b118228bde9d325a8d80660f5bc.js:1:119395)
    at C (https://d33wubrfki0l68.cloudfront.net/bundles/1537682714a10b118228bde9d325a8d80660f5bc.js:1:119395)
    at C (https://d33wubrfki0l68.cloudfront.net/bundles/1537682714a10b118228bde9d325a8d80660f5bc.js:1:119395)

Also when reloading 'user/settings' page, the page breaks and the dev console prints:

d7a9db89632cf626419fc071054849e16003c42e.js:1 Uncaught (in promise) DOMException: Failed to execute 'appendChild' on 'Node': This node type does not support this method.
    at Object.appendChild (https://d33wubrfki0l68.cloudfront.net/bundles/d7a9db89632cf626419fc071054849e16003c42e.js:1:103334)
    at p (https://d33wubrfki0l68.cloudfront.net/bundles/d7a9db89632cf626419fc071054849e16003c42e.js:1:116036)
    at d (https://d33wubrfki0l68.cloudfront.net/bundles/d7a9db89632cf626419fc071054849e16003c42e.js:1:115667)
    at f (https://d33wubrfki0l68.cloudfront.net/bundles/d7a9db89632cf626419fc071054849e16003c42e.js:1:116122)
    at C (https://d33wubrfki0l68.cloudfront.net/bundles/d7a9db89632cf626419fc071054849e16003c42e.js:1:119460)
    at o.__patch__ (https://d33wubrfki0l68.cloudfront.net/bundles/d7a9db89632cf626419fc071054849e16003c42e.js:1:119860)
    at o.t._update (https://d33wubrfki0l68.cloudfront.net/bundles/d7a9db89632cf626419fc071054849e16003c42e.js:1:97138)
    at o.i (https://d33wubrfki0l68.cloudfront.net/bundles/d7a9db89632cf626419fc071054849e16003c42e.js:1:127150)
    at dn.get (https://d33wubrfki0l68.cloudfront.net/bundles/d7a9db89632cf626419fc071054849e16003c42e.js:1:89402)
    at new dn (https://d33wubrfki0l68.cloudfront.net/bundles/d7a9db89632cf626419fc071054849e16003c42e.js:1:89320)

Integrate Cloudinary Upload Widget

Use Cloudinary Upload Widget replacing the current artwork and profile pic upload.

Use it with signature so a serverless function is called when uploading from the widget.

Update artist's artwork upload form.

Update Artist's artwork upload form:

{
  label: 'Type',
  name: 'type',
  mandatory: true,
  values: 'painting', 'sculpture'
},
{
  label: 'Title',
  name: 'caption',
  mandatory: false,
  values: alphanumeric
},
{
  label: 'Dimension',
  name: 'dimension',
  mandatory: false,
  values: 'cm', 'in'
},
{
  label: 'Height',
  name: 'height',
  mandatory: false,
  values: numeric
},
{
  label: 'Width',
  name: 'width',
  mandatory: false,
  values: numeric
}.
{
  label: 'Depth',
  name: 'depth',
  mandatory: false
  values: numeric
}

Note 1: dimension, height, width and depth are connected together, so if at least one is written, the others have to be as well.
Note 2: depth exists only if type is sculpture

Logging in produces a Javascript DOM error

When logging in, a javascript DOM error is logged. It's a bug but it doesn't seem to affect functionality. Might be related with auth0.js package.

c86e059ad27d620d1e5cc70c6d87002fd318691e.js:1 DOMException: Failed to execute 'querySelector' on 'Document': '#access_token=<token>' is not a valid selector.
    at r (https://d33wubrfki0l68.cloudfront.net/bundles/c86e059ad27d620d1e5cc70c6d87002fd318691e.js:1:270730)
    at e.getOffset (https://d33wubrfki0l68.cloudfront.net/bundles/c86e059ad27d620d1e5cc70c6d87002fd318691e.js:1:270907)
    at p (https://d33wubrfki0l68.cloudfront.net/bundles/c86e059ad27d620d1e5cc70c6d87002fd318691e.js:1:144686)
    at Ue.Y.i.options.scrollBehavior (https://d33wubrfki0l68.cloudfront.net/bundles/c86e059ad27d620d1e5cc70c6d87002fd318691e.js:1:185717)
    at Sn.<anonymous> (https://d33wubrfki0l68.cloudfront.net/bundles/c86e059ad27d620d1e5cc70c6d87002fd318691e.js:1:204655)
    at Array.<anonymous> (https://d33wubrfki0l68.cloudfront.net/bundles/c86e059ad27d620d1e5cc70c6d87002fd318691e.js:1:75102)
    at Kt (https://d33wubrfki0l68.cloudfront.net/bundles/c86e059ad27d620d1e5cc70c6d87002fd318691e.js:1:74503)

Local Storage not reactive and insecure

Local Storage variables are not reactive. Moreover they are not secure as they expose personal information of the user to the browser.

A solution has to be found in the auth.js plugin. Proposals:

  • Use vuex in the auth.js plugin, replacing the local storage items with getters and setters.
  • Use a reactive and secure vue.js local storage component.

Add Biography field in settings

We want to add a biography field (string) to the settings page. It will be sent as user_metadata field:

{
    user_metadata: {
        bio: '...'
    }
}

The string's length must be checked out on auth0.com. Maximum for us is 300 characters.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.