DEV Community

Cover image for Build an Instagram clone with strapi.js and svelte (PART 2)

Build an Instagram clone with strapi.js and svelte (PART 2)

arnu515 on November 11, 2020

Hey! I'm back here with part 2 of this tutorial. As promised, now, we'll be working on the frontend. As always, the code is available on Github ...
Collapse
 
arnu515 profile image
arnu515

For those people getting an error stating cannot read property provider of undefined, you have to put post.image instead of post.image[0]. I accidently set the type of image on post to multiple in strapi. If you still have questions, check on the Github repository: github.com/arnu515/quickstagram

Collapse
 
itsmefarhan profile image
Farhan Farooq

How to handle following / followers in strapi?

Collapse
 
arnu515 profile image
arnu515

You could create a followers table in the database, which would contain the user it belongs to, and users they follow as relationships. This will allow you to get the Followers and Following numbers you see on instagram.

For the frontend, you could setup a custom filter which would show, for example, only the posts of the people the user followed.

Collapse
 
siemen_subbaiah profile image
Siemen Subbaiah

Hey there, I know it is a super late reply!
but can you elaborate here, I'm primarily a frontend dev!

Thread Thread
 
arnu515 profile image
arnu515

No worries! Strapi makes it really easy for you.

You need to create a table called "followers" which will basically act as a link between two users - a user who is following another user. This kind of relationship is called a Many-to-Many relationship, which means that many users can follow many other users. While creating a relationship, you can select the many-to-many option and choose the tables in strapi itself.

Collapse
 
rifie profile image
Syarifah Riefandania ☄

Hi, nice tutorial... I got "Uncaught ReferenceError: qs is not defined" on main.ts. I peeked your github, the "qs" is not there either.. please help? thanks!

Collapse
 
linehammer profile image
linehammer

If you are using any script file and getting "Uncaught ReferenceError:" which means 'x' is either a variable or a method which you are trying to use before declaring it using var keyword. This means that there is a non-existent variable referenced somewhere. This variable needs to be declared, or you need to make sure it is available in your current script or scope otherwise , it will endup throwing this 'x' is not defined error . This usually indicates that your library is not loaded and JavaScript does not recognize the 'x'.

To solve this error: Load your library at the beginning of all your scripts.

There can be multiple other reasons for this issue:

Path to CDN library you included is not correct
The library file is corrupted
Working offline
Conflict with Other Libraries

Collapse
 
jimdonaghy profile image
Jim Donaghy

You'll need to install the qs package: "npm install qs"

Collapse
 
shriji profile image
Shriji

Excellent work 👍

Collapse
 
arnu515 profile image
arnu515

Thank you so much!

Collapse
 
arnu515 profile image
arnu515

The third part is out! dev.to/arnu515/build-an-instagram-...