Add project button in web app

[Roshanjossey]

🐞 Problem
It's not very easy to add projects to suggestions

🎯 Goal
Make it simple for anyone to add projects to suggestions

💡 Possible solutions
Add a Add project button to web app. On clicking it, open a form to add details about the project. On submitting this form, open a pull request in this project with those changes

📋 Steps to solve the problem

• Comment below about what you've started working on.
• Add, commit, push your changes
• Submit a pull request and add this in comments - Addresses #<put issue number here>
• Ask for a review in comments section of pull request
• Celebrate your contribution to this project 🎉

[j-schuster]

Would like to work on this. Thanks!

[j-schuster]

Quick question. Seeing that the current project list is hard coded in, want me to make an api that we can post new projects to? We could then just get the project info from there. Or any ideas to add a project:)

[Roshanjossey]

@j-schuster, As I've explained in the issue description, we can use GitHub API to open a pull request when user adds a new project from web app. That way we'll have more control over which project to accept and which to reject (It's not a good idea to take in everything)
Does that make sense?

[j-schuster]

Yes, okay thanks for the clarification.

…

On Mon, Dec 11, 2017 at 10:58 PM Roshan Jossey ***@***.***> wrote: @j-schuster <https://github.com/j-schuster>, As I've explained in the issue description, we can use GitHub API to open a pull request when user adds a new project from web app. That way we'll have more control over which project to accept and which to reject (It's not a good idea to take in everything) Does that make sense? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#1722 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AY4YiZd-J5hR8otM7ykUkQ3UkssB1IZxks5s_iQHgaJpZM4Q8YU_> .

[kjesek]

Is this issue still available? I would love to help out!

[NsLib]

For now, I think the biggest problem is that the contributors cannot generate the gh-pages.
Can we just use ajax to fetch data from https://github.com/Roshanjossey/first-contributions/blob/master/app/src/components/ProjectList/listOfProjects.js ?
When someone wanna to add a project, they just need to send a pull request. Whenever it's merged into the master branch, it's be displayed on the website.

[karanshrm44]

open a pull request in this project with those changes....Can You explain me this line more briefly....what kind of feature you want ?

[ghost]

Hi @Roshanjossey , Is this fixed or Is help required for this?

[borisyordanov]

@Roshanjossey What's the status on this?

[Roshanjossey]

@borisyordanov, this is not implemented yet. Feel free to take a stab if you're interested.

[arshadkazmi42]

@Roshanjossey I am interested in taking this up, if this is still available. But I have not worked on github api before? Can you let me know how or which api to be used for this?

[borisyordanov]

@arshadkazmi42 Go ahead and take it. Let me know if i can help you though, i've used the Github API quite a bit

[arshadkazmi42]

@borisyordanov I need to understand how to proceed. So let's say I got input from user. Now for CLI we follow this workflow
Checkout Feature Branch -> Make Changes -> Add -> Commit -> Push -> Create PR
So do I have to follow the same flow? Calling api's for each operation? Or there is some other way?

[borisyordanov]

@arshadkazmi42 From what i can tell the projects are stored here. You read how to edit files with the Github API here.

I assume you are asking about the Github API, because the project list is a local file and if the app updates it on the fly it will not update its contents in the repo.

I don't know if creating branches for every change is worthwhile. Maybe we can create a branch 'project-additions' and edit the list on it above and merge to master. How do you solve merge conflicts though?

I'm sure it's doable, but IMO it'd make more sense if we set up a database (firebase for example)

@Roshanjossey What do you think?

[arshadkazmi42]

@borisyordanov Thanks for this info. I will give it a try later today.

[Roshanjossey]

@borisyordanov, You're right.

I was thinking about using pull request API for this. That way we have a control on which projects get added.

How do you solve merge conflicts though?

If it is a pull request, project maintainers can take care of this. We could review it as well.

One thing I'm unsure about is how to take care of authentication.

it'd make more sense if we set up a database

We'll want a backend eventually. It's just, this is not a urgent requirement at the moment. Also, I'm just unable to spend time on this at the moment. We'll definitely build more features in to the web app as more requirements come in.

[borisyordanov]

One thing I'm unsure about is how to take care of authentication.

We just need a client ID and secret. You can read here how to get them.

Here's an example on how i've used it before:
https://github.com/borisyordanov/github-issues-react/blob/master/src/services/GetIssues.js

[Roshanjossey]

@borisyordanov, Yup. This is what I do for the bot that merges pull requests here.

We have to put those in environmental variables or something. (because it's risky to share it or put it in the code)

[Roshanjossey]

Like, I can read the source of your app and find your client secret and client id. This is dangerous.

[borisyordanov]

I can read the source of your app and find your client secret and client id. This is dangerous.

100% true. Don't do this on production apps, i simply meant to show whoever ends up doing this how to use the auth tokens to do API calls. The tokens would need to be stored in a more secure manner (like in environment variables like you suggested)

[arshadkazmi42]

But we don't have a backend right? Then do we need to work on backend first?

[Roshanjossey]

@arshadkazmi42, we don't.

We could do more research on if theres a way to do authentication securely with just front end app. If there's nothing, we can defer this to some time in the future.

[arshadkazmi42]

@Roshanjossey Ok. I will have a look into it and check whether we have any secure auth in frontend

[Aakash0410]

I want to get started with these. Can you help me get started with this?

Thank You.

[Roshanjossey]

@Aakash0410, could you please read the comments in this issue thread and ask any questions you have about that.

[deezy136]

Is this still available?

[arshadkazmi42]

@deezy136 Yes its available. @Aakash0410 hasn't replied for a long and I am also bit busy.
You can go ahead and work on this.
Read the comments above to check the implementation discussion

[deezy136]

Ok thank you so much. I will let u know if I run into any problems

[deezy136]

Hello, can I run the web app from visual studio? Its giving me some issues when trying to run from visual studios

[arshadkazmi42]

To run this project, you can navigate to app directory using command line and run these commands

npm install
npm start

You can find more details about this here
https://github.com/Roshanjossey/first-contributions/tree/master/app

The project does not depends on IDE, its just needs npm & nodejs in the system.

[deezy136]

Thank you so much.

[deezy136]

To run this project, you can navigate to app directory using command line and run these commands

npm install
npm start

You can find more details about this here
https://github.com/Roshanjossey/first-contributions/tree/master/app

The project does not depends on IDE, its just needs npm & nodejs in the system.

where would you like the add project button positioned on the web app.

[deezy136]

hello there, is there anywhere in particular that you would like the button placed on the web app

[Roshanjossey]

@deezy136, It's not just the button right? We also have to think about the functionality of wiring that up. I'm not sure about how to go about it at the moment. We were putting this issue on hold because of that. Please read through the previous comments in this thread to learn more. It'd be awesome if you could figure out some ways to circumvent problems that we couldn't resolve.

[arshadkazmi42]

@Roshanjossey why don't we move the projects list from a file to database? Doing that will make it easier for adding a "Add" button

[deezy136]

I agree with creating a database because it would be easier to pull from a database that can update compared to a local file. In creating the Database are you going to go with the firebase option or some form of sql?

[Roshanjossey]

@arshadkazmi42, Like we discussed earlier, we need to have control over accepting projects that should get added.

Gimme some time to setup a service for this.

[Roshanjossey]

Closing this issue for the moment. We'll create it again for Hacktoberfest.