Implement Like/Deslike mode style

[sachin-0102]

Hey, My name is Sachin Jethanandani and I'm trying to prepare for gsoc next year. I want to start my contributions. Thanks.

[tiagostutz]

Hi @sachin-0102 !! 👋🏻 That's so nice to know you are preparing for gsoc! Good luck with that! I hope we could help you in anyway.

I'll create an issue for you and link it here asap. Do you have any preference for React or pure HTML/CSS ?

[sachin-0102]

I'm more comfortable with CSS...

[tiagostutz]

Awesome.! Well, we could start the LikeMode card design. Do you want to take that? To check how it is, run the project and access http://localhost:3000/likeMode Right now it looks like this:

Do you have any design suggestions/inspirations to share for the "like mode" card? If so we can discuss those in a specific issue assigned to you along with the community, specially @giteshk11 and @divyaYK

[giteshk11]

@tiagostutz what's the idea behind this like mode?

[tiagostutz]

The ideia is that instead of bringing 2 cards for the user to choose it will be only one card and the user will just say whether he liked or not that product. Also, it should have a dismiss button as well, like we just did in Choice Mode. So, basically we will have two interaction modes: Choice Between and Like/Deslike.

[Amulya-coder]

@tiagostutz I understand the Like/Deslike mode but what is another mode Choice Between ?

[tiagostutz]

The Choice Between is actually in a more mature state and the interaction is to choose between two options. The Like/Deslike mode is an interaction where the user just say whether he likes or not the presented single option.

[accordingtoherr]

@tiagostutz I think I can take this one - ill reach out if I have questions. It looks like basically a state update onClick right?

[tiagostutz]

To be fare, It is a bit more thant that. But not a big deal. Currently the project has two types of interaction: Choice mode (choose between two options) and Like/Deslike mode (one option presented and the user just like or deslike, pretty much like tinder). To put the Like/Deslike mode on the trail is the goal here. You don't need to take care of the events for now, you can just focus on the HTML/CSS part of this component, so it will use Tailwind and will have an aesthetic like the ChoiceMode, that is a bit more advanced.

What do you think?

[accordingtoherr]

sure! just another question: are you using tailwind across the board on the site too?

[tiagostutz]

Yep, the ideia is to use Tailwind all over.

[accordingtoherr]

@tiagostutz yup I will get started on this this week, I will reach out if I have questions =]

[accordingtoherr]

@tiagostutz I was running into issues with my set up. could you give me a hand? after forking and cloning it to my local machine, and running npm install im getting start time errors due to there not being a package.json in the project although there is -

[tiagostutz]

Hi @accordingtoherr ! Let's check this. Could you try to run npm run dev instead of npm start? If it works, please fix the README. Also, are you running the command inside the app folder? Last but not least, which node version are you using.

[accordingtoherr]

I’ll try tomorrow! And I have the most up to date version of node - I can download an older version if needed for this project w nvm if needed

Sent from my iPhone

On Sep 23, 2020, at 10:02 PM, Tiago de Oliveira Stutz notifications@github.com wrote:

 Hi @accordingtoherr ! Let's check this. Could you try to run npm run dev instead of npm start? If it works, please fix the README. Also, are you running the command inside the app folder? Last but not least, which node version are you using.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe.

[tiagostutz]

Hi there @accordingtoherr ! Any updates on that? If you don't have time to work on that now, that's OK.! I can assign this issue to someone and we can work on another issue for you when you are ready to go.

[accordingtoherr]

@tiagostutz no i am still not able to set up the environment i was getting errors. already checked node versions and made sure all the dependencies are up to date

[tiagostutz]

Ah, I see... let's work on that. Please check those steps: 1) enter de app folder (cd app) 2) remove node_modules 3) run yarn install 4) run yarn run dev

After you run that, what are the errors you got? Could you please paste here the screenshots?

[accordingtoherr]

$ REACT_APP_BACKEND_URL=http://localhost:8008 yarn start 'REACT_APP_BACKEND_URL' is not recognized as an internal or external command, operable program or batch file. error Command failed with exit code 1. info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

confirming i removed the packages, added back in and installed a couple that did not install initially. - not sure what is going on

[accordingtoherr]

@tiagostutz i am still unable to run this project locally - you can assign it to someone else since I tried a lot of things/fixes and nothing worked so I do not want a possible machine config to hold up the ticket

[shoaibkamalkhan]

Hi @tiagostutz! As per our conversation, I would like to work on this issue. Can you please assign it to me?

[tiagostutz]

Absolutely @shoaibkamalkhan ! I've just assigned the issue to you. Take a quick look at the contribution guidelines and feel free to ask if you have any question.

Thank you so much.! =)

[shoaibkamalkhan]

Thanks a lot @tiagostutz! I will take a look.😀

[shoaibkamalkhan]

Hi @tiagostutz! I have forked and cloned the repo and when I try to run the app I get the following errors:

I have first used npm install and then npm run dev:

The default interactive shell is now zsh. To update your account to use zsh, please run chsh -s /bin/zsh. For more details, please visit https://support.apple.com/kb/HT208050. ShoaibKhansMBP:stop-analyzing-embed shoaibkhan$ cd app ShoaibKhansMBP:app shoaibkhan$ npm install npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: stop-analyzing-embed@0.2.0 npm ERR! Found: react@16.13.1 npm ERR! node_modules/react npm ERR! react@"^16.13.1" from the root project npm ERR! peer react@">=16.9.0" from @testing-library/react-hooks@3.3.0 npm ERR! node_modules/@testing-library/react-hooks npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer react@"17.0.1" from react-test-renderer@17.0.1 npm ERR! node_modules/react-test-renderer npm ERR! peer react-test-renderer@">=16.9.0" from @testing-library/react-hooks@3.3.0 npm ERR! node_modules/@testing-library/react-hooks npm ERR! npm ERR! Fix the upstream dependency conflict, or retry npm ERR! this command with --force, or --legacy-peer-deps npm ERR! to accept an incorrect (and potentially broken) dependency resolution. npm ERR! npm ERR! See /Users/shoaibkhan/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in: npm ERR! /Users/shoaibkhan/.npm/_logs/2021-01-26T14_56_13_324Z-debug.log ShoaibKhansMBP:app shoaibkhan$ npm run dev

stop-analyzing-embed@0.2.0 dev REACT_APP_BACKEND_URL=http://localhost:8008 yarn start

sh: yarn: command not found npm ERR! code 127 npm ERR! path /Users/shoaibkhan/Documents/Treehouse/Open Source Projects/stop-analyzing-embed/app npm ERR! command failed npm ERR! command sh -c REACT_APP_BACKEND_URL=http://localhost:8008 yarn start

npm ERR! A complete log of this run can be found in: npm ERR! /Users/shoaibkhan/.npm/_logs/2021-01-26T14_56_33_589Z-debug.log ShoaibKhansMBP:app shoaibkhan$

[tiagostutz]

Don't worry, let's troubleshoot this.

Which node version are you using? Could you try v14?

PS - I have downloaded from scratch and installed the project

[shoaibkamalkhan]

I have v15.6.0. How do I downgrade to v14?

[tiagostutz]

I'll try with v15.6.0. I use nvm to manage my node versions...

[tiagostutz]

I have tested here with v15.6.0 and had the same problem. So, if you use the v14 I think it will work, as it did here.

[shoaibkamalkhan]

Ok, I will try this and let you know how it went. Thanks a lot for helping me!😀🙏🏻👍🏻🎶

[shoaibkamalkhan]

Hi @tiagostutz!

I was able to install nvm and then install node version 14.15.4 and I was able to progress, but now I am getting this error when running npm run dev. Do you know what this error means?

The default interactive shell is now zsh. ShoaibKhansMBP:app shoaibkhan$ npm run dev

stop-analyzing-embed@0.2.0 dev /Users/shoaibkhan/Documents/Treehouse/Open Source Projects/stop-analyzing-embed/app REACT_APP_BACKEND_URL=http://localhost:8008 yarn start

sh: yarn: command not found npm ERR! code ELIFECYCLE npm ERR! syscall spawn npm ERR! file sh npm ERR! errno ENOENT npm ERR! stop-analyzing-embed@0.2.0 dev: REACT_APP_BACKEND_URL=http://localhost:8008 yarn start npm ERR! spawn ENOENT npm ERR! npm ERR! Failed at the stop-analyzing-embed@0.2.0 dev script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm WARN Local package.json exists, but node_modules missing, did you mean to install?

npm ERR! A complete log of this run can be found in: npm ERR! /Users/shoaibkhan/.npm/_logs/2021-01-27T23_41_41_615Z-debug.log ShoaibKhansMBP:app shoaibkhan$

[shoaibkamalkhan]

Hi @tiagostutz! I was wondering if there was any status on this issue? I also posted my issue on stackoverflow; you can visit the link here:

https://stackoverflow.com/questions/65908908/i-need-some-help-in-getting-my-first-open-source-project-running/65909903?noredirect=1#comment116542998_65909903

The user eol was very helpful and stated the following:

The error message tells us that yarn is not installed. Looking at the dev script inside the package.json we can see the actual command that is run:

"dev": "REACT_APP_BACKEND_URL=http://localhost:8008 yarn start", The problem is that it's not listed as a (dev-) dependency in the package.json (you might want to create a PR for that), hence you don't get it installed when doing npm i .

To fix this and install yarn, you should run the following: npm i -D yarn or install it globally using npm i -g yarn.

Do you think we can do a Zoom call or use any other screen sharing app and get this issue sorted as I really want to get started on this issue and submit my first PR.

[MDPuneethReddy]

Hi, I have 2 doubts 1) Should I implement frontend or connection with state, 2) Getting Error like below while running "npm run dev",

stop-analyzing-embed@0.2.0 dev REACT_APP_BACKEND_URL=http://localhost:8008 yarn start

'REACT_APP_BACKEND_URL' is not recognized as an internal or external command, operable program or batch file. npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! stop-analyzing-embed@0.2.0 dev: REACT_APP_BACKEND_URL=http://localhost:8008 yarn start npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the stop-analyzing-embed@0.2.0 dev script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:

[tiagostutz]

Hi @MDPuneethReddy !

1. Frontend only
2. What is your environment (OS, node version...)?

[N-coder-bot]

Hi @tiagostutz ! I want to get started I am a beginner so what and how should I begin?

[tiagostutz]

Hi @tiagostutz ! I want to get started I am a beginner so what and how should I begin?

Awesome.! Do you have any experience with React, HTML/CSS? You could begin bringing the project up and running locally. Tell me if you have problems with that.

[N-coder-bot]

@tiagostutz I have much experience in HTML/CSS and I have a very little in react (but I am determined to learn it on the way) so can you please guide me how to proceed?

[tiagostutz]

@tiagostutz I have much experience in HTML/CSS and I have a very little in react (but I am determined to learn it on the way) so can you please guide me how to proceed?

Awesome! You can start following the REAMDE instructions on how to run the project locally.

[omnaladkar]

i want to contribute can u share issues related html,css,js

[AmandeepSingh285]

Hi, @tiagostutz I am Amandeep and I am preparing for GSOC next year. I would like to contribute in any open source project in HTML, CSS or Javascript. Could you share some beginner issues that I could solve?

[tiagostutz]

Hi there @omnaladkar and @AmandeepSingh285 ! 👋🏻 Welcome to stop analyzing.!

Let's get something for you to tackle. Have you read the README instructions? Were you able to bring the project up and running? Need some help with that? That's the first step, to put the project running and then let's tackle some issues. Ok?

[tiagostutz]

Hi @accordingtoherr !! Part of... the interaction of the like mode is different from the choose mode. In the choose mode, you have 2 options and select the one that you prefer. In the "like mode" the user is presented just one option and he/she will like or deslike this option. So, there's some interaction change and it is a good idea to break these two types of interactions in different components.

[tiagostutz]

Absolutely! Go ahead and let me know if you have any issues... =)

[ArashST79]

Hi. I'm looking for couple of issues for solving for my midterm university project. I wonder if you can help me to do some easy one's. I'm a beginner html,css developer so the topic I want is html and css. @tiagostutz I would appreciate if you can help me out

[premsagarkushwaha]

Hi, i am prem and I am newbie in issue solving or i can say i want to start my journey from here. So, can you provide me some issue so that i can solve them? I am looking for webdesigning issue as I am starting from easy one.

[ghost]

@tiagostutz is this issue still open? I would love to contribute.

[Vishrut19]

Hey Folks! Is anyone working on this ? I would like to contribute. Can take the issue or if anyone is assigned or working on this issue I can help them

[POOJANGHETIYA]

Hola Folks!! I am an absolute newbie to opensource. Is this issue still open ? If yes, then please tell me what to do. I would really love to do my first contribution...

[DevFaisal]

Hey is it still available ?

[RAG-KR]

hi I'm new to open source completely and would like to contribute and learn

[BINDUVANI]

Hello , I'm Bindu vani new to open source and I'm trying to prepare for gsoc 2024. I want to start my contributions and learn more!!! Can anyone assign me the issue , i would love to solve them . Especially i'm looking for web designing moreover react based projects